{"id":1636,"date":"2022-09-28T06:32:18","date_gmt":"2022-09-28T06:32:18","guid":{"rendered":"https:\/\/imagify.io\/blog\/?p=1636"},"modified":"2024-03-07T11:17:57","modified_gmt":"2024-03-07T11:17:57","slug":"make-responsive-images","status":"publish","type":"post","link":"https:\/\/imagify.io\/blog\/make-responsive-images\/","title":{"rendered":"How to Make Responsive Images (And Why You Need Them)"},"content":{"rendered":"\n

Want to know why and how you should make responsive images that match all types of screens? In this article, we\u2019ll go over the concept of responsive images for each device, how to make an image responsive, and share a few more image optimization techniques to boost performance. <\/p>\n\n\n\n

What Are Responsive Images and Why They’re Important<\/h2>\n\n\n\n

Responsive images mean your browser knows which image to load based on the user\u2019s device, screen size, orientation, and network. <\/p>\n\n\n\n

\"Responsive
Responsive images in web design – Source: Imagify<\/a>
<\/figcaption><\/figure>\n\n\n\n

You need responsive images to serve a fast web page to your users across all devices (mobile, tablet, and desktop). If you don\u2019t make your images responsive, the same image size will be served to someone using a large-resolution computer or a smartphone. This lack of adaptability toward the user and the network will have a negative impact on performance. <\/p>\n\n\n\n

Impact of Responsive Images on Performance<\/h3>\n\n\n\n

By optimizing large images on mobile<\/a> and making use of responsive image techniques, you will significantly improve your performance metrics. <\/p>\n\n\n\n

Let\u2019s share a few facts about responsive images!<\/p>\n\n\n\n

Performance fact #1 –<\/strong> Responsive images improve your page load speed.<\/strong><\/p>\n\n\n\n

In the example below, we can see the benefits of using responsive images on performance. <\/p>\n\n\n\n

When optimizing and serving responsive images, the page loading speed was reduced from 8.7 seconds to 4.2 (a decrease of 52%).<\/p>\n\n\n\n

\"Responsive
Responsive images loading test – TTI Source: YOTTA<\/a>
<\/figcaption><\/figure>\n\n\n\n

Performance Fact #2 –<\/strong> Images consume 60% bandwidth when loading a web page. <\/strong><\/p>\n\n\n\n

Images are the dominant resource on a web page, which is why you should make sure to serve the right size to the visitors.  Almost 80% won\u2019t return to a slow website, and you don\u2019t want this to happen for your business. When optimizing your site for performance, try to include everyone and remember that responsive images are more accessible to users on mobile and slow connections. <\/p>\n\n\n\n

\"64%
64% of page weight is occupied by images – Source: hubspot.com<\/a>
<\/figcaption><\/figure>\n\n\n\n

Performance Fact #3 – The number of HTTP requests per page is mainly done by images. <\/strong><\/p>\n\n\n\n

A high-resolution image can generate a very large file size, which drastically affects performance because the browser will be busy for a long time downloading this resource. To avoid a slow browser execution time with many HTTP requests, you should try to serve responsive images, so mobile users don\u2019t have to display a 2400 px wide image.<\/p>\n\n\n\n

\"Requests
Requests by content type – Source: almanac HTTP archive<\/a>
<\/figcaption><\/figure>\n\n\n\n

Performance Fact #4 –<\/strong><\/strong> Serving responsive images means that you efficiently use your bandwidth. <\/strong> 

Lighthouse tells you to properly size images<\/a> and efficiently encode images<\/a> to save mobile data and bandwidth and improve the overall load time.<\/p>\n\n\n\n

\"Properly
Properly size images audit – Source: GTmetrix<\/a>
<\/figcaption><\/figure>\n\n\n\n

Images are often the main culprit for performance issues. That\u2019s why serving responsive images is crucial for a better cross-device experience. Properly sizing your images according to the user’s device boosts your visitors’ satisfaction as all major performance metrics are also improved. And last but not least, you\u2019ll also lower your bandwidth consumption.<\/p>\n\n\n\n

Now that you know why responsive images are important in web design let\u2019s see how to make them<\/em> responsive. In the next section, you will learn how to create responsive images on the web so that your images load quickly and<\/strong> look great on any device.<\/p>\n\n\n\n

How to Make Responsive Images on WordPress<\/h2>\n\n\n\n

The best way to make responsive images is to use the \u201csrc\u201d, \u201csrcset\u201d and \u201csize\u201d attributes. <\/p>\n\n\n\n

\"Responsive
Responsive images code snippet – Source: Imagify<\/a>
<\/figcaption><\/figure>\n\n\n\n

But before we explain how to make an image responsive, let\u2019s go over some basic knowledge about responsive design. 

\ud83d\udca1HTML has its syntax, elements, and attributes for responsive images that let you serve different images for different viewports, such as: <\/p>\n\n\n\n