Images - Google Insights/GTMetrix flagged

Support
#1

Although I am showing as A under 3 seconds for load speed on GTMetrix, Google Insights flags up. I use Lightroom to edit, ImageOptim to reduce and Ewww plugin. Annoyingly, this forum won’t let me copy and paste the warning from Insights as new users are only allowed to use 2 links in forum posts?

Homepage www.twoscotsabroad.com

Page Insights report:

Optimize images
Properly formatting and compressing images can save many bytes of data.
Optimize the following images to reduce their size by 223.7KiB (31% reduction).
Compressing ******…Peyto-Lake-Rockies-Two-Scots-Abroad_.jpg could save 77.5KiB (31% reduction).

Plus many more

—> there’s not advice on what the idea scaled size is? Where can I find this out?

Destinations page: Report same as above

Possible Optimizations
Optimize images
Properly formatting and compressing images can save many bytes of data.
Optimize the following images to reduce their size by 1MiB (62% reduction).
Compressing ******* kye-Haggis-Adventures-Skye-High-Tour.jpg could save 89.3KiB (32% reduction).
Plus many more

Blog Post: https://www.twoscotsabroad.com/west-island-way-things-to-do-in-bute/

I just added a sidebar (for adverts) from full width so it’s obviously not liking such a large uploaded image

Properly formatting and compressing images can save many bytes of data.
Optimize the following images to reduce their size by 264.7KiB (46% reduction).
Compressing *******/uploads/2017/07/TEST-WIW.jpg could save 164.5KiB (74% reduction).

and many more

GTMetrix also flags this

RECOMMENDATION GRADE TYPE PRIORITY
Serve scaled images
F (0)
IMAGES HIGH
What’s this mean?
The following images are resized in HTML or CSS. Serving scaled images could save 1.7MiB (77% reduction).

*************ploads/2017/05/Kames-Bay-West-Island-Way-Isle-of-Bute_-1024x768.jpg is resized in HTML or CSS from 1024x768 to 485x364. Serving a scaled image could save
then many more

----> recommended 485x356 does not fill the width of the text, can this prescribed width be adapted? I prefer larger images where possible. I have uploaded one 485x356 (first image after feature) as an example of difference in size. I accept that 1024 is massive, this was to fit the full width screen.

Please advise me on how best to make Page Insights happy and green.

Thanks
Gemma

#2

Hi there,

All those warnings are related to images and the fact that some images are served as for example 300 x 500 and it shows as 200 x 400. That is because the CSS made it smaller to fit within the container. We use max-width: 100% for all images to make them responsive.

But if you want to have very optimized images served as the GT Matrix suggests you need to serve properly sized images for each viewport. That is not supported in our theme but you can use plugins such as:

Such optimizations are outside of our support scale and you need to do it yourself or hire a developer regarding this.

Thank you for your understanding.

#3

Thanks for your reply. I don’t really understand much of the response, could you explain in laymen’s terms please.

I’ve been asking since the beginning what size my images should be but X staff (from old forum) tell me it differs for each website which I don’t really get. If Google Insights are telling me that my images are the wrong size they must be comparing to a correct size - how do I find out what size that is?

… you need to serve properly sized images for each viewport. That is not supported in our theme but you can use plugins such as… —> so no theme has specific image sizes? Does that mean every X customer has a negative report from Insights?

We use max-width: 100% for all images to make them responsive —> could you explain what you mean by this please. Could you discuss in relation to my homepage as an example please? twoscotsabroad.com

Thanks, I just can’t get my head around how such a forward thinking and flexible theme wouldn’t have any way to advise users on how to have correct image sizes. I don’t expect support to optimise for me, just need to know how to get back in the green for Google Insights and I think from your response you have suggested I use specific sizes for images, just what those sizes are I’m not sure how I find that out?

Best,
Gemma

#4

Hi There,

Please refer to this article.

https://xthemetips.com/size-matters-the-x-image-guide/730/

Hope it helps

#5

Excellent, thank you! Wish I had this from the beginning.

Best
Gemma

#6

Follow up.

I’ve deleted all images from one blog post to play about with options. I reduced the size of one image to 800px and then 600px yet Goolge Insights still says ‘could save 78KiB (29% reduction).’. The above article states that content size is around 936px wide, both of the above sizes are smaller than this?

Same goes for sidebar, my images are 250px wide and GI says could save 39.5KiB (72% reduction) but the article states that around 376px would be accepted? I reduced to 150 to test it and the image is tiny, it looks ridiculous.

Would my feature image by classified as ‘page’ so 1906-3840px according to article? Currently my feature images are around 1024 wide, GI doesn’t like this size (too big).

Thanks,
Gemma

#7

Quick follow up. I’ve posted a help callout in a Facebook group (not X) and already two members have said they were looking at X and this is putting them off. I don’t intend to put people off buying the theme. I just need support in improving image sizes. Please assist so I can go back and tell them the solution too.

#9

Hi There,

You can use a image 1020 570px

You can install a Chrome addon called Page Ruler, it will help you to measure the correct size.

Hope it helps

#10

The info say 910 though? My images are 1024 and they are too big according to GTMetrix and Insights?

#11

Hi there,

The problem with those tools is they analyze it for specific view/device, disregarding the responsive nature of a site.

In a side story, you could have a dedicated site for mobile (best example is m.facebook.com). It is not responsive, instead, it’s a separate site dedicated for mobile and all images are optimized, and so on.

Our theme is not like that, the theme is simply responsive which targets almost all devices/view.

Yes, you can follow their recommendation and optimize it over and over but until when? I noticed that it works like this, if your layout width is 300px, and your image displayed on that layout is 600px, that means you could resize your image equal to layout width (which is 300px) and save/optimize it about 50%. (just a sample, instead of explaining all the aspect of image optimization)

But what if 300px layout change since it’s responsive? It could expand or shrink, what if it’s expanded to 500px then your optimized 300px image will look blurry or small (if not stretched).

The reason X theme uses average size is to cover all devices size from retina displays down to average phone size in a responsive way while maintaining image quality across devices. Given that most smart phone now is 767px width (almost 800-900px) then 900px image is ideal too.

And the result could vary, the result you’ll get could be different from the article.

Let’s say your sidebar has 270px width, and you optimized your image to 270px, then the sidebar breaks to a single column when viewed in mobile, which then the sidebar expand to 767px. The 270px is a bit tiny and you have two option, center it (which is still tiny) or stretch it (too blurry, imagine 270px stretched to 767px).

In the end, it’s your decision depending on how you’ll serve your content to your visitors.

Thanks.

#12

Thank you, I do understand that and I think this is becoming overcomplicated.

All I really want to know is how do I find out what my px sizes are for (do I right click on the space, is there something in customise which tells me? etc)

Hero images which I have on each page (full width of site)
Smaller images such as the destination rectangles on the destination page
Content images (blog posts)
Sidebar images

In relation to your response this would be the biggest size that the reader is viewing in without it being too ridiculously big that it slows speed down.

Every SEO article says that unoptimised images or images that are too big slow your site down. I just want to know what image size I should be editing to in Lightroom.

Cheers
Gemma

#13

Hi there,

If you want a big full-width slider image to see how we cropped the image in Integrity 4 demo:

http://demo.theme.co/integrity-4/

It is 1356 X 1044. It will show that it can be smaller in the tool which you are using for optimization, but if you want to have a slider try to have an image around that size to make up for big screens.

Thank you.

#14

I’ve worked out how to use inspect properly.

Right click on page/post, inspect, top right hand corner arrow, hover over part you need to know size for.

Mines are:

‘Hero’ on page: 1422px long
Large image on page: 1024px

Sidebar: 301px

Feature image on post: 915.52px
Content image: 795.52px

Grids (like destination page): 281px (rectangles)

BUT I now need to work out which I double for retina display. I know that I do have to double the sidebar size, need to dig deeper about the other sizes.

Hope this helps others. The FB group was very helpful.

#15

Thanks for sharing! If you have existing issues about the sizes then I’ll be glad checking it :slight_smile:

1 Like
#16

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.