Skip to main content
All CollectionsImplementation guides
Code review checklist
Code review checklist

Essential items to check before going live with TwicPics.

Benjamin Arne avatar
Written by Benjamin Arne
Updated over a week ago

This article lists the essential elements to check in your code and your staging (pre-production) environment before the go-live to production with TwicPics.

⚠️ some elements of the checklist are not relevant if you use TwicPics components for JS frameworks or any integration (ie: WordPress plugin)

Essentials to be checked in the source code (image)

  1. Make sure that TwicPics script is loaded in the page:

    <script async defer src="https://<sub>.twic.pics/?v1"></script>

  2. Make sure to use the "data-twic-src" attribut in your image tags where you want to applied TwicPics context-aware optimizations and lazy-loading:
    ​

    <img data-twic-src="media:<path-to-media>" alt=""/>

    <!--❗⚠️ a common mistake is to use both src and data-twic-src attributs in your image tags. This will result in loading twice the same image. -->

  3. Use native HTML responsive combined with TwicPics media transformation API for content displayed at the top of the page:
    ​

    Make sure to check our LCP best-practices article for this.
    ​

    <img 
      fetchpriority="high" 
      src="https://<sub>.twic.pics/<path-to-media>?twic=v1/resize=280" 
      srcset="
        https://<sub>.twic.pics/<path-to-media>?twic=v1/resize=280 280w,    
        https://<sub>.twic.pics/<path-to-media>?twic=v1/resize=480 480w,
        https://<sub>.twic.pics/<path-to-media>?twic=v1/resize=560 560w,
        https://<sub>.twic.pics/<path-to-media>?twic=v1/resize=840 840w,
        https://<sub>.twic.pics/<path-to-media>?twic=v1/resize=960 960w,
        https://<sub>.twic.pics/<path-to-media>?twic=v1/resize=1440 1440w"
      sizes="(min-width: 768px) 480px, 87.5vw"
      alt=""
    />

  4. Prefer TwicPics media transformation API for logos or SVGs:
    ​

    <img src="https://<sub>.twic.pics/<path-to-media>" alt=""/>


    ​

  5. Make sure to always give the path to the highest quality and resolution media (HD or master image) you have in storage.

    ✅ <img data-twic-src="https://<sub>.twic.pics/folder/HD-image1.jpg" alt=""/>
    ✅ <img src="https://<sub>.twic.pics/folder/HD-image1.jpg" alt=""/>

    🔴 <img data-twic-src="https://<sub>.twic.pics/folder/resized-version-image1.jpg" alt=""/>
    🔴  <img src="https://<sub>.twic.pics/folder/resized-version-image1.jpg" alt=""/>

Best practices

Check and implement all the relevant best-practices from our best-practices list.

Test TwicPics behavior on a testing environment

Open your test website on a incognito tab in your browser (Chrome recommended) and open the development tools.
​

For all the tests, make sure to deactivate caching and in the Network tab select the image filter of the development tools:

First test: Spot possible image duplicates and check image weight

Position the viewport at the very top of the page and reload the page (cmd + R), wait for the top of the page to load and then scroll-down to the bottom on the page.

  • Make sure that the is to image duplicates (you can sort by Name can help for that)

  • Make sure there are no oversized images. Here are some usual order of magnitude:

Type of image

Usual order of magnitude for size

Banner image / product zoom image (2000px width)

~ 100kb (above 500kb is poor)

detail product image (1000px width)

~ 50kb (above 200kb is poor)

product image tile on list page (500px width)

~ 20kb (above 100kb is poor)

Thumbnail image (200px width)

~ 10kb (above 50kb is poor)

Second test: Critical images and lazy-loading

Position the viewport at the very top of the page and reload the page (cmd + R) but this time don't scroll in the page

  • Make sure that only images displayed in the viewport are loaded. Other images should load only when the user scroll down in the page.

Third test: Check image sizing

You can inspect each image to control the size of your images:

This will show the image tag in the elements section on the right:

Finally, put your mouse over the src attribut rendered by TwicPics script in the code to show both the display size and the intrinsic size:

  • On Retina screens (DPR=2 or DPR>2 ), the intrinsic size of your image needs to be twice the rendered size (display size).

  • On none-Retina screens (DPR=1) the intrinsic size of your image needs to be equal to the rendered size.

Now you can repeat the three tests with different screen resolution and screen quality:

We advise to make the three tests at least in the following setup:

  • Desktop screen (1300x800) - Retina quality (DPR=2)

  • Desktop screen (1300x800) - None-Retina quality (DPR=1)

  • Mobile screen (Iphone or Samsung 400x900) - Retina quality (DPR=2)

Essentials to be checked for video

Check and implement all the relevant best-practices from our best-practices list.


​

Did this answer your question?