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

Implement Cloudflare's Image Optimization on Carousel block

    XporterXMLWordPrintable

    Details

    • Type: Task
    • Status: CLOSED
    • Priority: Should have
    • Resolution: Released
    • Affects Version/s: None
    • Fix Version/s: 2.35.0
    • Labels:
      None
    • Story Points:
      2
    • Sprint:
      Sprint #138, Sprint #139, Sprint #140
    • Section:
      Block: Carousel Header, Performance
    • P4 site:
      All sites
    • Track:
      Development
    • Repositories:
      planet4-master-theme, planet4-plugin-gutenberg-blocks

      Description

      Context
      Following up from PLANET-4537, initially we tried using Cloudflare's "Polish", that offers optimization and WebP support. Unfortunately this works only on images server by the same domain as the website so it's not applicable to our case.

      Instead we could try the "Image Resizing" feature. This works on any origin, it automatically resizes and caches images and delivers in WebP on supported browsers. The caveat is that this is not completely free, but it does have a very big free tier. So as a first move. For this feature to work we should rewrite the image url, so this gives us the option to enable it gradually on certain parts of the platform. As a first step let's try the Carousel Header block.

      Documentation:
      https://developers.cloudflare.com/images/about/

      Tasks

      • Rewrite image urls on Carousel Header block to follow the url path mentioned in the documentation above (this requires we request the proper image size)

        Gliffy Diagrams

          Attachments

            Issue Links

              Activity

                People

                Assignee:
                sdeshmuk Sagar Deshmukh
                Reporter:
                nroussos Nikos Roussos
                Votes:
                0 Vote for this issue
                Watchers:
                1 Start watching this issue

                  Dates

                  Created:
                  Updated:
                  Resolved: