Uploaded image for project: 'Planet4'
  1. Planet4
  2. PLANET-2227

Test different image compression options

XMLWordPrintable

    • Icon: Task Task
    • Resolution: Fixed
    • Icon: Should have Should have
    • None
    • None
    • 24
    • Sprint #41, Sprint #42, Sprint #43

      We are currently using imageMagick in php/wordpress to compress images. The result is having a few problems:

      a) Compared to manualy compressed images, the images in p4 are not as sharp

      b) Compared to manualy compressed images, the images in p4 are quite bigger in size

      ImageMagick itself has a lot of options to tweek the compression algorithm, but the wordpress implementation does not offer all of those.

      The wordpress library is located at: wp-includes/class-wp-image-editor-imagick.php

      One of the suggestions from google pagespeed optimiser is to use progressive compression for jpgs: https://developers.google.com/speed/docs/insights/OptimizeImages

      ImageMagick supports that with imagick::INTERLACE_PLANE 

      ( https://secure.php.net/manual/en/imagick.constants.php , https://coderwall.com/p/ryzmaa/use-imagemagick-to-create-optimised-and-progressive-jpgs )

      But the wordpress implemenation is using always imagick::INTERLACE_NO

      https://github.com/WordPress/WordPress/blob/master/wp-includes/class-wp-image-editor-imagick.php#L402-L404

       A test environment has been created in the kubernetes approach:

      https://k8s.p4.greenpeace.org/imagestest/

      The environment is controlled by this file: https://github.com/greenpeace/planet4-imagestest/blob/develop/composer-local.json#L7

      By changing the dev-develop to whatever branch you are using, you can test your changes directly there. Everytime you change the code, you can trigger a new build with :

      git commit --allow-empty -m "build"
      

      or accessing: https://circleci.com/gh/greenpeace/workflows/planet4-imagestest/tree/develop and doing a `rerun > rerun from beginning`

       

      The task is to test different configurations:

      a) Create a class that will extend WP_Image_Editor_Imagick

      b) Create a function that will extend the protected function thumbnail_image

      c) Overide the interlace with the suggested

      d) Deploy your code to https://k8s.p4.greenpeace.org/imagestest/

      e) Generate images (upload an image), download the generated images of the srcset and name them approprietly

      f) Test without the modifications, download images

      g) Test with different sharpness levels and filters, download images

      h) Create a github repository, upload all the images and a static html, and ask revieweres to see them and suggest which of the created setups are more acceptable.

       

       

            atheodor Angelos Theodorakopoulos (Inactive)
            kkokkoro Konstantinos Kokkorogiannis (Inactive)
            Votes:
            0 Vote for this issue
            Watchers:
            0 Start watching this issue

              Created:
              Updated:
              Resolved: