Uncode 2.4.0 introduces a new option for responsive images named Dynamic Srcset. The Dynamic Srcset creates responsive cropped images and serves only the appropriate version depending on the visitor's viewport and device based on the 'srcset' attribute. Different visitors have different devices (laptops, mobile phones, tablets), each with its screen resolution. The Dynamic Srcset considers the device's resolution, updates the 'srcset' value, and then serves the right-sized image for each situation.

The Dynamic Srcset assigns first a transparent placeholder to the 'srcset' attribute, calculates the size of the container, and updates the 'sizes' attribute with the correct dimension. As soon as this calculation is ready, the 'srcset' attribute is replaced with the original list of images that WordPress generates so that the browser can pick the most appropriate responsive image.

Native browser support: Dynamic Srcset takes advantage of the modern browser's native ability to choose the most appropriate image using the 'srcset' attribute. This attribute allows defining a list of different image resources and size information so that the browser can pick the most appropriate image based on the actual device's resolution. The new system is developed without the use of Ajax calls, as previously done by Adaptive Images.

Custom Breakpoints: As for the Adaptive Images, it is possible to define how many and which breakpoints to set through the "Image Sizes Range" option. Each breakpoint corresponds to creating a new 'srcset' value and, therefore, a new responsive image size; having many breakpoints involves increasing responsive thumbnails on the server. A good compromise can be to use the default "720,1032", or increase them to "210,250,360,480,720,945,1032,1350,1500".

Crops and Thumbnail Size: Also, with the Dynamic Srcset method, it is possible to use the numerous crop options within the Uncode modules (example 1:1, 2:3, 3:4, 9:16). All themes have a small set of available crops (thumbnail size). During the creation of a design, designers are then bound to use only these sizes or use the native upload ratio; this is a limiting process for which designers must prepare the images with the right crop before uploading them into their WordPress installation. On Uncode, this process is automated since the Dynamic Srcset system creates on-demand all the responsive versions depending on the crop chosen inside the module.

Srcset on container: WordPress uses the 'srcset' attribute taking into account the size of the browser and not the actual size of the container in which a set of images is used. Uncode solves this problem by updating the 'srcset' attribute in real-time, calculating each container's correct width, reaching an incredible level of perfection.

WordPress native and plugins: The Dynamic Srcset system creates and returns images according to native WordPress standards, albeit through a set of fully configurable options that isn't present on any other theme. This means that new versions of responsive images will be found, handled, and processed by external plugins, such as ShortPixel, to optimize final files.

Lazy Loading: Another great advantage is that thanks to Dynamic Srcset, you can take advantage of the native Lazy Loading of WordPress. Lazy Loading allows your website to only load images when a user scrolls down to the specific image. So if you have a very long page with many images, the images below the fold will be loaded only when the user scrolls down to that position. This means faster loading times.

How it works

The Dynamic Srcset can be activated in the Theme Options > Performances tab. To activate this option, it is first necessary to deactivate the Adaptive Images and delete the Adaptive Images that have already been created using the "Delete all AI Images" button as prompted by a dedicated notification popup, screenshot .

Settings

Image Quality: This option adjusts the image's compression quality. 70% is a value that, according to our observations, represents an excellent compromise between image quality and optimization.

Image Sizes Range: This option defines the different breakpoints that Uncode will use to create responsive image versions; each breakpoint corresponds to the creation of a new value in the attribute 'srcset' that will be available for the browser.

Background Mobile Size: Unlike standard images embedded in a page via the "src" attribute, backgrounds do not yet have native cross-browser support (something similar to the 'srcset' attribute). With this option, you can define an alternative size to be used on mobile devices.

Synced Animations: This option makes sure that possible animations are triggered only when the image itself is loaded. This option synchronizes the start of animations with the actual loading of the images.

Notes on image creation and Frontend Editor

Dynamic Srcset images are created when you first load a page and not when you work with Frontend Editor, so please visit a page after completing it to create all responsive versions of the images used. Suppose you experience a waiting time when you visit a page for the first time. In that case, this is caused by your server that is creating all necessary crops (for example, if you have inserted 5 breakpoints and you have 20 images, the server will have to create 100 new responsive thumbnail images). It takes no more than a few seconds, and only the first time a new page is visited.

Remember also that if you have a caching plugin, you will have to clear the cache.

How to optimize image before and after

If you are interested in more information on how to optimize images before uploading to your site or how to optimize responsive thumbnails created by WordPress and Uncode, please visit this article:

• How to optimize images