Images with multiples sources (srcset & sizes) are penalized in mobile version.

[Rubèn]

I have images with srcset & sizes attributes for responsive design and hdpi screens.

The mobile version of Pagespeed penalizes these images because they are loading bigger images than they should, which is exactly what I'm intending: deliver high resolution images to hdpi devices. I suppose that your mobile version emulates a hdpi mobile device.

Why are we penalized for this? Is there a Google recommended way to deal with this problem?

Thank you in advance.

[Rick Steinwand]

I have the same problem, but I'm only using <picture>. The slider at the top uses picture and reports the images could be 90% smaller: http://www.intercepteft.com (99% desktop, 93% mobile)

I assumed they hadn't integrated the picture element yet. It was just released for chrome and isn't yet integrated into other browsers yet. (Firefox is broken yet when using "type".)

There are no mobile browsers that use it yet that I'm aware of.

I suspect time will fix it. Early adopters always get penalized in one way or another and I knew that when I implemented it on at least 30 pages.

[Justin Avery]

I'm having a similar problem.

I've tested the page in Google Dev Tools and the correct image is being served at the right viewports, I've tested this by increasing the DPI setting as well with the right results.

When checking on the Insights tool the image that is set as the last  srcset  is being used as well as the smaller default    src  .

[Paul Kinlan]

I'll let the engineers reply directly as I have not worked on it in a while, but just to be clear the renderer used to assess mobileness is not Chrome, its a version of webkit, and as such does *not* have the picture element support yet and it does *not* support srcset yet either.

I created a demo here https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fjsbin.com%2Fyenup%3F1 if you see a kitten  that is narrower than it is high, then it is using the src attribute.

I'll ping the team.

Thanks,

P

[Rick Steinwand]

Cool!

Thanks.

[Carlos Lizaga Anadon]

Yup, this is probably the hardest thing to implement on mobile sites.

Google feedback would be appreciated.

Regards.

[Rick Steinwand]

I know it took me awhile. Didn't help that the picture element on Firefox was broken (except nightly builds now I'm told).

[t.uh...@zeroseven.de]

Any updates on this? Our site is being extremely penalized due to excessive use of srcset.

[Rick Steinwand]

... and besides all of us early adopters, who notices your "extreme" penalty? = )

The newer browsers (except IE, Firefox) support it. Isn't that what really matters? 

[t.uh...@zeroseven.de]

That's the most important thing, but certainly not all that matters.

Page speed affects page rank, for one thing. Also, potential clients might check the page's page speed.

[Jan Jaap Hakvoort]

Hello!

I am also experiencing a Google PageSpeed penalty for using srcset while the <picture> element is recognized. srcset is much smaller code so it would increase performance on websites with many images.

Op donderdag 8 januari 2015 10:02:12 UTC+1 schreef t.uh...@zeroseven.de:

[Rick Steinwand]

I'm using the picture element with 6 rotating banner images on my home page. I still get 93/100% for mobile and 99% for desktop. https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fwww.intercepteft.com&tab=mobile

I'd like to see my mobile score increase as much as anyone, but don't see the fuss.

[Jan Jaap Hakvoort]

It appears that the following <picture> code using picturefill is recognized by Google and all browsers:

<picture>
    <!--[if IE 9]><video style="display: none;"><![endif]-->
    <source  srcset="https://cdn.domain.nl/image-940x260.png" media="(min-width: 960px)">
    <source  srcset="https://cdn.domain.nl/image-700x194.png" media="(min-width: 768px)">
    <source  srcset="https://cdn.domain.nl/image-440x122.png" media="(min-width: 480px)">
    <source  srcset="https://cdn.domain.nl/image-280x77.png">
    <!--[if IE 9]></video><![endif]-->
    <img srcset="https://cdn.domain.nl/image-940x260.png" class="aligncenter size-full wp-image-2310 nolazy" alt="dermaroller 540">
    <noscript><img src="https://cdn.domain.nl/image-940x260.png" class="nolazy"></noscript>
</picture>

Example: https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fdev.dermarolling.nl%2F

The main banner size is 940x260, the visible banner in the Google PageSpeed Mobile preview is 280x77.



Op maandag 12 januari 2015 14:14:15 UTC+1 schreef Rick Steinwand:

[Rick Steinwand]

Interesting. I thought <img srcset> wasn't to be used with <picture>. (One or the other but not both.)

[Carlos Lizaga Anadon]

Amazing tip, thanks!

Regards.

[Михаил Перлов]

I wonder if anyone knows a solution. My pagespeed rank for mobile dropped from 50 to 0 after implementing picturefill though obviously it should only become better. In worst case scenario the same big image is used.

Seems to be a bug...

[Rick Steinwand]

Got a link? With 6 banner images I still get 93%.

What counts is what the browser sees.

[Mikhail Perlov]

Yeah, plenty. E.g. http://perlovs.com/2015/02/italiya-mini/

Regards,
Mikhail Perlov

Sent from mobile

On Feb 23, 2015 4:08 PM, "Rick Steinwand" <rickst...@gmail.com> wrote:

Got a link? With 6 banner images I still get 93%.

What counts is what the browser sees.

--
You received this message because you are subscribed to a topic in the Google Groups "pagespeed-insights-discuss" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/pagespeed-insights-discuss/-3w9jyBHNQY/unsubscribe.
To unsubscribe from this group and all its topics, send an email to pagespeed-insights-...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/pagespeed-insights-discuss/a86628a9-98d8-4a93-bc87-27ac083b705d%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Rick Steinwand]

I'm not convinced you've implemented srcset on your images properly. You should have a fall back image that gives you a much better score on desktop or mobile, depending on your choice of desktop first (which I use) or mobile-first.

