How We Treat Images
The images belong under the most heavy-sized media on the web. They are a visual representation of the information and can have a contentful, decorative, or assistive role.
To have an image on a website could be as easy as inserting <img src="your-image-url" /> to the page HTML. However, many challenges are trying to make your work harder. Images can be huge in size, load slow, look weird, have poor quality, display incorrectly, and so on. And even if not, there can always be some space for improvement. If we want to deliver a great user experience by serving images for our end users, choosing the right approach might be a little bit more challenging.
I’ll describe problems you can face with images on the web, and solutions including optimizations we use that work well and make sense for us.
In case you are interested just in code, see the Responsive Images Code Generator section at the end.