Automation Flow of Progressive Images Set Creation for Designers / Developers in 2020.
Automation is good, so long as you know exactly where to put the machine. Eliyahu Goldratt
Well, what exactly such a stuff like 🚀 Progressive Images Set (PIS) is, you would probably ask yourself? If shortly — a bunch of well-optimized images(same) for the modern web.
💡 Official: a regular image represented in both PNG/JPG/JPEG and WEBP formats, as well as produced in different resolutions (like for 1k, 2k-retina, and upper displays) at the same time. I.E. for every particular device that uses the image.
Introduction
🌈 I guess every reader here has already had playtime with serving retina images along with its regular resolution? So let’s go further.
Oh, don’t even tell I’m not right 🤯 ? Holy cow 🐮, mate! It’s 2020 on the backyard. 🏃Grab your legs up and go read about Retina images and why we need them right now.
Imagine, that you need to create a PIS, consisted of and .png image produced in @1x and @2x pixel density, where each is separated by three resolutions: desktop, tablet, mobile. By the way in two formats PNG and WEBP. So how should it look in math? It’s simple:
