[Resolved] Image sizes, featured, thumbs and retina

[nordicsouth]

Hi I read this good support post about image sizes in WordPress. https://generatepress.com/forums/topic/recommended-wordpress-image-sizes/

I would like to know, it says “WP uses srcset so if it can use a smaller image then the one you selected it will use that instead. This doesn’t apply with background images like the ones used in Header Elements”.

1.
I have read some people say it is not necessary to have all these image thumbnail sizes filling up your web hotel space, that you should set maybe all thumb sizes to zero so they wount be made by WP. But now I guess that is a very bad approach, because then WP will have to show the BIG image file also to small mobile screens = bad/slow. Am I right?

2.
Header elements are typically the biggest images, right? But WP doesn´t create or doesn´t swap those image sizes on smaller screens? Does Generatepress provide a solution to that or should/must one add some CSS or PHP to serve smaller screens.

Or is it maybe a good thing, because smaller screens now often have the biggest screen resolutions and because of the big image it will look good, like a retina image, without having to add an extra retina image??

Image sizes gets harder and harder to understand…

[David]

Hi there,

1. Better that srcset is available and not needed then the other way or yes you could have large images being loaded when they are not necessary. And that is bad for page speed. I have never come across the need to ‘remove’ the thumbnails. Maybe those users have thousands of images to manage.

2. Header Element images are loaded as backgrounds using CSS, so although their are some measures that can be taken to swap them for various screen sizes it generally isn’t worth the hassle. Just use good compression, i work with a max 2400 x 1600px size and this is compressed to around 150kb – 200kb.

[nordicsouth]

Thanks, that helped clear my mind a bit.
And thanks for the extra image size example for header Element.
/Lena

[David]

This is handy:

https://www.w3schools.com/browsers/browsers_display.asp

You can see the most popular screen sizes are still the 1366px laptop screens. So always worth designing based upon your audience requirements.:)

[Author]

Posts