[Support request] Image size – full width slider – background – portfolio gallery ?

[Fabian]

Hi Tom,

I want my site images to work on all devices (fully responsive) and load fast too.

What image size for the full width slider (Elementor), background image or full width gallery image (woo commerce) should I choose? (is 2000px width too big?) What is a good compromise so it looks good on big screens (4k,5k) but also woks good on mobile? (width? x hight?)

How big/small should the file size be after compression? Whats the maximum size that still loads fast on mobile? (I am using tinypgn now, with jpg-mini I get up to 1MB file size still with 2000px width) What do you recommend for image compression/ optimisation?

—
What else can you recommend for fast loading time? Is LazyLoad good? Are there better alternatives ?

[Leo]

Hi there,

This depends on lots of variables.

Unfortunately background images aren’t responsive by nature.

Couple things you can try to work around this:
– Add position: center center; if the focus of the background image is in the middle.
– Switch out the background images specifically for mobile.

This is a good one to compress images: http://optimizilla.com/

There’s not a specific size that will load fast on all mobiles as they all have different capabilities.

Optimizing tips here: https://generatepress.com/fastest-wordpress-theme/

[Fabian]

Thank you Leo!

What image size do you recommend thats a good compromise (I am build ing my fist page and don’t have the experience) is 2000px for full size image too much? (Laptops have that resolution)

Is 1500px width better ?

I have allot of images (photography page) – it needs to load fast on mobile too – whats the maximum file size that you recommend for full size image? 300kb? 5000kb?

I Optimizilla.com a better lossy compression than tinypng? (in your opinion)

Thank you !!!

[Leo]

If the container is full width then I’d use background image of at least 1920px as that covers HD/1080p resolution.

If you have lots of images I’d keep them as small as possible without losing the quality to attract users 🙂

Not sure about TinyPNG as Tom’s has always suggested Optimizilla. Easiest way is to try them out. I’m sure there are more than one good image compression site out there.

You’re very welcome 🙂

[Author]

Posts