performant images
April 28, 2020
written by
Joren Mathews
performant images make it faster.
Here at 300FeetOut, we’re always working on making your sites faster. Images on your site are often the largest portion of the total site load. The quality should be high as possible while minimizing their size as much as possible. This is an ever-evolving landscape, and it’s not as simple as just uploading your favorite JPEG anymore. But we’re doing some processing to make it easier for you.
make it easier.
To facilitate this with minimal effort we have created some useful tools for generating a large variety of image sizes so there will be an appropriately sized image for any display size. We also automatically generate WebP versions of your more standard formats like JPEG or PMG. WebP has superior compression and also makes Google happy on their Pagespeed tool.
<picture>
<source type="image/webp" data-srcset="/webp/.jpg/wp-content/uploads/2019/06/EDIOS_thumb.jpg 1200w,/webp/.jpg/wp-content/uploads/2019/06/EDIOS_thumb-640x640.jpg
640w,/webp/.jpg/wp-content/uploads/2019/06/EDIOS_thumb-533x533.jpg 533w,/webp/.jpg/wp-content/uploads/2019/06/EDIOS_thumb-455x455.jpg 455w,/webp/.jpg/wp-content/uploads/2019/06/EDIOS_thumb-341x341.jpg 341w,/webp/.jpg/wp-content/uploads/2019/06/EDIOS_thumb-256x256.jpg 256w,/webp/.jpg/wp-content/uploads/2019/06/EDIOS_thumb-213x213.jpg 213w" sizes="519px" srcset="/webp/.jpg/wp-content/uploads/2019/06/EDIOS_thumb.jpg 1200w,/webp/.jpg/wp-content/uploads/2019/06/EDIOS_thumb-640x640.jpg 640w,/webp/.jpg/wp-content/uploads/2019/06/EDIOS_thumb-533x533.jpg 533w,/webp/.jpg/wp-content/uploads/2019/06/EDIOS_thumb-455x455.jpg 455w,/webp/.jpg/wp-content/uploads/2019/06/EDIOS_thumb-341x341.jpg 341w,/webp/.jpg/wp-content/uploads/2019/06/EDIOS_thumb-256x256.jpg 256w,/webp/.jpg/wp-content/uploads/2019/06/EDIOS_thumb-213x213.jpg 213w">
<img width="1200" height="1200" data-sizes="auto" title="EDIOS_thumb" class="lazy_image lazyautosizes lazyloaded" sizes="519px" data-srcset="/wp-content/uploads/2019/06/EDIOS_thumb.jpg 1200w,/wp-content/uploads/2019/06/EDIOS_thumb-640x640.jpg 640w,/wp-content/uploads/2019/06/EDIOS_thumb-533x533.jpg 533w,/wp-content/uploads/2019/06/EDIOS_thumb-455x455.jpg 455w,/wp-content/uploads/2019/06/EDIOS_thumb-341x341.jpg 341w,/wp-content/uploads/2019/06/EDIOS_thumb-256x256.jpg 256w,/wp-content/uploads/2019/06/EDIOS_thumb-213x213.jpg 213w" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs%3D" srcset="/wp-content/uploads/2019/06/EDIOS_thumb.jpg 1200w,/wp-content/uploads/2019/06/EDIOS_thumb-640x640.jpg 640w,/wp-content/uploads/2019/06/EDIOS_thumb-533x533.jpg 533w,/wp-content/uploads/2019/06/EDIOS_thumb-455x455.jpg 455w,/wp-content/uploads/2019/06/EDIOS_thumb-341x341.jpg 341w,/wp-content/uploads/2019/06/EDIOS_thumb-256x256.jpg 256w,/wp-content/uploads/2019/06/EDIOS_thumb-213x213.jpg 213w">
</picture>
All of those images and code were generated automatically after selecting a single jpg.
The end result is a highly optimized image burden with no additional effort when editing or creating content.