WordPress-页面见解-优化移动图像

Question

I'm getting a "Compressing and resizing ..." notification at google page insights. I'm well aware of compressing in photoshop, the thing is mobile images seems to need more compressing than the ones on desktop. 1. is there a way to display different images for mobile? or is there another way to solve this? 2. I've tried smush it plugin, doesn't seem to work

Answer 1

There's a new plugin called ricg-responsive-images (which has the backing of the Responsive Images Group – they've been working on getting support for responsive images into browsers).

It automatically adds a srcset attribute whenever you insert an image in a post, based on the sizes of the image thumbnails you already have (you can customize them in Settings > Media.)

Srcset means that the browser will choose the correct image according to the height, width or pixel resolution of the screen, (hopefully) download the smallest suitable file and without requiring any javascript.

The plugin also has commands to generate srcset (or entire image tags) for any image in the media library, which you can use within a theme.

Anecdotally, I've found even if you do manually compress an image you'll usually still get a warning from Google and similar sites that it can be compressed a bit more. Use your judgement as to when it's safe to ignore this.