The popularity of Responsive Images is increasing and it is something which none can ignore. However employing the same functionality in popular CMS like WordPress can be a challenging experience. The task can be a time consuming one even though it is possible for the users to write feature within the theme themselves. But things have changed dramatically ever since WordPress 4.4 has been introduced making it quite easier for developers and administrators for embedding the responsive image functionality in to their themes.

The major highlight includes the availability of Responsive Images plug-in within the WordPress core. This means users can now enjoy the presence of responsive image support which comes as a default feature within the WordPress. Let’s take a close look about how this feature actually works and how it can be used carefully so as to harness the potential of WordPress site.

Functioning of the Feature

All the content and images will be comprised of srcset and sizes attributes once you update in to WordPress 4.4. This is mainly to ensure the availability of every image size so as to maintain the actual requested image dimension. During instances in which the aspect ratio varies compared to the original requested image, then the custom crops will be left out of the srcset attribute. At the same time, a responsive image would be returned when an image is called through wp-get-attachment-image function.

Responsive images acts as a background feature in WordPress 4.4 because of its automatic functionality that occurs whenever an image is uploaded in WordPress through a media uploader. This automatic background process results in srcset and sizes attributes being displayed whenever an image appears in a page. This means that there are no visible interfaces in the new responsive images feature. None of the options such as the presence of forms for filling purposes or boxes for checking purposes and options for toggling purposes is available because of the lack of visible interfaces.

Theme developers will have to ensure that accurate Sizes Attribute are made available in the images by means of editing theme’s functions.php file. It is important to consider it because srcset and sizes attributes present in the image tag is what actually represents the responsive images in WordPress. The most difficult to predict is the sizes attribute even though WordPress performs well when it comes to including all available sizes within the srcset attribute. It is the duty of sizes attribute to explain the browser about how wide the image would be at each and every available viewport. However the results can differ depending up on styling available with the user’s theme, providing the reasonable default namely ‘sizes=” (max width: {{image-width}}) 100 vw, {{image-width}}”

With the sizes attribute, users can accomplish especially two things. Firstly, it ensures the availability of a valid sizes attribute in the image which has now become a prerequisite as far as the specifications are concerned. Secondly, it prevents the browser from providing an image source that is more compared to the original width that has been requested. However the benefit of the default sizes attribute become less whenever any CSS manipulates the size of the image at viewport widths that are entirely different.

Theme developers can adjust the sizes attribute corresponding to each image with the help of filter hooks for ensuring the delivery of perfect sizes attribute during every breakpoint. Therefore it is desirable to ensure that the theme does not rely on default sizes attribute when it comes to offering accurate responsive images support. The main reason is the fact that browsers are not allowed to modify or change the image source by the default sizes attribute during instances wherein the size of the viewport is smaller compared to the original requested image size. However if the image has been already altered with CSS at a breakpoint, then also the source cannot be changed.

If you are an individual having access to a WordPress Code Base or if you are a theme developer, then it is a greater necessity that you filter the images in the themes so as to deliver sizes attributes that are accurate. This should be the most important things to be done after the new version would be released.

Configuration of Responsive Images for your Theme

A number of new hooks are introduced along with the new functions that can be used for providing a level of responsive image support that are tailored to match your theme. The maximum width of the image that has to be included within the srcset attribute can be filtered by the theme developer through max_srcset_image_width hook. The srcset attributes of the image can be filtered by hooking in to wp_calculate_image_srcset while the sizes attribute can be customized by a theme developer so as to fit the image breakpoints in their theme by means of filtering wp_calculate_image_sizes.

The content images can be filtered with wp_calculate_image_sizes whereas post thumbnails/featured images can be filtered with wp_get_attachment_image_attributes function. The need for two different functions is required since the theme changes for the way in which featured images are displayed in different breakpoints and is entirely different compared to the way in which content images are being displayed under the same circumstances. Thus WordPress 4.4 offer theme developers enhanced opportunity to filter images in various ways and thereby being as specific as possible.

All this highlights the instant benefits users and theme developers will be able to achieve with responsive image support through WordPress 4.4 update. It also allows theme developers to include images that are clear and crisp irrespective of the viewport size and pixel density and thereby improving the performance of the website, as the web pages can avoid the additional time required for loading larger images. Even though it is an automatic procedure for users, theme developers are responsible in adjusting the image sizes attribute by spending time in functions.php file within the theme. Moreover, it has to be kept in mind that creating and merging of the Responsive Images plug-in is more of a team effort.

The post Importance of responsive images in WordPress Core appeared first on Janbask Digital Design Blog.