Serve scaled images - Post ID 281976

User 244626 Photo


Registered User
811 posts

If I disable cache and set download to 4G in the Network Setting and then hit F5 in Chrome Inspector for the index.html page it takes 10.21 seconds to load everything. Very useful tool to pinpoint area hogs.....
Bootstrap 5 CSS Grid.
User 2903050 Photo


Registered User
260 posts

What do you make of this? I duplicated the index page and called it /test.html
I run the gtmetrix and get no serve scaled images?
I am sorry I am being ocd but I need to understand why this is happening?
Regards
User 244626 Photo


Registered User
811 posts

Might be a cache problem with GTmetrix or your browser ?
Bootstrap 5 CSS Grid.
User 379556 Photo


Registered User
1,535 posts

I tried both https://phildias.com/ and https://phildias.com/test.html with each showing in GTmetrix "The following images are resized in HTML or CSS. Serving scaled images could save 610.9KiB (80% reduction)."

This seems to confirm Twinstream's suggestion.

Frank
User 2903050 Photo


Registered User
260 posts

FINALLY!!!! I have worked it out. I was using a grid layout to position the 9 images with the centre image taking up 4 spaces and the rest of the images around 1 space each. That what was actually making the images not serve scaled. Irritating but glad I now know the reason. I wonder if there is another way to do it, maybe images inside containers that change size through the grid?

Thank you all, I know i have been going round in cirlces and lots have offered great help.
Regards,
User 122279 Photo


Senior Advisor
14,450 posts
Online Now

Good that you were able to sort it! :)
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com



Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.