The term responsive refers to an element to resizing dynamically within a fluid layout so that the responsive element will adjust as the viewport resizes.
Generally, the term adaptive refers to different versions of an image called in to display depending on the size of the viewport. There can be several physical versions or they can be generated dynamically with scripts. Typically, the various size versions are also be responsive. This method reduces bandwidth useage on handheld devices.
Responsive image using <img> width attribute <img src="img/Morgenster_1200.jpg" width="100%" alt="Morgenster on the Thames" />
Adding a percentage value to the width attribute and removing the height attribute will make the image responsive.
It is not dynamically responsive the other way around, that is, using the height and removing the width.
Note:
Unfortunately, even though it appears to work in the browser, it is not valid W3C markup. Image size attributes should be expressed in pixels.
Responsive image using CSS
CSS with a width attribute of 100% is applied to the image .image_1 {width: 100%;}
In order for this to work, without distorting the image, the height and width attributes of the image tag need to be empty or removed.
If the height and width attributes are expressed in the image tag then a height attribute of auto should be included in the CSS, like so .image_1 {width: 100%; height: auto;}
Note:
The advantage of this method is that it is very simple and easy to implement.
The disadvantage is that on a mobile device, a larger image than necessary is used.
Adaptive images with CSS
In this example three different sized versions of the image are used. The appropriate sized image is displayed in by using CSS @media query breakpoints. The images are inserted as background images in a <span> and image accessibility maintained through the use of an aria-role. Each indivudual image is responsive.
Note:
The advantages of this method:
Appropriately sized image is used for a particular viewport
Enabled through CSS without the need for scripts
The disadvatages of this method:
Need for different sized image versions.
Considerable amount of code for each image.
SVG - Scalable Vector Graphics
Original here image is 102 x 102px, file size 5KB. Created in Illustrator and saved as an .svg file. An SVG file contains code that expresses the image as vector data. The image is inserted by using <object>. The code for this image: <object data="img/swirl_b.svg" type="image/svg+xml" class="image_scale"></object>.
This example includes a class for a style to size the image to 100% .image_scale {
width: 100%;
}. For this to work, the height and width attributes need to be removed from the code contained in the SVG file. To do this, open the image in a code editor (Text Wrangler, Dreamweaver etc).
The image sits on a transparent background.
Note:
The advantages are that a small file can be enlarged with no loss of quality. Can only be used for graphic images. Not appropriate for photographic images. There are various ways in which an SVG file can be implemented (see W3schools link above).
