Performance problem: Images are resized in HTML or CSS

[Markus Schwingruber]

I ran the GTmetrix peformance test on my Dicot theme page and there are the following performance problems (just a few examples):

---

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

• http://yoga-kundalini.net/testwp/wp-content/uploads/2016/01/Sunnehuesli_Bild-600×533.jpg is resized in HTML or CSS from 600×533 to 282×251. Serving a scaled image could save 112.5KiB (77% reduction).
• http://yoga-kundalini.net/testwp/wp-content/uploads/2016/02/ShaktiDance3_Bild-600×533.jpg is resized in HTML or CSS from 600×533 to 600×263. Serving a scaled image could save 61.8KiB (50% reduction).
• http://yoga-kundalini.net/testwp/wp-content/uploads/2016/02/Rueckbildungsyoga2_Bild-600×533.jpg is resized in HTML or CSS from 600×533 to 600×263. Serving a scaled image could save 35.8KiB (50% reduction).

---

I originally uploaded all pictures in the format of 798×533 px. It seems that they are not converted in the right format if they are used in different places. I tought that this conversion is done automatically but it seems that the pictures are converted into 600×533 independent of the place they are used. How can I avoid the above shown scaling in HTML or CSS?

Thanks and best regards,
Markus

[admin]

Hi Markus,

This practice is normal in Responsive Layout and Retina Ready themes.
To support Retina devices, it is required to set the image nearly the twice of dimension. AND, due to responsive layout, this warning will still be there at different devices.

Please feel free to ask additional questions.
Thanks

[Markus Schwingruber]

Hi Admin,

Thanks for your quick reply. But this time I do not agree with your answer. I am sure there will be a severe problem in the ranking of Google if the “must have” recommendations of their page speed analysis regarding image optimization are ignored (and these are the ones I have in my original post above). After reading several articles on the web regarding this issue I find on of the most helpful article this one:
https://fruition.net/blog/page-speed-vs-high-res-images/
It says in the section “Best Practices for Images on Your Website”:
“Make the low-resolution version of your graphic available by default. While HiDPI displays are becoming more widely available, the technology has not yet been adopted by many computer and mobile device manufacturers. Serving high-resolution images by default would slow page speed unnecessarily for most users who are not using devices with retina displays. For the time being, using media queries to determine visitors’ screen resolution and serving them the appropriate image seems to be the best solution.”

Is there a way how you could implement this in Dicot?

Many thanks and best regards,
Markus

PS: Beside this issue a love the Dicot-Theme a lot. It’s awesome! Thanks!

[admin]

Hi Markus,
Thanks for your detailed reply.

For the further research, i have just forward this thread to our development team.
I will update you after getting their response.

Thanks

[Markus Schwingruber]

Hello
I was wondering if the development team could already have a look at this and if not by when I could expect an answer.
Thanks a lot and best regards,
Markus

[admin]

Hi Markus,

We have discussed on this point and there is different school of thought on this.
Rescaling images is not a big issue on page speed if done with the combination of other strategies like usage of CDN, Site Cache etc.

However, if you want to get rid of scaled images, You can change the image sizes in the theme’s function file.
After changing the image dimensions in the theme’s functions file, you can use the Regenerate Thumbnails plugin and this will help you to generate images of exact size.

Thanks

[Markus Schwingruber]

Hello DeginOrbital-Team

Thanks a lot for discussing my questions, I really appreciate it. Still I am not quite happy with your answer, I am afraid. There might be a missunderstanding: I do not worry so much about page speed in millisecs or secs but about the PageSpeed score of Google. You can run this test at https://developers.google.com/speed/pagespeed/insights/. And this score affects the page ranking in Google’s search engine heavily. I have attached an image of my PageSpeed Score from gtmetrix.com. You can see there that the main problem resulting in a below average score is «not serving scaled images».
After reading quite a lot about this issue I am sure that serving double resolution images on non-retina devices and adjusting their size client-side is not a good way to go regarding serach engine optimization (it will result in bad ranking). I think a far better way is to detect retina-ready devices on the server and serve the retina-ready image (double size) to that device. And all non-retina devices should be served the smaller, lighter non-retina image (normal size).

Reducing the file size in the theme’s function file as you have suggested would do the trick regarding the above problem but my website would then look bad on retina displays. So this is not really a solution.

I wonder why you would object to the above outlined approach. May I ask you to reconsider your decision?

Thanks a lot and warm regards,
Markus

[admin]

Hi Markus,
Thanks a lot for your detailed reply.

search engine optimization (it will result in bad ranking).

If you are worry about SEO, than ONLY this point will not affect SEO. We know the number of websites having number one position against different keywords on Google but serving retina images. SEO is a very broad field and complex topic. Following two URLs will help you a little about search engine ranking factors,

https://moz.com/search-ranking-factors
http://www.searchmetrics.com/knowledge-base/ranking-factors/

Scaled images will relate to Page Speed only which is one ranking factor. But, Page Speed can be improved by the combination of several other factors.
WordPress has introduced the Responsive Images support in its latest release and it is enabled by default. We are working on it to serve right images without affecting the quality (As we have observed blurred images on Retina devices).

Please feel free to ask additional questions.
Thanks

[alexal986]

I also have the same problem. And I tried a number of things. I am now using the W3 Super Cache Plugin, I optimized the photos with SmushIt, i enabled compression from my hosting. And still the problem with the images won’t go away.
Please tell me what I should do.
I am not an expert (I’ve just started building my website), so please explain it to me as if you would explain it to a child.
Also, what are the best dimensions and resolution a quality photo should have in the post. My blog is about food, therefore high quality photos are necessary.
Thanks

[Author]

Posts