Image handling

[difernandez]

General

This PR adds come things to facilitate image processing and handling in our projects, aimed at decreasing image loading times and improving loading experience. This is done mainly with the following elements:

• Size derivatives: when uploading an image as an attachment of some model, we are generating three different sizes for that image. If we use an appropriate size for each part the image is used we could decrease the weigth of the payload the frontend has to render
• Webp derivatives: generally lower weight compared to a jpg or png alternative, without big quality sacrifice. They're not 100% supported by browsers, so jpg alternatives are also included
• Blurhash: it's a string code generated from an image. The frontend decodes it and paints it in a <canvas> element very fast. It's used while an image is being loaded

Details

The following was implemented as a part of the file_storage recipe when choosing shrine:

• CoverImageUploader:
  • Inherits from ImageUploader
  • Generates derivatives of three sizes, each with a jpg and webp variant
  • In addition to the predefined derivatives, a derivation endpoint is mounted. This allows generation of ``urls with arbitrary sizes
  • The derivation endpoint is used to define a default_url for derivatives. This means that if, for any reason, an image doesn't have their predefined derivatives, when asking for their url, a url will be generated with the endpoint
  • Generates the blurhash code
  • Avoids generating it for derivatives, only main files
  • Before decoding it resizes the image, for a faster result that doesn't sacrifice much quality
  • Blurhash.decode requires an array of pixels in the rgb format, but vips was returning rgba, so the alpha byte is removed
• Attachment promotion (when the attachment goes from cache store to final storage) and derivatives creation is done in a background job, to not slow down uploads. default_url is particularly helpful with this
• ImageHandlingAttributes serializer concern and BaseSerializer. Only added if selected api rest. Concern adds add_image_handling_attributes that adds an attributes to the serializer with the name of the attachment and urls for chosen derivatives. Also adds a <attachment_name>_blurhash attributes
• ImageHandlingUtilities shrine plugin. It adds 3 class methods and 4 instance methods to models that use an Uploader that includes this plugin. Most of the methods are useful when making changes in derivatives and/or metadata, to backfill previus attachments. It's used in CoverImageUploader. Let's say the attachment's name is image, the methods are:
  • image_blurhash: returns blurhash from metadata. User in serializer
  • generate_image_derivatives: It generates all derivatives defined in Uploader. If file already had derivatives, it replaces them with newly generated ones. Associated class method: generate_all_image_derivatives
  • generate_image_metadata: refreshes all metadata for attachment. Associated class method: generate_all_image_metadata
  • generate_image_derivatives_and_metadata: does both previous things. Useful because it does so opening the file only once. Associated class method: generate_all_image_derivatives_and_metadata Class methods are the same as their instance counterparts, but for collections. They also allow error handling on an individual record by passing a block to handle each error. If no block is given, attachments that throw errors are ignored and the iteration continues

Questions for reviewers

• Should I add comments to some files (like image_handling_attributes, or cover_image_uploader) explaining some things?
• Are small, medium, large ok? Or are sm, md, lg better?