Is there a way to fix the “Serve images that are appropriately-sized to save cellular data and improve load time” gtmetrix issue? I use Imagify to convert images to webP and create several different sized thumbnails and i need to add code to serve them appropriately on mobile devices. See the response I received from Imagify recently:
“Your theme loads larger image sizes and resizes the appearance of those images through HTML and/or CSS attributes. This results in the browser downloading a larger image file than the dimensions actually applied displaying the image.
A solution would be for the theme to provide a selection of different image sizes for the browser to choose from, or (if that’s not possible, for example for CSS background images), to serve the image in a smaller size that would fit its actual presentation.
This type of issue is not related to Imagify; it should be addressed by the theme provider.”
The theme already uses the standard WordPress function for responsive image functionality when displaying the images (for example, the post's featured image). It means that the image is then a viewport-based image and the browser will request the image size that best fits the layout for its particular viewport.
Please see this screenshot for where the "srcset" attribute located: https://share.getcloudapp.com/kpuD9xYn . There already is a list of different image sizes for web browsers to choose from.
But it also entirely depends on the browser what version of the image to be selected to display on the page. You can find more information about that here:
Hello Paul,
Is there a way to fix the “Serve images that are appropriately-sized to save cellular data and improve load time” gtmetrix issue? I use Imagify to convert images to webP and create several different sized thumbnails and i need to add code to serve them appropriately on mobile devices.
See the response I received from Imagify recently:
“Your theme loads larger image sizes and resizes the appearance of those images through HTML and/or CSS attributes. This results in the browser downloading a larger image file than the dimensions actually applied displaying the image.
A solution would be for the theme to provide a selection of different image sizes for the browser to choose from, or (if that’s not possible, for example for CSS background images), to serve the image in a smaller size that would fit its actual presentation.
This type of issue is not related to Imagify; it should be addressed by the theme provider.”
Thanks,
Jade
Hello Jade,
The theme already uses the standard WordPress function for responsive image functionality when displaying the images (for example, the post's featured image). It means that the image is then a viewport-based image and the browser will request the image size that best fits the layout for its particular viewport.
Please see this screenshot for where the "srcset" attribute located: https://share.getcloudapp.com/kpuD9xYn . There already is a list of different image sizes for web browsers to choose from.
But it also entirely depends on the browser what version of the image to be selected to display on the page. You can find more information about that here:
Sorry, but I am afraid we cannot do much about it or cannot control the behavior of the browser to deal with the "srcset" attribute here.
Regards,
Paul
Ok, thanks for that info.