Stop wasting time and money!

Easily create your WordPress website or blog today.

Elementor is the easiest and most importantly, the fastest tool to create any type of WordPress website or blog. No technical knowledge is required and is perfect for beginners or professional users. You can do it yourself so do it!

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's entirely possible to design the feature into your theme yourself, doing so is a difficult and time-consuming undertaking.

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 responsive images feature will not have a visible UI. There are no options to switch, forms to fill in, 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:

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 developer of Themes or have access to a WordPress codebase, filter your theme's images to provide precision with the " 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.

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 image filters WordPress tutorial#

Updating to WordPress 4.4 means that users will immediately benefit from responsive image compatibility, which will help display crisp, clear images at every window size and pixel density. This will also result in a performance increase, 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.

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.

 

%d bloggers like this page: