Resolution switching is an effective technique for responsive images for most images. This is especially true for square images. But in some other cases, this is not an effective solution. Traditionally, desktops have a landscape orientation. So many images may be in landscape orientation. But recently mobile phones have become popular. Most people browse the Internet in Portrait mode. The images which are meant to be seen in the landscape mode do not look good in portrait mode. The subject in the image may appear tiny on mobile devices if they are relatively small when compared to the whole image. This cannot be fixed using resolution switching. In this case, we need a technique called art direction.
Art direction is the process of cropping the essential part of the original image and serving the cropped image as a substitute in smaller devices. Since we are responsible for providing the cropped image, we have more control over the image.
The picture element can be used to provide multiple source images for different devices. It contains source elements which provide individual image files along with conditions. An image element is provided as a fallback mechanism.
<picture> <source media="(max-width: 799px)" srcset="example-small-device.png"> <img src="example-large.png" alt="Example for art direction"> </picture>
The media attribute is used to set the condition for choosing the image. When the conditions are not met or the browser does not support the picture element, the image element is used as a fallback. In the above example, any device having width lower than 800px will show the smaller version.
There are some promising newer image formats that provide high-quality images at lower sizes. The browser support for these images is not extensive. If we still want to utilize these newer formats in browsers that support them we can use them in a picture element. The image element fallback ensures that in cases where browser support is not present the image gets displayed in a more conventional format.
<picture> <source type="image/svg+xml" srcset="example.svg"> <source type="image/webp" srcset="example.webp"> <img src="example.png" alt="Example image"> </picture>
You may be tempted to use JavaScript to dynamically change the src attribute for responsive images. The images will get replaced as expected. But the browsers usually send image requests before parsing the scripts. This results in a situation where both the larger image and the smaller image is loaded. This defeats the entire purpose of using responsive images. The user experience, in this case, is worse than simply using the original image. So we should only use HTML features for responsive images.
At the beginning of the web, web pages were viewed only on desktop screens. As mobile technology has improved over the years, more people began to access the Internet from their smartphones. This has lead to devices that support the internet having different sizes, orientations, and resolutions. Responsive design has emerged as a solution for the variation in the capacity of the devices. Websites are designed to be adaptive. Images are found in websites of all types. Responsive images will help in making websites more accessible for visitors using different devices than a desktop. Vector images can be a solution in some cases. Using vector images whenever possible will be a good step in the right direction for responsive design.
When comparing HTML files with image files, we can see that image files are significantly larger in file size. While these images may be required for a large desktop screen, they are not suitable for mobile devices. When the resolution of the image is much larger than the device’s display, the user is just wasting bandwidth. In places where Internet services are costly or slow, this is an inconvenience for the user. The solution will be to just serve a smaller version of the file for those users. This can be done using the srcset and sizes attributes.
<img srcset="example-400w.png 400w,
example-600w.png 600w,
example-800w.png 800w"
sizes="(max-width: 400px) 400px,
(max-width: 600px) 600px,
800px"
src="example-800w.png"
alt="Example Image">
The srcset attribute provides a list of images accompanied by their width in w units. Each file is separated by a comma. The sizes attribute is used for stating the conditions to apply for selecting the image from the list provided by srcset. The browser will select the first matching condition. So the ordering should be from smaller to larger files. The image file closely matching the slot will be selected. The srcset is supported by modern browsers. For older browsers, the src attribute acts as a fallback mechanism. Older browsers display the image in the src attribute while newer ones will select the appropriate one from the srcset attribute.
Sometimes the image size displayed on the screen will be the same for two devices. But the resolution of the devices may be different. In this case, the image may not be great on the high-resolution screen. We can provide additional images at higher resolutions for these devices.
<img srcset="example-400w.png 1x,
example-600w.png 1.5x,
example-800w.png 2x"
src="example-800w.png"
alt="Example Image">
The browser chooses the appropriate images automatically when the width of the image is set in CSS. Low-resolution devices will use the first image while higher resolution devices will use the last image.
Using these methods for resolution switching can be beneficial for the page load times in smaller display devices. This can give the perception that the pages load faster.
Normally we use images in formats like jpg, png, and gif for web pages. These are scalar images. These images are made up of a fixed number of pixels. Each pixel can represent a single color. These pixels are arranged in rows and columns to form an image. When these pixels are viewed at a distance, they form one whole image. Any screen that can display images have a fixed number of pixels.
Vector images do not have any pixel information. Instead, they store the information as objects that have attributes such as shapes and paths. This allows vector images to be scalable i.e., they can be made smaller or larger depending on the situation. Scalar images contain a fixed amount of information. They can be made smaller since it is just a matter of combining pixels. But when scalar images are made larger, they become less accurate images. This is because these images contain only limited information about the image. In case of enlarging images, we need more information which scalar images don’t provide.
Here is an image of a circle
Here is how a scalar image of the circle would look zoomed in
Here is how a vector image of the same circle would look zoomed in
As you can see, the scalar image when zoomed in looses some of its detail. The vector image retains its sharpness even when it is zoomed in. This is one of the advantages of vector images. Since it is scalable it can be used for any device size. If the images have only simple shapes and paths, then the vector images can be much smaller. Vector images can easily be converted to scalar images of any size.
There are some situations where using scalar images is more sensible than using vector images on the web.
Vector images are suited for images like logos and patterns. Scalar images are suitable for images like photographs. Try to use vector images when possible and use scalar images in other situations.
Scalable Vector Graphics or SVG is a vector image format used in many websites. It is an XML based markup language similar to HTML. While HTML uses elements and attributes to describe different content, SVG uses them for describing different shapes.
<svg version="1.1" baseProfile="full" width="300" height="300" xmlns="https://www.w3.org/svg/2000/"> <circle cx="150" cy="150" r="50" fill="blue"> </svg>
Since SVG is a markup language it is possible to code images by hand. But usually, SVG images are made using vector image editors like Inkscape or Adobe Illustrator.
The easiest way to add SVG images is by using the img element. SVG images can be included like any other image format.
<img src="example.svg" alt="Example Vector image" height="100px" width="100px" />
We cannot change the attributes of the SVG elements in this method using JavaScript and CSS.
The first method won’t work for older browsers that don’t support SVG. In order to support older browsers, we can use a fallback mechanism to scalar images.
<img srcset="example.svg" src="example.png" alt="An example vector image">
Older browsers use the scalar image and newer browsers use the SVG image. Similar to the first method SVG attributes cannot be modified using JavaScript or CSS.
Just like how CSS code can be inserted inline in a web page, we can also add SVG inline. We can open the SVG image in a text editor and copy the entire code. We can paste the SVG code into the HTML document. Make sure to copy only the SVG element and its contents.
<svg width="300" height="300"> <rect width="100%" height="100%" fill="red" /> </svg>
This method is useful when the image must be included only once. This method allows for manipulation of attributes using JavaScript and CSS. Another benefit is that an extra request to fetch the image is not required. On the downside, the browser cannot cache the image for fast access.
One of the ways to make images more accessible to visitors using screen readers is to include alternative text for all images. We can include alternative text by using the alt attribute. The alternative text is shown when an image is unavailable. If the alternative text is descriptive, it might be useful when fixing image issues. If an image is not loaded due to missing image files or misspelled image files, we can infer the missing image by the alternative text. Some users may want to view or can view only the text portions of the web pages. These users might find the alternative text helpful. When some browsers don’t have support for newer image types, then they show the alternative text. Finally, many search engines can match search queries with the web page using text in the alt attribute.
If you feel that you have given enough information about the image inside your main content, then it is perfectly acceptable to leave the alt attribute with empty text. This will allow screen readers to skip these images. Don’t waste someone’s time with redundant alternative text.
Sometimes we may want to include additional text related to the image like a caption. Usually, the image and the caption need to be shown together. This can be done by using the figure and figcaption elements. The figure element is used for defining figures as used in traditional media like books and journals. The figcaption element is used for providing a caption for the figure. Images can be figures in HTML.
<figure> <img src="example.png" alt="An Example image"> <figcaption>The caption is written here</figcaption> </figure>
Usually, figures in books and journals are illustrations and diagrams. Since the web is a multimedia platform, figures can be:
Since the content inside the figcaption is available for both normal visitors and visitors using screen readers, we can use it to describe the image. When the image is not available both the alternative text and caption are shown. So we should not repeat the same text in both places.
Visual Studio Code is a free and open source text editor from Microsoft. It is an advanced code editor which has features like extensions and syntax highlighting. It is a good choice for software and web development.
You can download VS Code from the following link:
https://code.visualstudio.com/
Notepad++ is a free and open source text editor. It is available only for Windows. It is a lightweight text editor that has advanced features like syntax highlighting. It is used for web and software development projects.
You can download Notepad++ from the following link:
https://notepad-plus-plus.org/download
Atom is a free and open source text editor developed by GitHub. Atom has support for plugins that can extend functionality even further. It is a recommended editor for web development and software development.
You can download Atom from the following link:
https://atom.io/
Sublime Text is a commercial text editor. Sublime Text has support for plugins that can extend functionality even further. It is a recommended editor for web and software development. Although it is a paid software, you can use an unregistered download for free with no time constraints.
You can download Sublime Text from the following link:
https://www.sublimetext.com/
Brackets is a free and open source text editor developed by Adobe. It is written entirely using HMTL, CSS, and JavaScript and so it can be modified. Brackets has support for plugins that can extend functionality even further. It is a recommended editor for web development.
You can download Brackets from the following link:
http://brackets.io
Opera is a free web browser developed by Opera Softwares. Opera is popular among developers because of its standard compliance and ease of use. Not only is the browser helpful for web surfing, it also has some tools which would be helpful for web developers building new websites.
You can download Opera using the following link:
https://www.opera.com/download