responsive image resizing Global Image processing

[Jean-Baptiste-Lasselle]

This task is about adding gulp tasks to :

• keep the original image file

• generate 3 to 5 resizing images file for responsiveness

• and since when you do that kind of processing, you end up with a lot of images :

  • you just keep the original image file in the source code, zero processed files should be in the git repo
  • you publish the images to a CDN
  • cloud service providers :
  • the production and staging environments will use a managed CDN for images
  • and the development environment will use a CDN that is open source, provisioned in private infrastructure (with an open source private cloud provider like pokusbox), and broadcasted via noip ..?

• [ ] add gulp tasks to process images :

  • purpose 1 : add effects on images using ImageMagick :
  • There is no gulp-imagemagick plugin,
  • There are plugins using ImageMagick features to resize images for example,
  • but A./ I want to use ImageMagick special effects commands, not resizing commands
  • and B./ I want a plugin which allows me to run any ImageMagick commands, not only resizing commands
  • so i will use child_process and shelljs to run imagemagick commands
  • purpose 2 : For each image file, generate 3 to 5 resized images, using sharp / gulp-sharp
  • purpose 3 : compress all images files, will be done using imagemin / gulp-imagemin

• [ ] modify npm script to deploy images to CDN. The deployment process becomes :

  • deploy all images to CDN
  • if, and only if, all images were successfully deployed to CDN,
  • then the deployment of the website wan happen (the deployment of the static site to the static web server)
  • This new deployment makes it required that we use a staging environment, to deploy to a different CDN on staging and production envs : indeed, if the image deployement fails, it will then never impact in any way the production environment

Benchamrk CDN services

Image services like (open-source) and Cloudinary are also worth checking out. Image services provide responsive images (and image manipulation) on-demand. Thumbor is setup by installing it on a server; Cloudinary takes care of these details for you and requires no server setup. Both are easy ways to create responsive images. We need a benchmark there, at least between :

• Thumbor
• Cloudinary
• cloudflare

Gitops Corner

In my gitops fluxcd work, i want to work on one business case i find here :

• I want to use FluxCD / Flagger and a monitoring stack, to deploy the same website we are talking about here
• And the Monitoring Stack will especially detect an image error, pas it to Flagger to roll back the deployment, to previous version.

References

• https://github.com/ImageMagick/ImageMagick
• https://github.com/lovell/sharp

[Jean-Baptiste-Lasselle]

effets de tueur avec imagemagick : http://www.imagemagick.org/script/command-line-processing.php

[Jean-Baptiste-Lasselle]

ImageMagick, The Pokus CMMS and The Gulp Build

• cases where the app build adds effects on images :
• cases where the CMS user adds effects on images :
  • the user uploads an original image he starts working with. This image will never, ever be modified or replaced, unless the CMS user explicitly click a button to delete it
  • he generates a new image file, adding the effect (the server runs ImageMagick command to add the effect, and uploads the newly generate file automatically)
  • the user may also desired to resize the image, the process is exactly the same than for an effect,
  • the CMS user selects the new generated image, and use it as image for a hugo content entry
  • pokus keeps in its database, the entire history of all image processing operations, to be able to say from which image file, a given image was generated. When the parent/source image has explicitly been deleted by the user, then a notification explains the CMS user that this image is not an original, and its parent has been deleted. It just an info, missing the parent image shoudl not ever block any operation

[Jean-Baptiste-Lasselle]

Cloudinary deployment

https://cloudinary.com/blog/delivering_all_your_websites_images_through_a_cdn

and i found an awesome Gulpo Plugin : https://www.npmjs.com/package/gulp-cloudinary-upload