Docs: Data URI for transparent gif has type

[craigmdennis]

In the docs you recommend using a transparent data uri gif:

If you only want to have an image show up at certain sizes, and not show up at others, you will need to use a transparent placeholder gif
data:image/gifbase64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==

There needs to be a ; between gif and base64 as follows:
data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==

Please consider updating the docs.

[robsonsobral]

I just updated a code I'm working on and I didn't like the results.

I have a list of articles. Featured articles should have images 100% wide on mobile. So: width: 100%;. Now, the transparent gifs are being rendered with 1:1 aspect ratio.

How was this transparent gif idea tested? With or without the ;?

I can, sure, fix this using classes, but should a "non-existent" image version be rendered, even if it is just 1×1 pixel? Isn't this a hack for something like srcset="none"?

[quoo]

If you've set a 100% width on the images, then yes, I'd expect them to scale while maintaining their aspect ratio.

The 1x1 pixel is a bit of a hack. That being said, I don't think the intent of srcset or picture is to switch between displaying images and not displaying them, but the 1x1 pixel image does achieve that.

[robsonsobral]

Thanks, @quoo . Sadly we can't point one specific CSS selector to these images.

Thank you for your attention.

[aFarkas]

@robsonsobral
see also: ResponsiveImagesCG/picture-element#243

[mike-engel]

@robsonsobral since this is a spec issue (with a discussion at the link afarkas posted), I'm going to close this issue out for now. If you'd like this to stay open, please let us know.

Another option for you would be to use attribute selectors with CSS, allowing you to target the images without adding a class selector. Something like img[src^="data:image/gif;base64,"] { ... }.