You've successfully subscribed to Scaleflex Blog
Great! Next, complete checkout for full access to Scaleflex Blog
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.
Success! Your billing info is updated.
Billing info update failed.

How to accelerate images on AMP pages with Cloudimage?

AMP is an open-source framework created by Google in collaboration with Twitter. Accelerated Mobile Pages create better, faster experiences mainly on the mobile web. Learn more in this blog.

Simeon Emanuilov
Simeon Emanuilov

What is AMP?

AMP is an open-source framework created by Google in collaboration with Twitter. Accelerated Mobile Pages create better, faster experiences mainly on the mobile web.

At its core, the framework allows you to build lightweight experiences for mobile by simplifying the HTML and following streamlined CSS rules.

One important thing about AMP is that it comes with a lot of changes in the structure of the HTML and general changes in how the JavaScript should be executed.
By design - those should be very light pages, without too many dynamic scripts and redundant elements.

How to detect AMP pages in Search results?

AMP pages are identified in the Google search results with a lightning icon next to the URL.

Screenshot_2021-01-25_at_14.35.26.png

How to implement Cloudimage in AMP

Cloudimage can be implemented in various ways: via the core API, the Cloudimage Responsive Images Plugin plugin, or different CMS plugins.

Implementing Cloudimage on AMP requires the use of the core API:

<amp-img alt="A beautiful boat"  src="https://demo.cloudimg.io/v7/sample.li/boat.jpg?
width=264&height=195"  
width="264"  
height="195">
</amp-img>

As <amp-img> relies on JavaScript, if the user chooses to disable JavaScript, images will not display. In this case, you should provide a fallback to the image using <noscript> tag:

<amp-img alt="A beautiful boat"  src="https://demo.cloudimg.io/v7/sample.li/boat.jpg?width=264&height=195"  
         width="264"  
         height="195">
    <noscript>    
        <img src="https://demo.cloudimg.io/v7/sample.li/boat.jpg?width=264&height=195" width="264" height="195" />  
    </noscript>
</amp-img>

But what if you want to use responsive images?

AMP makes it easy to implement responsive elements (for example image containers) in your page using the responsive layout as shown below (some cool demos on how AMP layouts work here):

<amp-img alt="Sunset in Paris"  src="https://demo.cloudimg.io/v7/sample.li/paris.jpg?width=900&height=600"  
         width="900"  
         height="600"  
         layout="responsive">
</amp-img>

In the example above, the image's container will be responsive and adapt to various screen sizes, however the image will still be with a fixed width and height of 900px x 600px and will look bad on larger screens or retina displays.

Modern higher end smart phones have device-pixel ratios of 2 or even 3, meaning that you need to deliver an image with twice or 3 times the resolution than on a desktop screen to have your users experience the same image quality.

Considering that AMP is mainly designed to improve user experience on mobile with lighter page via faster-loading code, non-optimized images defeat its main purpose...

The solution: leverage srcset !

Good news! AMP supports the well known HTML srcset attribute. Combining sercet and Cloudimage-transformed images, you will be able to deliver the right image size to any screen size and device-pixel ratio.

In the following example, we have several image files that are of the same aspect ratio but of different resolutions.

By supplying image resolutions, the browser can choose the image that best suits the device's resolution. Additionally, we have specified the size to render the image at :

  • For a viewport width up to 400px, render the image at 100% of the viewport width.
  • For a viewport width up to 900px, render the image at 75% of the viewport width.
  • For everything above 900px, render the image at 600 px wide.
<amp-img    
  alt="Nice Car"    
  src="https://demo.cloudimg.io/v7/sample.li/tesla.jpg?width=900&height=600"    
         height="600"    
         width="900"    			    srcset="https://demo.cloudimg.io/v7/sample.li/tesla.jpg?width=900 900w,  https://demo.cloudimg.io/v7/sample.li/tesla.jpg?width=800 800w,       https://demo.cloudimg.io/v7/sample.li/tesla.jpg?width=700 700w,       https://demo.cloudimg.io/v7/sample.li/tesla.jpg?width=600 600w,       https://demo.cloudimg.io/v7/sample.li/tesla.jpg?width=500 500w,       https://demo.cloudimg.io/v7/sample.li/tesla.jpg?width=400 400w" 
  sizes="(max-width: 400px) 100vw,   
         (max-width: 900px) 75vw, 600px">
</amp-img>

Let's say we have a device that has a viewport width of 412px.

Based on the code above, the image must be displayed at 75% of the viewport width, so the browser chooses an image close to 803 px, which happens to be https://demo.cloudimg.io/v7/sample.li/tesla.jpg?width=800.

Validating AMP pages

It is always a good idea to test your HTML, before release it. There can be various validators for AMP technology, but for sure it is highly recommended to use the official one from Google available here.

You can also refer to some reports for Accelerated Mobile Pages in Google Search Console.

Screenshot_2021-01-25_at_14.44.05.png
CloudimageMedia OptimizationOur Solutions