Safari loads biggest available size

  • Hi,

    first of all great plugin! Thanks for your efforts!

    I’m having trouble to get this plugin working on Safari (Mac OS and iOS latest versions). The browser displays the correct size, but the biggest available size (the original uploaded file pic.jpg) will be downloaded also (as seen in the timeline). The cache is clear. Chrome, FF are working perfectly.

    Any help is appreciated. Many thanks in advance!

    <img width=”1036″ height=”435″ src=”pic-692×291.jpg” sizes=”(max-width: 1036px) 100vw, 1036px” srcset class=”attachment-hero wp-post-image” data-pfsrcset=”pic-395×166.jpg 395w, pic-692×291.jpg 692w, pic-1036×435.jpg 1036w, pic.jpg 1036w” style>

    https://www.ads-software.com/plugins/ricg-responsive-images/

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Author tevko

    (@tevko)

    Hey, if you’re lazy loading, the srcset and sizes attributes need to be lazy loaded. So your code should look like this –

    <img width="1036" height="435" src="pic-692x291.jpg" data-sizes="(max-width: 1036px) 100vw, 1036px" class="attachment-hero wp-post-image" data-pfsrcset="pic-395x166.jpg 395w, pic-692x291.jpg 692w, pic-1036x435.jpg 1036w, pic.jpg 1036w" />

    Thread Starter passij

    (@passij)

    Actually I do not lazy load. I am wondering on the empty srcset and style tag.

    Thanks!

    Thread Starter passij

    (@passij)

    I’ve figured out the same problem at the official picturefill demo sites.

    Possible solution: As Safari doesn’t fully support the srcset Attribute yet, it falls back to src. So Safari always downloads the “fallback” version (in this case the full resolution image) and the appropriate image.

    Any feedback is welcome!

    Also I suggest to omit the fallback src attribute, as described by scott jehl https://www.filamentgroup.com/lab/to-picturefill.html

    Thread Starter passij

    (@passij)

    So i manually deleted the src attribute (as described in the article) for testing purposes: works in safari! Only the appropriate image will be loaded.

    Is there a chance for integrating this in the plugin? Because manually changing the output is not really an option. For sure it needs additional testing.

    I think the issue has something to do with a bug in safari: https://github.com/scottjehl/picturefill/issues/338

    Plugin Contributor Joe McGill

    (@joemcgill)

    Hi passij,

    Thanks for the feedback on this. I think you’ve correctly identified one of the tradeoffs that comes with using a polyfill like picturefill for this functionality. On one hand, we could remove the src attribute and create temporarily invalid markup or we have to penalize some users with double downloads. The Guardian website seems to be using both strategies on their site, but I’m not sure why the distinction.

    We’ve got it on our radar screen but there are a few edge cases we would need to be aware of. I’ve created an issue for this in GitHub and I think we’ll continue this conversation over there if you don’t mind: https://github.com/ResponsiveImagesCG/wp-tevko-responsive-images/issues/78

    Thanks,
    Joe

    Thread Starter passij

    (@passij)

    Thanks for your feedback! I’ll watch the conversation on Github.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Safari loads biggest available size’ is closed to new replies.