Unsplash practical progressively enhanced responsive optimised images
Unsplash has the best free pictures out there.
However, their delivery is painful if you want to follow all the best practices:
- Optimised images, to avoid sending useless bytes over the wire
- Responsive to deliver the right image for the right screen size
- Progressive enhancing, to get that nice blur-in à la Medium
Steps to do that:
- Pick an image on Unsplash
- Pass it through Responsive Breakpoints
- Download and rename the files (default name is way too long,
{unsplashID}_w_{width}.jpgwill do) - Generate a blur-in placeholder
- Generate the HTML code
- Insert in your DOM
It could be possible to generate the right HTML code directly from the Unsplash API: https://unsplash.com/documentation#dynamically-resizable-images
It would not benefit from the 20kB increments provided by Responsive Breakpoints, but it would allow building a URL-only HTML output (images are hosted by Unsplash).
Hosting images yourself (ie: copy from Unsplash and host along with the rest of the site):
Pros:
- If the image is pulled out of Unsplash, content does not break
- Full control over the quality and delivery of the image (can be a cons too)
- No rate-limiting (although currently Unsplash has no rate limiting on images, it could be in the future)
Cons:
- Increased bandwidth on our server (although cache can help)
- Increase in storage, duplication of data and
- Tracking ?
- Dependence over another server to be up and running
- https://responsivebreakpoints.com/
- https://css-tricks.com/sometimes-sizes-is-quite-important/
- https://github.com/technopagan/sqip
- https://css-tricks.com/the-blur-up-technique-for-loading-background-images/
- https://jmperezperez.com/svg-placeholders/
- https://cloudinary.com/blog/introducing_intelligent_responsive_image_breakpoints_solutions