Image resizing with «Retina»
At dreipol, we strive for excellence in every aspect of our products. An important point, however, hasn’t gotten enough attention in the past: Retina images. Those incredibly crisp and sharp images on any screen and device. So we came up with our own package.
Visit www.dreipol.ch to learn more about us.
If you got used to Retina Images once, you’ll instantly notice that there’s something off with images that are not optimized for your retina ready screen, and with the high adaption of the srcset property, there’s really no excuse to not make use of it anymore.
In our Django stack we make heavy use of the easy-thumbnails package to handle all our image resizing needs, but unfortunately, it doesn’t include anything for handling retina images out of the box (except the deprecated THUMBNAIL_HIGH_RESOLUTION flag).
So we came up with our own package: Retina. Retina is built around the concept of adapters which makes it incredibly flexible. Out of the box, it comes with two adapters specifically targeted at Django and Filer, one for handling FilerImages and one for FilerFiles. In the end this allows us to to something like the following:
File(user.profile_image).srcset(‘portrait’, [‘sm’, ‘xl’])This results in the following dict:
{ 'urls': { 'sm': [ 'path/to/images/profile_image__100x100.jpg', 'path/to/images/profile_image__200x200.jpg', ], 'xl': [ 'path/to/images/profile_image__150x200.jpg', 'path/to/images/profile_image__300x400.jpg', ] }, 'alt': 'John Doe',}
@2 is not enough? Just chain in an additional density method call with the fluent API Retina provides:
File(user.profile_image).density(3).srcset('portrait', ['sm', 'xl'])Check the readme of the Package on GitHub to find out more about the functionality and usage of Retina.
. . .
Feel free to like this post, share it or follow me or dreipol on Social Media:
