AMP-IMG Examples

Speeding up images...

In this age of digital speed, a page that takes more than a few seconds to load is losing its appeal on the web,and with the vilinans is how images have been implemented within a web site. This section addresses some of the issues we needed to address and how we resolved them. As always, view sorce on this page for a live, working example of AMP images.

AMP Image used within a "grid layout" >>>

AMP Required Elements

The AMP specification states that you must use a set of custom elements and boilerplate styles. The following 'scripts' are some of the AMP required script element. The order of these is important!

<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>

AMP-IMG Example - Align Left

Take a 300 px by 300 px image and left align in with the text wrapping around it. Below will be the associated CSS used on these examples.

AMP-IMG Example - Align Center

Take a 300 px by 300 px image and center align in with the text wrapping around it. Below will be the associated CSS used on these examples.

AMP-IMG Example - Align Right

Take a 300 px by 300 px image and right align in with the text wrapping around it. Below will be the associated CSS used on these examples.

.alignright < float: right; >
.alignleft < float: left; >
.aligncenter < display: block; margin-left: auto; margin-right: auto; >

.amp-enforced-sizes <
/** Our sizes fallback is 100vw, and we have a padding on the container; the max-width here prevents the element from overflowing. **/
max-width: 100%;
>

Notes

Although we used the AMP-IMG feature, page load speed didn't improve because of it. It was due to us making major changes to the images themselves. This is where the major speed improvement came from.

Image Resizing to fit the "desktop layout".

We resized each image to the size used in the desktop layout using PaintShop Pro's "cropping" & "resizing". Each image also was set to 72 dpi. Then saved as .JPG using "progressive encoding" and a "compression factor" of 25%. This resulted in a 40% speed reduction in the image load times..

Home page background images

We used two different images for the desktop (300 dpi) and mobile page (72 dpi) where the @media query swapped out the images as needed. Otherwise, all images used to date were used on the desktop and mobile page.

AMP_ERROR Message Received

Get started with
Catanich today!

Talk to sales.

214-762-8208

Ready to take your search marketing to the next level?
Contact us