Responsive images have become an indispensable part of new-age websites. Regardless of the fact that what device you are using, you can access and see the image if it is responsive. If you are creating a WordPress website, it becomes imperative for you to work with responsive images for your site. However, it was difficult until the release of WordPress 4.4.
Earlier, there was no core functionality for responsive images. Even, developers had to purchase a plugin to use responsive images for further modifications. But after the release of WordPress 4.4, you will be able to work with responsive images in WordPress- all thanks to the availability of two new attributes (sizes and srcset).
In this blog post, we will cover the core concept of working with responsive images in your WordPress site. So, without a further adieu let’s get started:
Basics: Understanding the sizes and srcset attributes
Before we get into the complexities, you must know the basic purpose of these attributes and how it can support responsive images. The sizes and srcset attributes extend the source and image elements to let you offer a list of available image sources and their sizes. Here, the browsers do a pretty amazing work. They use this information to fetch the best image source for you.
Since the attributes are taken from the HTML specification, make sure you make the most of out it, without affecting the quality of images.
How responsive images work in WordPress?
The entire concept of this blog post revolves around the core operation of srcset and size attributes in WordPress website.
To begin this process, you will need to ensure that you are using the WordPress version 4.4. After updating your site, you will see the two attributes for your site’s images: sizes and srcset. And the best part is that the entire process operates in the background.
When an image uploads on the page, it carries the sizes and srcset attributes, which allows the web browsers to know what version of an image should be used/ displayed when a visitor access your site/web page. In simple words, when you upload an image, both the attributes are applied to those images without any complexity.
Since there is no user interface for this, you don’t need to mention any further details while uploading your images to the WordPress site. Once your process has been done, your users will see a fully responsive image on their device (be it a smartphone or a laptop) – a good way to improve UX of a site. This not only improves the user experience but also boosts the overall performance of a site.
How the attributes can help the theme developers?
As a theme developer, you always wish to make some tweaks to the existing image attributes to let your theme support responsive images. With the availability of srcset and sizes attributes, you can easily modify the functions.php file of your themes to let them make a use of responsive images.
Apart from this, you will find many other functions and new hooks that can help you achieve this task quickly and efficiently. You can read the documentation of WordPress 4.4 core to grasp the entire concept from the root. Some of the key functions including:
1. Image Filtering
Image filtering is an incredible feature that can help theme developers to filter their images with the sole aim to fetch in a sizes attribute that is accurate. Well, you can achieve this using a hook for the WordPress function “wp_calculate_image_sizes.
With the use of this function, you can make changes to your images that apply multiple sizes attribute to assorted images. Besides this, you will be able to apply both the attributes to those images that have uploaded via WordPress media uploader. You can easily embed the attributes to images directly in your posts.
2. Hooks for your responsive images and custom theme
There are also some of the key hooks that can provide robust support for responsive images into your theme. Let’s have a glance at some of the hooks:
- Max_srcset_image_width:It allows theme developers to use the filter on the basis of the maximum width of images that are in the srcset attribute.
- Wp_calculate_image_sizes: A theme developer can use it to tweak the sizes attribute to let it work with the breakpoints available in the existing theme.
- Wp_calculate_image_srcset: This hook enables developers to filter the images based on the srcset attributes.
How to disable responsive images in WordPress?
Though responsive images have become an integral part of the core WordPress site, there might be some issues related to this that can affect the way your themes and plugins work together.
In such scenarios, you can disable your responsive images on the temporary basis. For that, you will need to edit the functions.php file of your theme or make a use of a third party plugin.
Conclusion
WordPress gives you the compatibility to use responsive images for your posts and pages the way you want. You use the srcset and sizes attributes and advanced features to customize, filter and modify the responsive images at ease.
Read also:
