Images Not Optimizing

@ericgiauque

I haven’t checked all images but they seem to be optimized.

What google is referring to is the dimensions.

Here’s an example (The numbers are arbitrary)

Some of the photo file are 900px * 900px but the are only used as 250px * 250px in the desktop version and as 750px * 750px in tablets.

Google doesn’t want you to put big image dimensions if you don’t intend to display them.

Fix?

Reduce image dimensions as needed.

• This reply was modified 8 years, 3 months ago by j09.

Thanks for these insights.

Several questions:

– Are you saying that the image file size that Google sees is 900px * 900px but my WP theme is squeezing the actual visible size to something smaller?

– How did you see what those visible dimension sizes actually are?

– I’m surprised that the desktop version would be smaller than the tablet version. How can that be?

– I know how to squeeze the sizes down in Photoshop, but how do I know what google wants? What is considered “Optimal”? I want big, visible, images on my site, that are crisply visible. How do I get that without sacrificing page speed – or is that a pipe dream?

Thanks so much again!

@ericgiauque

You’re welcome.

Are you saying that the image file size that Google sees is 900px * 900px but my WP theme is squeezing the actual visible size to something smaller?

Correct, that is what is happening and I could not have said it any better. The image file that gets download by browsers is 900 * 900.

How did you see what those visible dimension sizes actually are?

Using google chrome, you can right click on any element and then select “inspect”

This will open up a nice tool that I recommend you start using as it make life easy when you troubleshoot an issue on a page.

You can read more about that Here

I’m surprised that the desktop version would be smaller than the tablet version. How can that be?

On the desktop view, you have three photos sharing one line – The images are next to each other and so they share the width of the screen.

Each individual image size is still the same at 900*900 but it gets modified by CSS.

On tablets / phones your theme is set up to only show one image/item per line which leads to the images being bigger.

They are not really bigger. They are just “less small” if that makes any sense.

I know how to squeeze the sizes down in Photoshop, but how do I know what google wants? What is considered “Optimal”? I want big, visible, images on my site, that are crisply visible. How do I get that without sacrificing page speed – or is that a pipe dream?

There is no ideal size and google is not telling you not to use big photos.

Google is simply saying.

There is some performance gain to be had if you reduce the size of these photos because you don’t seem to be using them.

If your page actually displayed 900*900 images, you wouldn’t be seeing those warnings in PageSpeed

Can’t thank you enough for your time to help me with this!

No problem, and good luck with google!

I would like to add that Google Pagespeed Insights can be pointless in some cases because you can`t just apply the same rules for all websites.

What matters is how fast the website loads and what user experience is all about.

There are other ways to optimize images, like running them through an online service like TinyPNG. Or better, here`s a guide related to image optimization. It might come in handy!

With these in mind, I checked out your website and you`re currently dealing with some optimization issues, if I may say so.

Firstly, you`re using RevolutionSlider for the slider which is throwing a series of errors in the console(F12 in browser->Console). They are generated by some fonts you probably set to captions so check the captions.

Secondly, you can further optimize SliderRevolution by playing with the slider`s Global Settings https://prntscr.com/dr6gh6
You might also want to check out the Performance and SEO optimization settings panel https://prntscr.com/dr6h0v

Lastly, if we’re speaking from an SEO point of view, the homepage needs some heavy work. Your images contain the titles too, which is bad because google can’t read them. Instead, separate titles from images and add titles using H2 or H3 heading under each image. You should also add more text about the service on homepage(ex: What Is NoodleDoodle).

You could also lazyload the homepage images for an even faster initial page load.

Thanks!

• This reply was modified 8 years, 2 months ago by deliciousthemes.