Skip to content

Instantly share code, notes, and snippets.

@devwax
Last active March 1, 2020 03:20
Show Gist options
  • Save devwax/db1c45a5bbb41f345f79c0070f16d5be to your computer and use it in GitHub Desktop.
Save devwax/db1c45a5bbb41f345f79c0070f16d5be to your computer and use it in GitHub Desktop.
Embedded Base64 WebP image w/ JPEG fallback
<picture>
<source srcset="data:image/webp;base64,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" type="image/webp">
<source srcset="/wp-content/themes/mytheme/assets/images/myimage.jpg" type="image/jpeg">
<img class="img-fluid" src="/wp-content/themes/mytheme/assets/images/myimage.jpg" alt="My Image">
</picture>
<!--
Explanation
The WebP file is only 4k so we embed it.
The JPEG is 21k so link it externally.
Now 70%+ browsers get a non-blocking 4k WebP image instead of 21k downloaded JPEG file.
Pen
https://codepen.io/devwax/pen/WNvjmdx
Workflow
1. Optimize / compress original PNG or JPEG
2. Convert to WebP
3. Base64 WebP file (optionally optimize the webp as well)
4. Add <picture> element with embedded WebP and optimized png or jpg fallback
Tools
https://tinypng.com/
https://cloudconvert.com/jpg-to-webp
https://cloudconvert.com/png-to-webp
https://www.base64-image.de/
-->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment