Multiple images for multiple screen sizes - a problem?

[superclown2]

I've produced a web site that shows different images depending upon the device they are viewed on; one for widescreen desktop, one for tablet and one for mobile. Theoretically I could produce as many as I wanted for every conceivable device size. The benefit to the viewer is that, since the only relevant one is shown, it loads quickly and well within the capabilities of the device and the likely connection speed. Those on a large screen with (usually) a pretty fast broadband connection see an attractive image designed for that large screen, those on mobile phones see a simpler but clearer image, especially designed for their small viewing area.

Problem is, will Google recognise this? They like sites to load quickly, but will they see large image files in there and assume a much slower loading speed than is actually the case? Am I shooting myself in the foot by trying to be too clever?

[Robert Charlton]

superclown2 - Here's an article that's been recommended to me by various sources, about what are called "responsive images". The article states your problem, of images that are too large, and I believe to a degree solves it.

Responsive Images in Practice
by Eric Portis November 04, 2014
http://alistapart.com/article/responsive-images-in-practice [alistapart.com]

I'm not sure precisely how you're handling some of the problems. Here's what the article says...

...After three years of debate, a few new pieces of markup have emerged to solve the responsive images problem:

srcset
sizes
picture
and our old friend source (borrowed from audio and video)

These new elements and attributes allow us to mark up multiple, alternate sources, and serve each client the source that suits it best.

I know your question is about how Google will respond to large images. My guess is that Google measures load time, rather than looks at image size... and the article suggests that performance is improved....

...we’ll see firsthand the dramatic performance gains that the new features enable.

I've yet to try this yet myself, though, so if you do try it, please let us know. I think, btw, that the spec may be evolving as we speak... there are other articles on the topic, but I haven't read them all.

[Leosghost]

Just one caveat ..before starting down the route suggested by Eric Portis ( nice link Robert, Eric is always worth a read ) ..check your logs to see what browsers your users are using to see what pages..and then take a visit to "can I use" [caniuse.com...] just to make sure that any "solution" is going to work for what your audience actually uses to look at your site..

Wouldn't want to cut your throat, by being on the bleeding edge..

[superclown2]

My guess is that Google measures load time, rather than looks at image size...

My problem is: the load time will vary according to the type of device it's loading onto, and whether or not Google's system is sophisticated enough to work out which image to load for which device.
It works great in real life, delivering exactly the right image on a wide range of different apertures with zero time lag. If I could only be confident that Google's analysis system is as sophisticated as an iphone .....

[not2easy]

If you want to see it as Google "sees" it and check that they are evaluating the image versions in your intended context, you can use "Fetch as Google" in the "Search Console" (WMT) and select 'Desktop' using 'Fetch and Render' and then again using 'Smartphone' and see whether they are using the images as you intended. You can do that looking at the live headers or examining your access logs for the details and also get a report if there are any issues with your setup as examined by their bots.

[Dymero]

Adding to Robert and Leoghost's posts, caniuse indicates that the new srcset and related attributes don't work on IE 11 and below. And given that MS has summarily tossed IE in favor of Edge, it probably never will. That's a problem for people on Windows 8.1 and below.

For the Wordpress folks, there are some extensions that make this feature work very well, and it's getting put into the next major release.