Hello!

I would expect my question/request to be common and I find it weird that I can't find anything about it, neither on the community or google in general.

I am trying to optimize the loading speed of a website, but I am failing as I am getting the well known recommendation to "Serve scaled images"(at GtMetrix). I am aware that in other cases I would upload the image using the appropriate size and everything would be fine.

In K2's case I don't even understand why this is an issue since K2 resizes the images the first time you pick them. It's not actually resized through html or css as it would be in a wysiwyg editor. Is this a false positive? Or does it really impact the website as it would with other images?
And if it is slowing the website down is there something I can do about it?

p.s. I have already enabled cache, gzip etc.

Thanks in advance!

Hi,

K2 creates five different scaled images of the image you upload. However, only one of them is served on your site ( depending on your settings ) .

The responsive templates are just using CSS to resize the served image to fit the user's screen. In order to serve scaled images ( different image size according to the user's screen ) you need to write custom code. This is something that can be done using javascript or the new srcset attribute: css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/ .

Hi Lefteri,

I didn't even know the existence of srcset attribute, so thanks about that! As for the rest of your suggestions I am attaching a screenshot and a link to the website so you can see exactly what I am talking about ( I should have done that in the first place).

1. www.venticatimes.com/

2. imgur.com/r5F7whf

As you will see the template uses multiple versions of the images even on the desktop version, so I guess that responsiveness is not the big issue. The issue is that by default the design uses almost all the possible image size variations K2 has. That's why I asked if there is a way to get rid of the Gtmetrix suggestion.

Correct me if I am wrong.

Thanks once again for your response!

The suggestion says what i wrote. It is telling you to serve a smaller image since you are using a big image and you are resizing it using CSS. The basic thing you need to do is to ensure that you have set the image sizes correctly in K2.

For example if you have a module that is displaying a small image ( let's say 300 pixels ) you need to set it to use the image size that is closer to that dimension.

Damn I'm stupid. It never occurred to me that this is how the module handles the images and not k2 itself.

Thanks a lot!

You are welcome.