Serve scaled images - Post ID 281960

User 2903050 Photo


Registered User
260 posts

Hi everyone, I have been looking at GTMetrix etc to try and get my site better optimised. Recently, I have been getting the error "Serve scaled images". I have spent all night trying to get it sorted. My other images do not have this issue that I am getting now (other images are displayed in fallback and css grid with varying sizes, percents and max- none). I have try to tweak images with their settings but any new images I add to the website I get these annoying messages.
Please help!?

User 244626 Photo


Registered User
811 posts

Phil Dias wrote:
Hi everyone, I have been looking at GTMetrix etc to try and get my site better optimised. Recently, I have been getting the error "Serve scaled images". I have spent all night trying to get it sorted. My other images do not have this issue that I am getting now (other images are displayed in fallback and css grid with varying sizes, percents and max- none). I have try to tweak images with their settings but any new images I add to the website I get these annoying messages.
Please help!?



Coffeecup introduced in RSD 1.5 the ability to add easily different sized dimensions of the same image for different breakpoints or media queries. This allows you to use a smaller dimension for mobile to download faster but a larger dimension for desktop.

If you only add one link to a picture below the lowest breakpoint it applies to all breakpoints and is considered the source and given the src attribute. If you were to add additional links to the same picture element at higher breakpoints then you create a source set of pictures. The addtional picture links are given the srcset attribute. When the browser loads the page, it will find the picture you have in the srcset group for the right media query or breakpoint you have set. This saves bandwidth and supposedly gives you points for having a faster and more responsive website page.

Thats about it in a nutshell.
Bootstrap 5 CSS Grid.
User 2903050 Photo


Registered User
260 posts

Thank you Twinstream, I understand that. What I do not understand is that when the same image which is getting the error message on the index page is not getting same serve scaled image error message on another page of my site. Both pages use the same image with the same dimensions and classes and change size responsively when the grids change or screen size increases?
Regards Phil
User 244626 Photo


Registered User
811 posts

I was just saying that on your index page you do not serve up "scaled images" or what I would interpret that to be. You only serve one size image for mobile and desktop.

If your image is 85kb for example and you use that for both mobile and desktop, then the mobile device is obviously going to "struggle" downloading the 85kb compared to a desktop computer on a high speed land line.




Bootstrap 5 CSS Grid.
User 122279 Photo


Senior Advisor
14,447 posts
Online Now

I would suggest that, for mobiles, before the smallest breakpoint, you make one, combined, image out of all those small images (if they are the ones being discussed here now). Make an image of what you see when they have changed from a row of 12 to 6. That one image doesn't have to be high-res (my opinion) because it is going to be very small. OK, it will be one image of maybe more KB than each of them, but it will be less in KB that all the images in sum. And it will just be one server request.

Ha en riktig god dag!
Inger, Norway

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


User 2903050 Photo


Registered User
260 posts

Sorry I am not expressing myself adequately. I understand what you are both saying. What I don't understand is that how can an identical image file placed on one page at the lowest breakpoint and change responsively chuck out no error of serve scaled image but placed on another page (same file) give me error codes. Am i missing something?
User 244626 Photo


Registered User
811 posts

Without knowing which image you are referring too and what the actual GTMetrix algorithm it is using to give the error message I can only guess.

It could be that the error message is triggered because you exceeded a total number of seconds allowed for a group of images to download quickly. Was the image toward the bottom of the loading queue ? Was it the largest image in size on the page ?

Using the srcset is a lot of extra work because for each image you have to change the size of the image and save it in a external photo editor. I have used 400w pixels, 800w pixels, and 1600w pixels for each picture. It does start to become complicated too....what about retina image display. You need a picture 2x the size for that.

One could even challenge the use of the picture tag. Most people now agree that the better way to serve images is by width not breakpoints or media query's. With grid now in the picture it complicates things further. I certainly do not want to be constantly editing photo sizes to react to my changes of the grid. I can actually make a grid pattern that changes within the media breakpoints too.....how do I serve a image size for that change ? The answer is to use width based photo serving and let the browser decide which photo size to use.

We asked for just a simple <img> tag but did not receive one. It would probably be useless unless they discontinued the use of the picture tag which would then free up the reserved srcset attribute needed for proper coding of the <img> tag. As far as I know, Coffeecup is the only software that uses this approach. But I can live with it because there are SO many other advanced features that other software do not do simply and cleanly like Coffeecup.
Bootstrap 5 CSS Grid.
User 379556 Photo


Registered User
1,533 posts

I get the impression from here, that this may be recommendation rather than an error in the traditional sense of the word. Is the following perhaps too simplistic an explanation?

Perhaps the recommendation
(a) is made on a page that is slower to load, because of the size or amount of other elements etc. on that page;
(b) is not made on a page that is pretty fast loading anyway.

The new images perhaps are further reducing the load speed, and so giving rise to the recommendation also regarding them.

Frank

PS I see once again a better answer has crept in while I was typing the above.
User 122279 Photo


Senior Advisor
14,447 posts
Online Now

I don't find the use of srcset to be too much work. OK, you have to make two or three different sizes of each image. I usually call them something like img-s.jpg, img-m.jpg and img-l.jpg and pop them into the SD3 resources.

Then on the page where I want them, I pop in a picture element, and at the smallest breakpoint I select pic-s.jpg and select a max width, then move the slider past the breakpoint and change the picture to pic-m.jpg and select a wider max width... and so on.
I think this will be of importance if you have large images. With those tiny ones I mentioned above, the combination to one image solution would be better, I think.
Ha en riktig god dag!
Inger, Norway

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


User 379556 Photo


Registered User
1,533 posts

Further to my previous post, I find that the program mentioned in the first post in this thread needs to be used as a guide or help in identifying possible snags, but not as a schoolmaster telling one that one is in error. A web page on which I tested it resulted in a suggestion to minify the HTML to save 59 bytes, and another suggestion that was said to be for something in IE 8.

Perhaps there isn't any need to change the pictures at all, although, of course, reducing their size will always help if it doesn't lead to a significant deterioration of quality.

Frank

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.