Responsive Images in WordPress in 2020: What You Need to Know

WordPress is a popular content management system that enables you to design sites without using code or with minimal usage of code. You can do that by installing themes that come with ready-made designs, and download plugins that add features to your site.

Most WordPress themes come with a built-in responsive design, which adapts your site to the screen size and device specifications of your users. However, sometimes themes become buggy, images are not displayed properly, and then you need to troubleshoot responsive default settings.

Additionally, if you change the default theme, you might encounter issues with responsive images. Understanding how responsive images work in WordPress can help you understand the source of the issue and apply the correct fix.

What Are Responsive Images?

Responsive images are images that are served to a user according to their screen size and device specifications. For example, a high-resolution image sent to a large HD monitor or a low-resolution image sent to a small, older cell phone. The purpose of responsive images is to maximize the efficiency of bandwidth use without compromising user experience.

You can add responsive images by uploading multiple sizes or formats of an image. Then, when a user visits your site, you can use a combination of HTML, CSS, and JavaScript to serve the image that fits the user’s screen parameters.

Often, creating the various sizes and formats you need requires a bit of manual work. This is particularly true if you want to change the cropping of images to better suit specific screen sizes. Once your various sizes are saved, you need to host all of your images on your webserver to be served as needed.

Alternatively, you can use tools, such as content delivery networks (CDNs) or digital asset management solutions (DAMs) to dynamically resize and serve images. This can be a simpler option if you have many images or multiple sites. Using these methods requires importing the appropriate library to your page scripts and making an API call for the image that is needed.

Why You Should Use Responsive Images

There are many reasons you should use responsive images on your sites for your own and your users’ benefit. In addition to the below reasons, keep in mind that Google gives search preference to sites that have responsive images.

Efficient bandwidth use—responsive images ensure that only the image that is most useful for a user is served and downloaded. This eliminates wasted bandwidth since you are not sending out files that are larger than what a user can actually use. It also makes your site more user-friendly, particularly to mobile users who often have limited data.
Faster load time—the less data a user client has to download, the faster your page load time is. This is vital since many users are unwilling to wait more than a few seconds for a page to load and will leave a site if loading takes too long.
Improved user experience—when you add images to your site, you are doing so to give the user a specific experience. Responsive images ensure that users can view images in the way you intend, without warping or misplacement. This gives the user a more pleasant experience and makes them more likely to remain on your site.

How Do Responsive Images Work in WordPress?

As of WordPress (WP) 4.4, adding images to your Media Library automatically sets you up for responsive images. When you upload an image, WP automatically creates five copies of your image at various sizes. These sizes include:

Full—the original upload size
Large—max width or height of 1024px
Medium large—max width or height of 768px
Medium—max width or height of 300px
Thumbnail—max width or height of 150px

You can also modify these sizes or add additional sizes manually.

To control how these sizes are used, WP includes the img tag attributes srcset and sizes. These attributes provide information to the browser about what sizes are available and when those sizes should be selected.

In the srcset attribute, you assign an image width. The browser then checks the width and selects the largest image that matches the browser width or lower. In the size attribute, you specify the size the image should scale to. This enables you to select the most efficient image and ensure it displays in proportion to the screen.

An example of how this looks in your image tag can be seen below:

<img src="image/sample.jpeg"
    srcset="image/sample-tiny.jpeg 150w,
            image/sample-small.jpeg 300w,
            image/sample-medium.jpeg 600w,
            image/sample.jpeg 1000w"
    sizes="(min-width: 75rem) 60rem,
           (min-width: 50rem) 40rem,
           (min-width: 40rem) calc(100vw - 10rem),
           100vw"
    alt="A sample image">

Things You Should Know About Responsive Images

When working with responsive images, there are a few aspects you should keep in mind. These considerations can help you ensure that your images are displaying as you expect and that you’re users are getting the best possible experience.

“sizes” is optional with a catch

When defining your sizes attribute, you need to understand that it specifies the required image as well as the rendered width of the images. This means you have to take care to match the widths between images. If image widths differ between srcs you may end up with an image that is warped when it’s rendered. Additionally, if you use srcset without including sizes, you should be aware that client browsers will use a default width of 100vw.

Image rendering varies by browser

Typically, browsers render the image size that best matches the viewport size. However, different browsers use different methods for how an image is selected so your user experience may be inconsistent. For example, some browsers will prioritize cached versions of images regardless of whether the size matches.

This variability and lack of granular control mean you should not rely on srcset for design decisions. You should instead consider, for example, serving different images or images with different ratios to better suit specific devices. To accomplish this, you can use the <picture> element.

“srcset” is not a default

If you are using a theme developed by someone else, keep in mind that srcset is not implemented by default. Many themes, especially older ones do not include this or the sizes attributes. If you want to use these attributes, you need to either customize the theme you’re using or find a different theme that implements the attributes.

If you aren’t sure whether your theme is using srcset and it doesn’t say in the theme documentation you can check manually. The easiest way to do this is to pull up one of your pages with an image on your desktop or laptop. Depending on your browser and OS, you should be able to right-click the image and choose Inspect. This enables you to look at the <img> element and see if srcset is implemented.

Conclusion

Responsive images are crucial for creating a positive user experience. When images are responsive, users are able to view files on any type of device without experiencing issues. You can also use responsive images to increase load times and efficiently use bandwidth.

Most WordPress themes come with a set of responsive images configurations, but you can often make changes. Before making any changes to the default settings, you should ensure that you properly understand the consequences. To avoid data loss, be sure to backup your site in advance, and modify a child theme rather than the original file.

About Leah Fainchtein Buenavida

I'm a technology writer with 15 years of experience, covering areas ranging from fintech and digital marketing to cybersecurity and coding practices. LinkedIn: https://ift.tt/3jSFFuE