Svelte image Github Smelte

Is a preprocessor which transforms a normal image

	  
	    <Image alt="fuji" src="fuji.jpg" />
	  
	

into resized, optimized, lazy loaded, WebP with old browsers fallback image with srcset and a beautiful trace or blur base64 placeholder like this

	  
	    <img
  src="data:image/png;base64,/9j/2wBDAAYEBQYFBAYG...BwYIChAKCgkJChQODwwQF"
  alt="fuji">
<picture>
  <source type="image/webp" srcset="g/400-fuji.webp 375w, g/800-fuji.webp 768w, g/1200-fuji.webp 1024w">
  <source srcset="g/400-fuji.jpg 375w, g/800-fuji.jpg 768w, g/1200-fuji.jpg 1024w">
  <img alt="fuji">
</picture>
	  
	

Very nice!

If you use the normal img tag, your image will be optimized and if its size is below certain threshold if will be inlined as base64 (like Github logo here).