Still manually generating smaller images for different resolution devices? WebP Cloud Services has launched the Adaptive Resize feature

Anyone who has used WordPress knows that WordPress optimizes images for different resolution devices by processing uploaded images in the background, generating multiple images of different sizes. For example, on our WordPress demo site, we have an image like this:

The URL of the image when uploaded is: https://wordpress.webp.se/wp-content/uploads/2023/06/DSC7224.jpg, with a resolution of 3200px by 2133px and a file size of 4.4MB.

WordPress automatically converts it into several images in the background:

• https://wordpress.webp.se/wp-content/uploads/2023/06/DSC7224-1024x683.jpg
• https://wordpress.webp.se/wp-content/uploads/2023/06/DSC7224-150x150.jpg
• https://wordpress.webp.se/wp-content/uploads/2023/06/DSC7224-1536x1024.jpg
• https://wordpress.webp.se/wp-content/uploads/2023/06/DSC7224-2048x1365.jpg
• https://wordpress.webp.se/wp-content/uploads/2023/06/DSC7224-300x200.jpg
• https://wordpress.webp.se/wp-content/uploads/2023/06/DSC7224-768x512.jpg

You can see these files directly in the WordPress backend:

 ls -lh | grep 7224
-rw-r--r-- 1 www-data www-data 126K Jun 28  2023 DSC7224-1024x683.jpg
-rw-r--r-- 1 www-data www-data  22K Jun 28  2023 DSC7224-150x150.jpg
-rw-r--r-- 1 www-data www-data 224K Jun 28  2023 DSC7224-1536x1024.jpg
-rw-r--r-- 1 www-data www-data 363K Jun 28  2023 DSC7224-2048x1365.jpg
-rw-r--r-- 1 www-data www-data  31K Jun 28  2023 DSC7224-300x200.jpg
-rw-r--r-- 1 www-data www-data  86K Jun 28  2023 DSC7224-768x512.jpg
-rw-r--r-- 1 www-data www-data 4.3M Jun 28  2023 DSC7224.jpg
-rw-r--r-- 1 www-data www-data 556K Jun 28  2023 DSC7224-scaled.jpg

WordPress uses src-set and other methods to display different images for devices with different resolutions, like this:

<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="683"
        src="https://wordpress.webp.se/wp-content/uploads/2023/06/DSC6975-1024x683.jpg" alt="" class="wp-image-14"
        srcset="https://wordpress.webp.se/wp-content/uploads/2023/06/DSC6975-1024x683.jpg 1024w, https://wordpress.webp.se/wp-content/uploads/2023/06/DSC6975-300x200.jpg 300w, https://wordpress.webp.se/wp-content/uploads/2023/06/DSC6975-768x512.jpg 768w, https://wordpress.webp.se/wp-content/uploads/2023/06/DSC6975-1536x1024.jpg 1536w, https://wordpress.webp.se/wp-content/uploads/2023/06/DSC6975-2048x1365.jpg 2048w"
        sizes="(max-width: 1024px) 100vw, 1024px"></figure>

The benefits are clear: devices with different resolutions can use pre-processed images directly. For example, it’s unnecessary to show a 4.4MB original image to a mobile user, which would slow down loading and waste data.

However, there are downsides too. Users will have multiple sizes of images stored locally. For fully managed solutions like WordPress, this might be fine (although each image generates about 7 additional small files, which can cause 7 times more file I/O during migration). But for non-WordPress scenarios, manually resizing images, saving these different sizes, and adding CSS in HTML to render different images for different users is not an easy task.

Now, imagine a scenario where, like me, you are a “photography enthusiast” with a personal website showcasing your photos. For easy management, the original photos are stored on AWS S3/Cloudflare R2, with each album in a separate directory. Thumbnails on the website use parameters like ?width=300 from WebP Cloud to render.

How should the photos within each album be displayed? It’s clearly not practical to show users the original images directly, as photos taken with most cameras are typically over 4000x4000 pixels. Therefore, we need a convenient feature that can automatically resize images for different device sizes. Fortunately, we recently launched a new feature called Adaptive Resize that can achieve this.

In the Dashboard, each Proxy offers an Adaptive Resize feature. Users can currently configure the maximum resolution for two types of devices (desktop and mobile). The default values are 1600px for desktop and 800px for mobile.

After configuring and enabling this feature, we will determine whether the visitor is using a desktop or mobile device based on the User Agent. Any image on the website wider than the set value for the respective device environment will be automatically resized proportionally to the set width, further reducing the image size and speeding up rendering.

Of course, if you need images in other sizes, you can still use our Image Resize feature. By appending parameters like ?width=100 to the image URL, you can obtain images in different sizes. This parameter will take precedence over Adaptive Resize. However, if the specified size is larger than the Adaptive Resize setting, the Adaptive Resize size will be used.

For example, if an image is 4000x4000px and Adaptive Resize is set to 2000px for desktop, a request to http://path/to/image.jpg?width=3000 will still output an image of 2000x2000px.

As with all our new features, WebP Cloud believes that all users should have equal access. Therefore, whether you are a paid user or a free user, the Adaptive Resize feature is available for unlimited use without any additional cost. Feel free to try it out (and report any potential bugs 😇)!