Images issue and speed

Hello,
When I test for speed for my website I get this:

The following images are resized in HTML or CSS. Serving scaled images could save 345.8KiB (80% reduction).

I thought the images are with srcset so they resize depending on screen size, but they are resized by css which is not ok, as it slows the site down.

Please offer me a solution

Hello,

Could you please send us your website link and specify which image is mentioned in your speed report so we can check it?

Thank you

https://ham-bebe.ro/

The following images are resized in HTML or CSS. Serving scaled images could save 345.8KiB (80% reduction).

https://ham-bebe.ro/wp-content/uploads/2015/08/nisip-kinetic-ieftin-jucarii11-430×490.jpg is resized in HTML or CSS from 430×490 to 190×217. Serving a scaled image could save 24.6KiB (80% reduction).
https://ham-bebe.ro/wp-content/uploads/2015/06/cub-educativ-si-antepremergator-lemn-busy-town6-430×490.jpg is resized in HTML or CSS from 430×490 to 190×217. Serving a scaled image could save 24.3KiB (80% reduction).
https://ham-bebe.ro/wp-content/uploads/2013/03/tabla-magnetica-cu-puzzle-lemn-bebelusi1-430×490.jpg is resized in HTML or CSS from 430×490 to 190×217. Serving a scaled image could save 24.2KiB (80% reduction).
https://ham-bebe.ro/wp-content/uploads/2017/04/jucarii-plus-plante-vs-zombi-430×490.jpg is resized in HTML or CSS from 430×490 to 190×217. Serving a scaled image could save 22.7KiB (80% reduction).
https://ham-bebe.ro/wp-content/uploads/2017/12/jucarii-senzoriale-430×323.jpg is resized in HTML or CSS from 430×323 to 200×150. Serving a scaled image could save 22.5KiB (78% reduction).
https://ham-bebe.ro/wp-content/uploads/2015/11/patrula-catelusilor-jucarii-plus3-430×490.jpg is resized in HTML or CSS from 430×490 to 190×217. Serving a scaled image could save 20.7KiB (80% reduction).
https://ham-bebe.ro/wp-content/uploads/2016/02/olita-portabila-pentru-copii-ieftina1-430×490.jpg is resized in HTML or CSS from 430×490 to 190×217. Serving a scaled image could save 19.1KiB (80% reduction).
https://ham-bebe.ro/wp-content/uploads/2015/05/telefon-de-jucarie-smartphone-talking-tom-3d-1-430×490.jpg is resized in HTML or CSS from 430×490 to 190×217. Serving a scaled image could save 18.7KiB (80% reduction).
https://ham-bebe.ro/wp-content/uploads/2011/05/nisip-kinetic-nou-430×490.jpg is resized in HTML or CSS from 430×490 to 190×217. Serving a scaled image could save 17.8KiB (80% reduction).
https://ham-bebe.ro/wp-content/uploads/2015/04/tabla-magnetica-educativa-5-in-1-mare1-430×490.jpg is resized in HTML or CSS from 430×490 to 190×217. Serving a scaled image could save 17.5KiB (80% reduction).
https://ham-bebe.ro/wp-content/uploads/2015/10/jucarie-dragon-de-plus-de-calarit-bebe4-430×490.jpg is resized in HTML or CSS from 430×490 to 190×217. Serving a scaled image could save 16.4KiB (80% reduction).
https://ham-bebe.ro/wp-content/uploads/2015/11/nisip-kinetic-colorat-rezerva-1-kg-space-sand4-430×490.jpg is resized in HTML or CSS from 430×490 to 190×217. Serving a scaled image could save 15.8KiB (80% reduction).
https://ham-bebe.ro/wp-content/uploads/2015/04/covor-de-joaca-puzzle-copii3-430×490.jpg is resized in HTML or CSS from 430×490 to 190×217. Serving a scaled image could save 15.2KiB (80% reduction).
https://ham-bebe.ro/wp-content/uploads/2016/11/jucarie-montessori-motricitate-labirint-cu-bile-forme1-360×360.jpg is resized in HTML or CSS from 360×360 to 140×140. Serving a scaled image could save 14.7KiB (84% reduction).
https://ham-bebe.ro/wp-content/uploads/2016/03/dragon-din-plus-de-calarit-fotoliu-copii1-430×490.jpg is resized in HTML or CSS from 430×490 to 190×217. Serving a scaled image could save 13.9KiB (80% reduction).
https://ham-bebe.ro/wp-content/uploads/2015/04/puzzle-len-relief-incastru-3d-animalute-430×490.jpg is resized in HTML or CSS from 430×490 to 190×217. Serving a scaled image could save 12.8KiB (80% reduction).
https://ham-bebe.ro/wp-content/uploads/2015/04/mascota-plus-jucarie-plus-mickey-mouse-mare-gigant-1-metru1-430×490.jpeg is resized in HTML or CSS from 430×490 to 190×217. Serving a scaled image could save 11.8KiB (80% reduction).
https://ham-bebe.ro/wp-content/uploads/2015/04/set-plusica-lambie-dragonel1-430×490.jpg is resized in HTML or CSS from 430×490 to 190×217. Serving a scaled image could save 11.6KiB (80% reduction).
https://ham-bebe.ro/wp-content/uploads/2017/01/figurine-eroi-in-pijama-set-66-430×490.jpg is resized in HTML or CSS from 430×490 to 190×217. Serving a scaled image could save 10.8KiB (80% reduction).
https://ham-bebe.ro/wp-content/uploads/2017/10/sortator-forme-geometrice-cuita-boita-basic-dejco1-360×360.jpg is resized in HTML or CSS from 360×360 to 140×140. Serving a scaled image could save 10.6KiB (84% reduction).

As we can see, your images size now 430×490. But you use a grid with 6 products per row and those images are resized to 190×217. So you just need to change this size in WooCommerce -> Settings -> Products -> Display to 190×217 to prevent this CSS resize.

It is not ok because when you view the website from a tablet for example, in portrait mode, the grid changes to 3 columns, and the image size gets bigger and if the resolution is smaller it looks bad.

On tablet devices, your products have width of 226×258 so you can use this size instead. It is a bit bigger but much smaller the original 430 width.

Yes, i have to regenerate all thumbnails for this purpose..

Why don’t you use srcset in the theme?
I had srcset in my previous theme and it was working better

Srcset doesn’t solve this problem. This feature comes with WordPress by default and our theme doesn’t change or overrides this function. We use default WP API functions for displaying images but we don’t know why it doesn’t work on your website. You can check that it presents on our demo. Could you please provide us your admin access so we can check why srcset are disabled for you?

Can it be because I have sucuri firewall and cdn cache?
I can;t provide admin access

We don’t know if it may happen because of these plugins. You can turn them off and check. Anyway, your website performance is quite good and even if you load a bit larger images your website loading very fast. Even if you will resize your images, your website will not work faster, you will see it only in your performance tool test.

Ok, thanks for support

We are always glad to help you.

Regards

[Author]

Posts