Image sizing for mobile version

Hello Vlad & Co,

I just checked thinkingoftravel.com in Google Pagespeed and got 90/100 when analyzing desktop version.

When checking mobile pages, I only get 28/100 and the biggest complaint is that images are not optimized. I have tried to make images as small as possible. Could it be that Google is penalizing me for having a 1920 px wide header and only showing a little of it on a mobile device?

Are there any tricks or workarounds to show a different set of images for a mobile device?

Many thanks in advance!

/Steve

Hello,

There are various plugins that let you add multiple sizes for in-article images and then show them based on screen size.

You should also run your images through http://www.smushit.com/ for some loseless compression. There is also a plugin available for smushit which can compress all your images - so you should use that instead of the website.

Regarding the header image - there could be a way to set an alternative size for smaller screens, but it would be appear you’re using a plugin that lets you set different header images?

And I just checked your website on an iPhone. It loads pretty fast for me.

The majority of images are Smushed already with savings about 1 - 3% in average.

No, I am not using a plugin to alternate header images, only the functionality that is in Customiser.

Okay, wait a bit please. I’m going to update the theme and add an option to specify a different header image for smaller screens. Will also make some changes to images resizing.

Though it will never be perfect as far as the pagespeed tool is concerned because it’s asking you to do lossy compression, which I’m guessing you don’t want to do and I wouldn’t do it either.

Thanks Vlad, I appreciate that you are doing this.

This way we will understand if Google Pagespeed is penalizing us for providing a wider image than necessary. I also think it loads reasonably fast on my Iphone (with the 1920 x 550 px image).

Alright, I’ve pushed the update.

I added a smaller image size for index/archive images. You might need to regenerate your thumbnails.
Also, in Customize > Header image you’ll see two new options for header image for < 1024px and < 320px. Use them both, obviously with smaller images.
Then run the speed tool again.

Let me know if there are any issues please.

Thanks Vlad! Will the updated theme come as an update in Wordpress or will I have to download it somewhere? If download, where do I go?

It should be in your dashboard. Same as with the themes from wp.org.

It showed up in my dashboard after a while.

Ratings with Google Pagespeed improved to 52/100 which is a step in the right direction, because is almost double performance compared to before.

The 320px image shows in Googles tool, but I have not been able to test it since I dont have a device with 320 px resolution. I guess Google is reliable in this case.

Looks good on Ipad Mini (first version w Retina) but unfortunately the logo is not centered over the image properly when viewed with an Iphone 6. Please find screendump here: http://www.thinkingoftravel.com/iphone6_alizee.png

I followed these tips: https://athemes.com/forums/topic/changing-header/ and CSS now looks like this:

a[href*=“alizee_slider”],
.widget_categories .cat-item-247 {
display: none;
}

@media only screen and (min-width: 1025px) {
.has-banner .main-navigation {
position: fixed;
width: 100%;
}
}

.has-banner .site-branding {
padding: 200px 0 120px;
}

.has-banner .main-navigation li {
padding: 10px;
}

Change your custom code to this and it should put the logo in its place:


a[href*=”alizee_slider”],
.widget_categories .cat-item-247 {
display: none;
}

@media only screen and (min-width: 1025px) {
.has-banner .main-navigation {
position: fixed;
width: 100%;
}
.has-banner .site-branding {
padding: 200px 0 120px;
}
}

.has-banner .main-navigation li {
padding: 10px;
}

If it doesn’t we’ll adjust the padding a bit.

Thanks a lot, it worked like a charm! Once again, I am very grateful that you looked into this.

Sorry Vlad, I changed the dimensions of the header image to 1024 x 320 and now the logo hangs under the header image when checking with Iphone 6. Computer and Ipad still looks good.

I have tried fiddlling around with paddings in the CSS but I clearly do not understand what I am doing.

Are you able to help? Many thanks in advance.

Best,

Steve

BTW, is there any shading on the smaller images? Looks like it…

Yeap. there is not enough room for it as your image is too small in height.
Use this please and change the 100px value to a smaller one:


@media only screen and (max-width: 1024px) {
	.has_1024 .site-branding {
		padding: 100px 0 120px;
	}
}
.header-image-320,
.header-image-1024 {
	opacity: 1;
}

The code above also removes the opacity if you don’t want it at all, or you can change 1 to 0.[something] if you want to alter it.

Hello Vlad,

I have run additional Pagespeed tests and it looks a lot better now. Google PS notices the smaller images and seems happy.

I am not where I want to be in terms of speed, but that is due to cheap hosting NOT the theme.

Once again thanks for providing a solution very quickly!

I am sorry to bring this up again but I think Google is changing their parameters. I am now ranking 9/100 in Google Pagespeed Insights for mobile devices: https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fwww.thinkingoftravel.com%2F&tab=mobile

The biggest complaint from Google PI is about non-optmized images. They are not superoptimized but not bad either. The 1024x420 is 32KB and 320×160 is 4KB.

Could there be a code error which makes Google look at the wrong image? Loading speeds are OK when I surf the site myself.

Your thoughts on this are welcome!

Best Regards,

Steve

I think it’s because you started using Photon (or whatever is called) from Jetpack. You weren’t using it before as far as I can remember?

I think I did, but I will be happy to turn Photon off and make additional tests. Photon should not be the culprit because it is a CDN for images. I will get back when I have tested with Photon off.

Slightly better with Photon disabled but Google Pagespeed Insights is still complaining about unoptimized images.