Performance problem: Images are resized in HTML or CSS

WordPress Themes, Plugins and HTML Templates Forums Dicot WordPress Theme Performance problem: Images are resized in HTML or CSS

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #660
    Markus Schwingruber
    Participant

    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).



    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

    #1681
    admin
    Participant

    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

    #1682
    Markus Schwingruber
    Participant

    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!

    #1683
    admin
    Participant

    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

    #1684
    Markus Schwingruber
    Participant

    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

    #1685
    admin
    Participant

    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

    #1686
    Markus Schwingruber
    Participant

    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

    #1687
    admin
    Participant

    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

    #1688
    alexal986
    Participant

    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

Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.