Skip to Main Content

How responsive images are managed by WordPress

Divi: the easiest WordPress theme to use

Divi: The best WordPress theme of all time!

With over 901.000 downloads, Divi is the most popular WordPress theme in the world. It is complete, easy to use and comes with more than 62 free templates. [Recommended]

While the growing adoption of responsive images cannot be ignored, it can be very difficult to employ the functionality under the constraints of a large CMS like WordPress. While it is entirely possible to design the feature in your theme yourself, doing so is a difficult endeavor and it takes time.

Fortunately, with the launch of WordPress 4.4, theme and plugin developers will have an opportunity to use responsive images in their products. Since the start of this release, the “Responsive Images RICG” plugin has been merged added to the WordPress core, which means responsive image support is now as an internal WordPress default feature. Let's take a look at how it works, and how you can use it to get the best out of your WordPress site.

responsive-image-trac-wordpress

How Responsive Images Work

As soon as you upgrade to WordPress 4.4, all of your content and images will have the 'srcset' and ' sizes Which are filtered to ensure that every available image size exists, while maintaining the size of the original requested image. It is important to note that custom resizes will be ignored from the " srcset »If the aspect ratio differs from the requested original image. In addition, by calling up an image via the function " wp-get-attachment image It will return a responsive image as well.

The Responsive Images Is a feature in the background, which means that everything happens automatically every time a user uploads an image to WordPress through the media upload interface. When an image appears on a page, it will have the attribute " srcset "And" sizes As a result of this background process.

This means that the new functionality of responsive images will not have a visible user interface. There are no toggle options, fillable forms, or checkboxes. That being said, theme developers should edit their " functions.php For their images to have a precision with the attribute " sizes ". Indeed, when we talk about responsive images in WordPress, we are talking specifically about the attributes " srcset "And" sizes Which are found on the tag of the image.

While WordPress does an exceptional job inserting all available sizes into the attribute " srcset ", The" sizes "attribute is a bit more difficult to predict. Indeed, the attribute " sizes Is responsible for telling the browser how the image according to the available dimensions of the window. Since the information will be different depending on the style of the user's theme, the best we can do is provide a reasonable default as follows:

Easily create your website with Elementor

Elementor allows you to easily create any website design with a professional look. Stop paying expensive for what you can do yourself. [Free]

sizes="(max-width: {{image-width}}) 100vw, {{image-width}}"

This default attribute " sizes Does two things. First, it makes sure that a valid attribute " sizes Exists on the image, which recently became a mandatory requirement according to the specification. Second, it ensures that the browser does not provide an image source that is larger than the original requested width. In case of CSS manipulation the size of the image will be different depending on the width of the windows, on the other hand the default value " sizes Will become less useful.

Since the default attribute " sizes "Will only help with images that are not altered by CSS, filter brackets will be available to allow theme developers to set the" attribute " sizes "Of each image, ensuring that a perfect" sizes Is delivered to each stopping point.

It's important to note here that, if possible, your theme should not rely on the default value of the " sizes"To provide accurate information on responsive image support." Indeed, the default attribute " sizes »Does not allow the browser to change the image source when the window is smaller than the original size of the requested image. It will also not be able to change the source if the image is edited with CSS at a breakpoint, when the image maybe larger than the original size requested.

If you are a theme developer or have access to a WordPress codebase, filter the images in your theme to provide precision with the attribute " sizes Is one of the most important things you can do after the new version is coming soon. The following is an example of a hook in the " wp_calculate_image_sizes Which you can develop to fit your theme.

Are you looking for the best WordPress themes and plugins?

Download the best plugins and WordPress themes on Envato and easily create your website. Already more than 49.720.000 downloads. [EXCLUSIVE]

function adjust_image_sizes_attr( $sizes, $size ) {
   $sizes = '(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px';
   return $sizes;
}
add_filter( 'wp_calculate_image_sizes', 'adjust_image_sizes_attr', 10 , 2 );

In this example, the checkmark will apply to all content including featured images and thumbnails. Additional logic can be added to ensure that different types of images have different values.

code-source-wp-image-responsive

New functions have been added for the attribute " srcset "And" sizes Can be added to an image that has been added to WordPress through the Media Manager, in addition to the images added to display the content. Function " wp_get_attachment_image_sizes Will return a default attribute " sizes Which can be modified by a filter of your theme in the file " functions.php ". Function wp_get_attachment_image_srcset will return an attribute srcset »Which will contain all the available sizes of the requested image. Documentation and examples of how to use these new functions can be found reference directory of developers.

Responsive Images Configuration for your theme

With the new features come several new brackets that can be used to provide a new level of support for responsive images, which best fits your theme. The hook " max_srcset_image_width "Will allow the theme developer to filter the maximum width of the image to include in the" srcset ". The hook " wp_calculate_image_srcset »Will filter the attributes« srcset »Images, while the hook (filter)« wp_calculate_image_sizes "Will allow the theme developer to customize the" sizes To better match the image breakpoints in their theme.

If you are looking for an example of how best to filter the attribute " sizes Of an image, the new twentysixteen theme will be a perfect example. In the functions.php file of this theme, the last two functions filter the attribute " sizes To respond to the different image breakpoints within the theme.

responsive filters image WordPress tutorial #

Updating to WordPress 4.4 means that users will immediately benefit from responsive image compatibility, which will favor the display of crisp, clear images at every window size and pixel density. This will also result in an increase in performance, since pages will no longer have to load large, heavy images for a long time. Although this is an automatic process for users, theme developers will need to adjust their image sizes for their themes.

Easily create your Online Store

Download free WooCommerce, the best e-commerce plugins to sell your physical and digital products on WordPress. [Recommended]

That's all for this tutorial, I hope it will help you better understand the importance and concept of responsive images on WordPress. Feel free to share this tutorial with your friends on your favorite social networks.

 

This article features 0 comments

Leave a comment

Your email address will not be published. Required fields are marked with *

This site uses Akismet to reduce unwanted. Learn more about how your comments data is used.

Back To Top
11 shares
Share6
tweet1
Save4