You have lots of errors and I can't view your source due to our firewall at work. Are you using a javascript solution or standard <img> srcset?

http://www.onlinewebcheck.com/

[Mikhail Perlov]

I know that page is not w3c compliant. But before I've implemented srcset the mobile score was much higher. BTW desktop score is still more than 80.

I use WordPress as a backend and picturefill 2 with img notation.

Regards,
Mikhail Perlov

Sent from mobile

--

You received this message because you are subscribed to a topic in the Google Groups "pagespeed-insights-discuss" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/pagespeed-insights-discuss/-3w9jyBHNQY/unsubscribe.
To unsubscribe from this group and all its topics, send an email to pagespeed-insights-...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/pagespeed-insights-discuss/a26ef88c-3144-44d1-8a6a-00e887a4bbeb%40googlegroups.com.

[Carlos Lizaga Anadon]

Fallback is a must for srcset.

Regards.

[Mikhail Perlov]

Is it for <img> syntax? If I use fallbacks than the smallest size will be downloaded no matter what unless browser natively supports new spec. It only increases the size of the site for desktop version. What if I am ok with old browser or disabled js breaking the view?

Anyway I do not see what it has to do with page speed score. It clearly shows that the problem with mobile version is with image optimization. The results are equal for srcset version and normal img tag version in every aspect except the score itself. Same "room for compression" but 50 points of difference in score...

On Thu, 26 Feb 2015 at 13:56 Carlos Lizaga Anadon <carlos...@gmail.com> wrote:

Fallback is a must for srcset.

Regards.

--

You received this message because you are subscribed to a topic in the Google Groups "pagespeed-insights-discuss" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/pagespeed-insights-discuss/-3w9jyBHNQY/unsubscribe.
To unsubscribe from this group and all its topics, send an email to pagespeed-insights-...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/pagespeed-insights-discuss/c842e74e-2934-4dce-9a7d-973aa90b2341%40googlegroups.com.

[Rick Steinwand]

Make your failover image the large one. Your images have to validate for things to work properly.

The rotating banner images on my site use the picture element with large images for failover. http://www.intercepteft.com

[Alice Wonder]

//slightly off topic
In my project, code on my machine at least (not live yet), I'm using WebP with a quality of 90 for all resolutions except the fallback. Initially I tried 80 but too many images had distinct visual differences where it mattered.

The fallback is either png or jpg depending upon the source.

When I go production I may change that ditch WebP but I'm really hoping it gets some better browser support - if FireFox could be convinced to adopt it that would be good enough for me, as Chrome, Opera and Desktop Webkit GTK browsers already do.

Safari and IE - i am less worried about accommodating their users with different resolutions via the picture element, but FireFox is a must for me.

more on topic, the fallback I use is one that would work on a typical desktop machine with the browser fullscreen.

more off topic - That may be bad for iOS users if their browser doesn't support WebP but Apple / iOS has does nothing to support to open royalty free codecs so I only take them into consideration as far as making sure something works, Apple's refusal to support WebM etc. is going to cost me a lot of money in patent licenses, so I don't like them very much.

[Mikhail Perlov]

Rick, Carlos, thanks for you suggestions. But I still do not completely agree. I am facing either a bug or bad reporting on PageSpeed Insights.

What is the purpose of srcset if failover image is the largest one? Until browsers start natively support this it will basically mean that the largest image will always be downloaded. Which makes srcset useless at all.

Remember that I am using <img srcset="...> notation. Failover means setting smth. like <img src=".." srcset="...">. Picturefill will replace the src of course but it is going to be too late. It won't optimize network usage for mobile devices.

I will check if lack of failover penalizes my pagespeed score. If so I would be really glad if google pointed it out explicitly.

Regards,

Mikhail Perlov

On 27 February 2015 at 00:02, Rick Steinwand <rickst...@gmail.com> wrote:

Make your failover image the large one. Your images have to validate for things to work properly.

The rotating banner images on my site use the picture element with large images for failover. http://www.intercepteft.com

--

You received this message because you are subscribed to a topic in the Google Groups "pagespeed-insights-discuss" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/pagespeed-insights-discuss/-3w9jyBHNQY/unsubscribe.
To unsubscribe from this group and all its topics, send an email to pagespeed-insights-...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/pagespeed-insights-discuss/be54afa3-dc19-4ef7-9dce-179f99c4f45a%40googlegroups.com.

[Yohann Paris]

I have the same problem, I get a huge penalty because my fallback images are the one used on the analyse.

Google tells me to compress my medium size image, when he could use any of the others.

<img alt="text" sizes="100vw"
     src="image_medium.jpg"
     srcset="image_enormous.jpg 4000w,
             image_huge.jpg 3000w,
             image_large.jpg 2000w,
             image_medium.jpg 1500w,
             image_small.jpg 1000w,
             image_tiny.jpg 500w">

[Carl Turechek]

The one example "appearing" to be working isn't valid html, & it doesn't even display the image in the preview when using picturefill 3.0 and pagespeed insights?!?!

[Carl Turechek]

Fact O the matter is that Pagespeed Insights uses the actual img, this works for me without the picture fill stuff:))

<picture>
<!--[if IE 9]><video style="display: none;"><![endif]-->

<source media="(max-width: 544px)" srcset="/userfiles/1/image/stoves-fireplaces/osburn-xs.jpg">
<source media="(max-width: 768px)" srcset="/userfiles/1/image/stoves-fireplaces/osburn-sm.jpg">
<source srcset="/userfiles/1/image/stoves-fireplaces/osburn.jpg"><!--[if IE 9]></video><![endif]-->
<img alt="Osburn Wood Burning Stove" src="/userfiles/1/image/stoves-fireplaces/osburn-xs.jpg" style="" class="img-fluid center-block ">
</picture>