Nowadays, Internet access can be obtained from almost any smartphone, tablet, and computer. Moreover, all devices have different technical characteristics such as screen size, resolutions, etc. The same image in the browser may look great on one device and be of poor quality, or be too large for another device. To avoid this problem on your site, you need to use responsive images. In this article, we'll look at what responsive images are, the benefits of using them, and how to create responsive images.
What are responsive images?
Responsive images is a technique that allows web browsers to select one of several identical images that are of different sizes or one of the similar images that best suits a particular device. The browser can get the technical characteristics of the device, such as screen size, resolution, orientation, internet connection speed, and others. Using these characteristics, it chooses the image that will look best on the device without being much larger than the screen size, which can greatly increase loading speed.
Why should you use responsive images?
Let's take a look at the main benefits of using responsive images.
Increase website loading speed
Most of the webpage weight on a website are images. Using responsive images allows you to upload images quickly and in good quality. If users are using mobile devices with a small screen resolution, then there is no need to upload an image with a high resolution, as it can take a long time. If a website takes a long time to load or has a design that is not adapted for a mobile device, then users can close it and never return. Using responsive images is especially important for mobile devices to increase your website loading speed.
Improve user experience
Using non-responsive images may result in images on the website being stretched, cropped, or positioned in the wrong place. Sometimes, simply cropping a large image can cause it to lose its legibility. All this can be avoided by using responsive images. In this case, the large image is replaced with a smaller one that puts all the important details in an easy-to-view size. The images will be displayed on the site in the right place, the right size, and in good quality. Users will not need to scroll and resize to view the image.
Improve SEO
The presence of responsive images on the site is taken into account when ranking sites in search results by Google. Thus, the SEO of a site is influenced not only by its text content but also by a responsive design that is universal for all devices.
Responsive images in HTML
There are several different ways to implement responsive images in HTML. First, let's take a look at how to use HTML srcset.
Use srcset
The srcset attribute allows you to specify a list of versions of the same image in different sizes, as well as specify the sizes of these versions of the image. The browser selects the most suitable image based on the characteristics of the device.
There are two ways to set the size of an image in HTML srcset: using an image density or its width.
Here is an example of specifying image density:
In this example, in the srcset attribute, we list the URLs of the images and their density separated by commas. The src attribute specifies the URL of the original image, which is used if srcset is not supported by the browser.
Use image density if your images have a fixed width and the only thing that changes are density.
An example of specifying the image width:
In this example, instead of density, the image is specified by its width. Use w instead of x to specify the width.
Advantages of using image width:
- The ability to create images of any size, non-multiple to the base one.
- Telling the browser information about the image size in pixels allows it to choose a more suitable image.
Here you can read a complete description of how the srcset attribute works.
Use srcset and sizes
The srcset attribute works well if the image needs to span the entire width of the screen. But what if our layout has several columns and the image should occupy a different number of columns depending on the screen size? To do this, we will use HTML srcset and sizes. Let’s consider the following example:
In this example, the sizes attribute tells the browser that if the screen size is less than 300px (max-width: 300px), the image will occupy 100% of the viewport (100vw), if the screen size is less than 700px (max-width: 700px), the image should occupy 50% of the viewport (50vw), and if the screen is larger than 700 pixels, then 33% (33pw) of the viewport.
Read more about how the image size is calculated here.
In both cases, we specified only the width of the image without its height. This is done to simplify the syntax because responsive designs are usually limited to only width, not height.
Use element picture
If you want to display different images on different devices, not the same images of different sizes, then you need to use an HTML picture. This element will be useful for you if you want:
- Upload images in different formats.
- Load different images for different color themes.
- Transform (crop, rotate, stretch, etc.) images to highlight some important areas.
Let's look at an example of using an HTML picture.
The HTML picture includes one element img and can have zero, one, or more elements source.
The element img includes the attribute src, which contains the path to the default image, as described above for HTML srcset.
The element source contains the following attributes:
- srcset - works the same as described above for the element img.
- media - sets the condition under which the image specified in the srcset is selected by the browser. If the condition is false, then the browser does not select this source. It gets the next source or the img, if this there are no sources anymore.
- type - indicates the mime type. If the specified type is supported by the browser, then it loads the specified image, otherwise, it skips this source and takes the next one.
You can find more examples of responsive images in HTML here.
Lazy loading of responsive images
Lazy loading of responsive images is loading images when they are needed, not immediately upon loading a webpage. Using lazy loading can improve performance, which also has a good effect on the user experience.
Implementing lazy loading in HTML is fairly straightforward. To do this, replace the src attribute with data-src and srcset with data-srcset, as shown below.
Along with the data-src attribute, you can also specify the src attribute, in which you can place low-quality images that will be loaded when the page is loaded, and, if necessary, it will be replaced with a higher-quality image from data-src.
Using CSS for creating responsive images
Another way to create responsive images is using CSS. A great benefit of using CSS is the possibility to insert an image into any element, not only img. To do this you should use a background-image property.
Just like in HTML, responsive images in CSS can be created using several ways:
- Loading different sizes of the same image.
- Loading different images depending on some conditions.
In order to provide the browser with the choice of the size of the image to be loaded, the following code is used in HTML:
In CSS, the same can be written using the image-set as shown below.
Another way to create responsive images in CSS is using query @media:
Instead of the HTML picture, which allows different images to be loaded under different conditions, in CSS you should also use the query @media.
Let’s consider the following HTML code:
It can be replaced with the following code in CSS:
You can see more examples of responsive images in CSS here.
Automated responsive images
The main disadvantage of responsive images in HTML and in CSS is that different versions of images need to be created (which takes time and effort) and stored on the server (which can take up a lot of server space for a large website). Also, in some cases, the syntax of the responsive images can be quite complex. To solve these problems, there are tools that allow you to automatically create responsive images. Let's take a look at how automated responsive images work in Gumlet.
Gumlet
Gumlet is a tool that allows you to quickly and easily optimize images and deliver them to users. With Gumlet, you can resize an image, change its format, color scheme, and perform the most frequently used operations.
To integrate your website or app with Gumlet, you can use the Gumlet plugin or API. You can read more about integration with Gumlet in the documentation.
Gumlet is very easy to use. After installing the plugin you should replace all img attributes src with data-src. Then when the page loads, Gumlet will calculate the optimal image size and automatically set the src attribute with the desired image.
You can choose any data source where your images are stored. Gumlet automatically determines which image is optimal for the user, processes the original image, and delivers it to the user. Gumlet downloads an image from a specified source, processes it in real-time, and delivers it to users. All processed images are stored in the cache, which allows you to deliver images quickly upon repeated request. If you want to know more about how Gumlet works, read the official documentation.
Responsive images in WordPress
WordPress 4.4 introduces support for responsive images. Now, every time you upload images to the media library, WordPress automatically creates several versions of the image of different sizes. When you insert an image into a site, the srcset and sizes attributes are generated automatically. You can also customize your own themes and use image sizes other than those generated automatically. To do this, WordPress has a number of functions, which are described in more detail here.
If you want to create responsive images in WordPress with a version less than 4.4, then you need to use special plugins.
Conclusion
In this article, we looked at why it is necessary to use responsive images and how to create them in HTML, in CSS, and automatically in Gumlet. Choose the method that is the most convenient for you to improve the performance of your website.
FAQs
1. Why are responsive images important?
Responsive images are important because they allow websites to display images optimally on different devices and screen sizes, reducing page loading times. This ensures that images look sharp and clear on any device, which can help to improve user experience.
2. What image format is best for responsive design?
The best image format for responsive design is JPEG. JPEGs are highly compressed and smaller in size, making them faster to load on websites, which is especially important for mobile devices and slower internet connections. Additionally, JPEGs can be easily resized and compressed without losing quality, which makes them ideal for responsive design.
3. What is the best image size for responsive websites?
Pixel width of 2500 pixels is the perfect image size for responsive websites as it is perfect for stretching full-screen across a browser in most cases.
4. How do I make my image fit responsive?
You can use a responsive image tag such as <img src="image.jpg" class="img-responsive" />. You can also use CSS for resizing. For example, use the max-width property with a value of 100% to make the image responsive: img { max-width: 100%; }
Another option is a CSS framework like Bootstrap. Bootstrap allows you to use classes such as .img-responsive on images to make them responsive. Lastly, you can use the HTML5 picture element. The picture element allows you to specify different images for different screen sizes.
