Skip to main content

Manual

There are many ways to use the Image Optimization service in order to show images in your content.

Basic HTML Usage​

To show an image on a webpage, simply use the full URL to your image with the desired parameters in an img HTML tag.

<img src="https://images-example.evolvestorefront.com/marketing/home_hero.jpg?format=auto&width=1024"
    width="1024" height="768" alt="Home Page Hero Image"
/>

The format=auto parameter ensures that the image served to the user is using the format that is the most optimized for them. The width parameter in the URL is also recommended and it should match the width attribute in your img tag to ensure there isn't any stretching or warping of the image.

This approach can be used if your are editing HTML directly, or the URL can be used "insert an image" as part of your content management system.

Responsive HTML Usage​

If your website is optimized for different devices such as phones, tablets and desktop computers, you may choose to show images in a different size depending on the device being used. This allows you to show a smaller version of your image on a mobile phone where performance may be an issue.

This optimization can be accomplished by using the img tag's sizes and srcset attributes.

<img src="https://images-example.evolvestorefront.com/marketing/home_hero.jpg?format=auto&width=1024"
    width="1024" height="768" alt="Home Page Hero Image"
    sizes="(min-width: 800px), 100vw"
    srcset="https://images-example.evolvestorefront.com/marketing/home_hero.jpg?format=auto&width=640 640w,
        https://images-example.evolvestorefront.com/marketing/home_hero.jpg?format=auto&width=828 828w,
        https://images-example.evolvestorefront.com/marketing/home_hero.jpg?format=auto&width=1080 1080w,
        https://images-example.evolvestorefront.com/marketing/home_hero.jpg?format=auto&width=2048 2048w"
/>

Specific values for sizes and srcset are outside the scope of our documentation, but is some recommended reading: