The AV1 Image format, or AVIF, is the latest image codec on earth. AVIF is an optimized image format which was created to make our images smaller while keeping the same quality (lossless). The file extension for AVIF is .avif.

In this article, I want to talk about its features and benefits, and why you should start using AVIF. I will also show you the safe way to include AVIF images on your website.

What is AVIF and How Does it Work?

AVIF is an extraction from the keyframes of the now popular video format AV1 developed by Alliance for Open Media (AOM).

AOM developed AVIF with the goal of providing royalty-free images with better compression efficiency and more feature support compared to the existing image formats.

AVIF now has backers from big companies like Google, Netflix, and Apple.

Why is AVIF Better?

Following its predecessors (WebP, JPEG-XR, JPEG2000, and PNG, GIF) AVIF is compatible with high-dynamic-range imaging. It supports 10- and 12-bit color at full resolution, resulting in images that are up to 10 times smaller than other known formats.

AVIF is a good choice for web developers because:

• It is royalty-free, so you can use it for free without worrying about licensing.
• It is currently backed by many big players in tech like Google, Amazon, Netflix, Microsoft, and more.
• It has the most optimal compression.
• It has more modern features packed in like transparency, HDR, wide colour gamut, and more.

How to Start Using AVIF Images

Now we get to the fun section of this tutorial. There are two major ways you can start using AVIF images:

1. One is by converting your old images to AVIF.
2. The other is by creating AVIF images using AVIF-supported image editors.

How to convert your old images to AVIF

Because AVIF is still in its infancy, the easiest way to create images in AVIF format is to convert your old formats.

This can be done simply online, as there are many online AVIF image converters. The AVIF online converter is my choice because it is simpler and seems the to be the fastest available online converter.

Just follow these steps to convert your images to AVIF:

1. Visit the website.
2. Upload your old images (can be PNG, JPEG, GIF and others).
3. Wait while the website processes the conversion.
4. Save your new AVIF files.

How to create AVIF images using AVIF-supported image editors

Image editors are adding support for AVIF image creation. These editors now fully support AVIF images:

• Microsoft Paint – starting from the "19H1" updates, you can now draw images on Microsoft Paint as “save as” AVIF.
• GIMP for Windows and Linux now has AVIF support starting from the 2.10.22 update.
• Photoshop developers are also talking about how to support AVIF. Hopefully this will soon be supported.

How to Use AVIF on Your Website

AVIF is still a relatively new technology. But most modern browsers now support the format which means you can use it directly in the <img> tag. Just keep in mind that not all browsers fully support the format yet.

The best way to go about using AVIF is with content negotiation. We will be using the HTML 5 <picture> and the <source> which supports content negotiation.

You can play around with the live example here.

Which browsers support AVIF

• The first browser to fully support AVIF is Chrome 85.
• Microsoft Windows 10 also added support in the "19H1" updates.
• Mozilla is still working on the support for the image format in Firefox.[155].

Wrapping Up

AVIF is a game changer that will soon become the world's defacto image format. Because of its potential features, it is likely that it will soon gain full support on all platforms.

Unlike Google's WebP image, which took Apple a whole of 10 years to support, AVIF has quickly attracted Apple's interest to the extent that they now contribute to the project.

Are you ready to start using AVIF on your websites?

SVG stands for Scalable Vector Graphics. It is a unique type of image format for vector-based graphics written in Extensible Markup Language (XML).

In this tutorial, I will explain why you'd want to use SVG images and how you can use them in CSS and HTML.

Why Should You Use SVG Images?

There are a number of reasons to use SVG images, some of which are:

• SVG images do not lose their quality when zoomed or resized.

• They can be created and edited with an IDE or text editor.

• They are accessible and animatable.

• They have a small file size and are highly scalable.

• And they can be searched, indexed, scripted, and compressed.

Now let's see how you can actually work with SVG images.

How to Download the SVG Image Used in This Tutorial

If you want to work with the SVG image I've used in this tutorial, follow the steps (and diagram) below to download it.

• Go to unDraw.

• Change the background color to yellow.

• In the search box, search for the word happy.

• Click on the image named Happy news.

• On the pop-up window, click on the Download SVG to your projects button.

If you followed the steps above correctly, the SVG image should be on your computer now.

Now, open the SVG image in your favorite IDE or text editor. Rename it to happy.svg or whatever name you prefer.

How to Use SVG Images in CSS and HTML

There are several different ways to use SVG images in CSS and HTML. We will explore six different methods in this tutorial.

1. How to use an SVG as an <img>

This method is the simplest way to add SVG images to a webpage. To use this method, add the <img> element to your HTML document and reference it in the src attribute, like this:

<img src = "happy.svg" alt="My Happy SVG"/>

Assuming you downloaded the SVG image from unDraw and renamed it to happy.svg, you can go ahead and add the code snippet above into your HTML document.

If you did everything correctly, your webpage should look exactly like the demo below. 👀

When you add an SVG image using the <img> tag without specifying the size, it assumes the size of the original SVG file.

For instance, in the demo above, I didn't modify the size of the SVG image, so it assumed its original size (which was a width of 915.11162px and a height of 600.53015px ).

Note: to change the original size, you have to specify the width and height with CSS as you can see in the demo below. You can also update the original width and height directly.

Even though we can change the size of SVG images added via the <img> tag, there are still some restrictions if you want to make major style changes to the SVG image.

2. How to use SVG as a CSS background-image

This is similar to adding SVG to an HTML document using the <img> tag. But this time we do it with CSS instead of HTML as you can see in the code snippet below.

body {
  background-image: url(happy.svg);
}

When you use an SVG as a CSS background image, it has similar limitations to using <img>. Still, it allows a bit more customization.

Check out the demo below and feel free to make modifications to it using CSS.

3. How to use inline SVG images

SVG images can be written directly into the HTML document using the<svg> </svg> tag.

To do this, open the SVG image in VS code or your preferred IDE, copy the code, and paste it inside the <body> element in your HTML document.

<body>
 // Paste the SVG code here.
</body>

If you did everything correctly, your webpage should look exactly like the demo below.

When you use SVG inline in the HTML document, it reduces load time because it serves as an HTTP request.

Using this method lets you perform more customization as opposed to using either the <img> or background-image methods.

4. How to use an SVG as an <object>

You can also use an HTML <object> element to add SVG images to a webpage using the code syntax below:

<object data="happy.svg" width="300" height="300"> </object>

You use the data attribute to specify the URL of the resource that you'll use by the object, which is the SVG image in our case.

You use the width and height to specify the size of the SVG image.

Again, below is a demo for you to explore. 😃

Using the <object> is supported across all browsers that support SVG.

5. How to use SVG as an <iframe>

Even though this isn't advisable, you can also add an SVG image using an <iframe> as seen in the demo below.

Just keep in mind, though, that <iframe>s can be difficult to maintain and will be bad for your site's Search Engine Optimization (SEO).

Using <iframe> also defeats the purpose of the Scalable in the name Scalable Vector Graphics because SVG images added with this format are not scalable.

6. How to use SVG as an <embed>

The HTML <embed> element is another way to use an SVG image in HTML and CSS using this syntax: <embed src="happy.svg" />.

Keep in mind, however, that this method has limitations, too. According to MDN, most modern browsers have deprecated and removed support for browser plug-ins. This means that relying upon <embed> is generally not wise if you want your site to be operable on the average user's browser.

Below is a demo of using the HTML <embed> element to add an SVG image.

Conclusion

I hope you were able to learn about the different ways of using SVG images in CSS and HTML. This will hopefully guide you towards choosing the right method when adding SVG images to a website.

If you have any questions, you can send me a message on Twitter, and I'll be happy to answer every single one.

Images are an essential ingredient of most websites. The visual quality of pictures has a direct impact on the brand image and the message those images convey. And the weight of images usually accounts for a 40-60% of the data transferred on the web.

This usually has the largest impact on loading time over other resources like JavaScript. So, whether we're creating or running a website, we should put in place an image transformation and optimization pipeline.

There are many options to do this, from in-house developments based on open source libraries and suites – like ImageMagick – to cloud-based tools and APIs.

Whatever tool we use in our deployment, there are four main tasks that, at the very least, any pipeline should accomplish.

Resize images.

Image resizing is the first and most important step. It brings a big impact on weight with no visual quality penalty, as long as we don't make it smaller than the displaying resolution.

We should always set and enforce a maximum image resolution in our website, for instance 2000 px width. Ideally, we'd make our website responsive by setting different breakpoints and delivering images that fit in our users' displays.

If you need help on choosing your breakpoints, check out this article on the best image sizes for web.

Convert to the right format.

JPEG is the default format in the web. PNG may work better with graphic designs featuring solid colors, but in these cases it may yield lower weight with better quality.

You may consider offering WEBP for Chrome, Edge, Firefox and Android users, keeping JPEG as fallback for Safari and iOS. It may save 10-30% of image weight with very similar quality, perhaps some more blur and less ringing.

For an up to date revision you may check out this article on image formats for web.

Compress images properly.

We can do this with a powerful open source suite like ImageMagick and simply set a quality factor (typically 75 to 85) for JPEG (and WEBP) images. You can still use a perceptual metric to better protect quality and further squeeze weight – this is an option available in some cloud image optimization tools.

Get rid of metadata.

From shooting to editing, images accumulate metadata, like exif data. While they may be useful for editing and management purposes, they have no impact on how images show in our web. Their weight can easily get 20 KB or more per image.

We should get rid of metadata before publishing on the web. We only have to make sure that images are coded with the proper orientation and with a sRGB profile, adhering to good color management practices.

Millions of people have already shifted from traditional tv to online content, and from traditional malls to online stores. Because of this, e-commerce and marketing teams need to deploy and maintain strong online presences for their businesses.

This usually means running the brand's own online store and having a presence in different marketplaces that cover different regions and population segments. The never-ending list of possible marketplaces in which to showcase, promote, and sell products just gets longer and longer.

To make matters worse, different marketplaces have different requirements and restrictions on images, which can add a burden for the devops and marketing teams. It's also a source of inconsistency in the public image of a brand.

Here, we'll review the main aspects to consider when setting up a clean pipeline for the seamless production of omnichannel images.

A single master image through a single pipeline

To simplify workflows and keep them sustainable, a good practice is to apply the principles of omnichannel to images. This basically means to set a single, easy to configure pipeline for the creation of variants, from the same master or pristine images. Under this approach, we can use the same product image for every channel.

Our pipeline should receive master images and produce the derivatives needed to feed the marketplaces. At a minimum, it should cope with a workflow like this.

Of course, a front-end and cloud storage are not necessary. The pipeline may just work by watching a hot folder and creating the variants as master images land there. We'll also take a look at this.

Image transformation and optimization

Each web channel has its own web design and layout. As for images, this means different and specific aspect ratios. Besides, each marketplace usually has an image policy in place, which limits the resolution and the weight of the image and sets the admissible image format. Usually, it also specifies other style guidelines.

Let's look at the main operations we'll want to accomplish with our pipeline.

Resizing, cropping, padding

To change the aspect ratio of an image we may crop it or pad it. To get a squared image from a vertical one we may cut out the upper and bottom parts or we may fill in the left and right sides with white stripes.

There are open source tools – like ImageMagick – that allow you to perform these operations effectively. Resizing an image with ImageMagick to limit its maximum dimensions to 800 px is as simple as this:

convert input.jpg -resize 800x800 resized.jpg

This instruction respects the aspect ratio. If the original image is not squared, then the resized image has one dimension lower than 800 px. Let's say the image is vertical and we want it for Tmall, which requires a squared image of 800x800 px. Then we may pad it like this:

convert resized.jpg  -gravity center -extent 800x800 padded.jpg

Also, we may simply crop it to fit the dimensions:

convert input.jpg -gravity Center  -crop 800x800+0+0 +repage crop.jpg

While some marketplaces like Tmall encourage padding images with white stripes and branding them with logos to use them in category pages, others like Amazon or Lamoda forbid this practice.

Cropping (left), Resizing (center), Resizing and padding (right)

When we pad an image to match the aspect ratio, we don’t risk cropping out important parts. In fact, padding is a trick to keep the aspect ratio unchanged. However, the risk is real when we crop the image.

So, it is a good practice to ensure in the studio that we comply with some composition requirements set by each channel. We should produce master images with a view of the product compatible with the different aspect ratios that we'll deliver.

Smart cropping

There are algorithms inspired by human attention and aesthetic perception that provide an enhanced protection against bad automatic crops. In the next example, with smart image cropping (white line) we avoid cutting the face unlike a simple center cropping (red line) would do.

Example of smart cropping with a cloud service vs center cropping

This option is available in some cloud services. If we're going to use it, we should verify that it works properly for us because many solutions only use an attention map and do not consider aesthetic aspects. Usually, choosing a number of representative images, making some tests with them, and finally verifying the results is enough to get a good grasp.

Overlaying logos and text

We may also need to add our brand logo or to add a message to the image by overlaying a vector graphic or a text. Moreover, in many cases we need some content localization strategy in place – like tailoring discounts and language to a market region. Sticking to our example, with ImageMagick we can overlay text on a padded image.

convert -fill black -pointsize 70 -gravity center -draw "rotate -90 text 0,-330 'MyBrandHere'" padded.jpg padded-with-brand.jpg

Once we configure it for one image, we may apply it to any other with the same dimensions.

Examples of batch image branding using Abraia's cloud service

Otherwise, handling typographies and different settings may end being tricky in workflows with certain complexity. In this regard, a cloud service usually provides a front-end to make the configuration intuitive and fast, and more convenient to handle. It also deals with other stuff like typographies or quality preservation in image recompression.

The workflows

There are many ways to deploy an image processing pipeline. Depending on the flow rate of images, we may need to support different types of workflows.

Batch processing

In the most simple case – when the flow rate is low – a batch image processing solution may be enough. With ImageMagick, we can use mogrify (instead of convert) to process all the images inside a folder.

In certain cases, like image versions with a text in different languages, we may need to code a script, but that's not a big deal either. To make it even easier, we may use a cloud batch processing tool in which we drop images and it gives us back all the variants we need, like in the video at the beginning of the post.

Hot folders

For in-house deployments where we need something more than simple batch image processing, the use of hot folders may be a good option. In this case, we should set a worker that watches a folder. Any time an image lands the folder the watcher triggers the process that creates all the variants we need.

In this regard, Gulp comes very handy to implement a folder watching pipeline. This GitHub repository brings a ready-to-use implementation of hot folder based on Gulp. It allows us to transform images using Abraia's cloud service or optimize them using Imagemin (an open source solution). Once installed, the watcher is easily started with just one command in the terminal.

$ gulp

This video shows the process at work.

Full cloud

Cloud services usually bring the most flexible and fast-to-deploy solution. Still, there are different ways to go full cloud. In the most simple approach from a user perspective, an image management and optimization service takes charge of the transformation. It also manages the delivery to end users (through a CDN) or other web channels like marketplaces and social networks. The user only needs to upload the master images and to configure the transformations, usually with an intuitive graphic interface.

In medium to large companies that manage their own cloud, services from different providers are usually combined. In this case, we are likely to have to manage private and public buckets. We can have a service accessing a bucket, creating the variants, and delivering the resources or just returning them to a different bucket.

Also, a cloud pipeline may be partially implemented in-house. In this case we have endless possibilities. However, such development effort only makes sense when no service complies with the requirements and there is a justified need for a tailored solution.

Summary

Studio shooting and photography retouching are time-consuming and costly operations. Being able to use the same master material everywhere is very important to keep times and cost under control.

We have reviewed the main aspects of a complete pipeline in charge of creating image variants. On one hand, we looked at the transformations you need to perform from resizing, cropping, or padding, to the overlay of texts and graphics. On the other, we looked at the workflows to implement from batch processing to hot folders or full cloud solutions. We have reviewed some important open source resources (like ImageMagick or Gulp) that make it possible to implement a pipeline you develop yourself.

In the end, there are two main factors to consider when deciding whether to use an in-house or a cloud service. First, you must evaluate your willingness to take on the development effort. Second, you need to decide what features you require, from an easy to use interface for the configuration of variants to advanced features like smart cropping.

Let’s face it, image optimization is hard. We want to make it effortless.

When we set out to build our React Component there were a few problems we wanted to solve:

• Automatically decide image width for any device based on the parent container.

• Use the best possible image format the user’s browser supports.

• Automatic image lazy loading.

• Automatic low-quality image placeholders (LQIP).

Oh, and it had to be effortless for React Developers to use.

This is what we came up with:

<Img src={ tueriImageId } alt='Alt Text' />

Easy right? Let’s dive in.

Calculating the image size:

Create a <figure /> element, detect the width and build an image URL:

class Img extends React.Component {

    constructor(props) {
        super(props)
        this.state = {
            width: 0
        }
        this.imgRef = React.createRef()
    }

    componentDidMount() {
        const width = this.imgRef.current.clientWidth
        this.setState({
            width
        })
    }

    render() {

        // Destructure props and state
        const { src, alt, options = {}, ext = 'jpg' } = this.props
        const { width } = this.state

        // Create an empty query string
        let queryString = ''        

        // If width is specified, otherwise use auto-detected width
        options['w'] = options['w'] || width

        // Loop through option object and build queryString
        Object.keys(options).map((option, i) => {
            return queryString +=  `${i < 1 ? '?' : '&'}${option}=${options[option]}`
        })

        return(
            <figure ref={this.imgRef}>
                { 
                    // If the container width has been set, display the image else null
                    width > 0 ? (
                        <img
                            src={`https://cdn.tueri.io/${ src }/${ kebabCase(alt) }.${ ext }${ queryString }`}
                            alt={ alt }
                        />
                    ) : null 
                }
            </figure>
        )

    }
}

export default Img

This returns the following HTML:

<figure>
    <img 
        src="https://cdn.tueri.io/tueriImageId/alt-text.jpg?w=autoCalculatedWidth" 
        alt="Alt Text" 
    />
</figure>

Use the best possible image format:

Next, we needed to add support for detecting WebP images and having the Tueri service return the image in the WebP format:

class Img extends React.Component {

    constructor(props) {
        // ...
        this.window = typeof window !== 'undefined' && window
        this.isWebpSupported = this.isWebpSupported.bind(this)
    }

    // ...

    isWebpSupported() {
        if (!this.window.createImageBitmap) {
            return false;
        }
        return true;
    }

    render() {

        // ...

        // If a format has not been specified, detect webp support
        // Set the fm (format) option in the image URL
        if (!options['fm'] && this.isWebpSupported) {
            options['fm'] = 'webp'
        }

        // ...

        return (
            // ...
        )

    }
}

// ...

This returns the following HTML:

<figure>
    <img 
        src="https://cdn.tueri.io/tueriImageId/alt-text.jpg?w=autoCalculatedWidth&fm=webp" 
        alt="Alt Text" 
    />
</figure>

Automatic image lazy loading:

Now, we need to find out if the <figure /> element is in the viewport, plus we add a little buffer area so the images load just before being scrolled into view.

   class Img extends React.Component {

   constructor(props) {
       // ...
       this.state = {
           // ...
           isInViewport: false
           lqipLoaded: false
       }
       // ...
       this.handleViewport = this.handleViewport.bind(this)
   }

   componentDidMount() {
       // ...
       this.handleViewport()
       this.window.addEventListener('scroll', this.handleViewport)
   }

   handleViewport() {
       // Only run if the image has not already been loaded
       if (this.imgRef.current && !this.state.lqipLoaded) {
           // Get the viewport height
           const windowHeight = this.window.innerHeight
           // Get the top position of the <figure /> element
           const imageTopPosition = this.imgRef.current.getBoundingClientRect().top
           // Multiply the viewport * buffer (default buffer: 1.5)
           const buffer = typeof this.props.buffer === 'number' && this.props.buffer > 1 && this.props.buffer < 10 ? this.props.buffer : 1.5
           // If <figure /> is in viewport
           if (windowHeight * buffer > imageTopPosition) {
               this.setState({
                   isInViewport: true
               })
           }
       }
   }

   // ...

   componentWillUnmount() {
       this.window.removeEventListener('scroll', this.handleViewport)
   }

   render() {

       // Destructure props and state
       // ...
       const { isInViewport, width } = this.state

       // ...

       return (
           <figure ref={this.imgRef}>
               { 
                   // If the container width has been set, display the image else null
                   isInViewport && width > 0 ? (
                       <img 
                           onLoad={ () => { this.setState({ lqipLoaded: true }) } }
                           // ...
                       />
                   ) : null 
               }
           </figure>
       )

   }
}

export default Img

Automatic low-quality image placeholders (LQIP):

Finally, when an image is in the viewport, we want to load a 1/10 size blurred image, then fade out the placeholder image when the full-size image is loaded:

class Img extends React.Component {

    constructor(props) {
        // ...
        this.state = {
            // ...
            fullsizeLoaded: false
        }

        // ...

    }

    // ...

    render() {

        // Destructure props and state
        // ...
        const { isInViewport, width, fullsizeLoaded } = this.state

        // ...

        // Modify the queryString for the LQIP image: replace the width param with a value 1/10 the fullsize
        const lqipQueryString = queryString.replace(`w=${ width }`, `w=${ Math.round(width * 0.1) }`)

        // Set the default styles. The full size image should be absolutely positioned within the <figure /> element
        const styles = {
            figure: {
                position: 'relative',
                margin: 0
            },
            lqip: {
                width: '100%',
                filter: 'blur(5px)',
                opacity: 1,
                transition: 'all 0.5s ease-in'
            },
            fullsize: {
                position: 'absolute',
                top: '0px',
                left: '0px',
                transition: 'all 0.5s ease-in'
            }
        }

        // When the fullsize image is loaded, fade out the LQIP
        if (fullsizeLoaded) {
            styles.lqip.opacity = 0
        }

        return(
            <figure
                style={ styles.figure }
                // ...
            >
                {
                    isInViewport && width > 0 ? (
                        <React.Fragment>

                            {/* Load fullsize image in background */}
                            <img 
                                onLoad={ () => { this.setState({ fullsizeLoaded: true }) } }
                                style={ styles.fullsize }
                                src={`https://cdn.tueri.io/${ src }/${ kebabCase(alt) }.${ ext }${ queryString }`}
                                alt={ alt }
                            />

                            {/* Load LQIP in foreground */}
                            <img 
                                onLoad={ () => { this.setState({ lqipLoaded: true }) } }
                                style={ styles.lqip }
                                src={`https://cdn.tueri.io/${ src }/${ kebabCase(alt) }.${ ext }${ lqipQueryString }`} 
                                alt={ alt } 
                            />
                        </React.Fragment>
                    ) : null
                }            
            </figure>
        )

    }
}

// ...

Putting it all together:

Image optimization made effortless. Just swap out your regular <img /> elements for the Tueri <Img /> and never worry about optimization again.

import React from 'react'
import PropTypes from 'prop-types'
import { TueriContext } from './Provider'
import kebabCase from 'lodash.kebabcase'

class Img extends React.Component {

    constructor(props) {
        super(props)
        this.state = {
            isInViewport: false,
            width: 0,
            height: 0,
            lqipLoaded: false,
            fullsizeLoaded: false
        }

        this.imgRef = React.createRef()
        this.window = typeof window !== 'undefined' && window 
        this.handleViewport = this.handleViewport.bind(this)       
        this.isWebpSupported = this.isWebpSupported.bind(this)

    }

    componentDidMount() {

        const width = this.imgRef.current.clientWidth

        this.setState({
            width
        })

        this.handleViewport()

        this.window.addEventListener('scroll', this.handleViewport)

    }

    handleViewport() {
        if (this.imgRef.current && !this.state.lqipLoaded) {
            const windowHeight = this.window.innerHeight
            const imageTopPosition = this.imgRef.current.getBoundingClientRect().top
            const buffer = typeof this.props.buffer === 'number' && this.props.buffer > 1 && this.props.buffer < 10 ? this.props.buffer : 1.5
            if (windowHeight * buffer > imageTopPosition) {
                this.setState({
                    isInViewport: true
                })
            }

        }
    }

    isWebpSupported() {
        if (!this.window.createImageBitmap) {
            return false;
        }
        return true;
    }

    componentWillUnmount() {
        this.window.removeEventListener('scroll', this.handleViewport)
    }

    render() {

        // Destructure props and state
        const { src, alt, options = {}, ext = 'jpg' } = this.props
        const { isInViewport, width, fullsizeLoaded } = this.state

        // Create an empty query string
        let queryString = ''

        // If width is specified, otherwise use auto-detected width
        options['w'] = options['w'] || width

        // If a format has not been specified, detect webp support
        if (!options['fm'] && this.isWebpSupported) {
            options['fm'] = 'webp'
        }

        // Loop through option prop and build queryString
        Object.keys(options).map((option, i) => {
            return queryString +=  `${i < 1 ? '?' : '&'}${option}=${options[option]}`
        })

        // Modify the queryString for the LQIP image: replace the width param with a value 1/10 the fullsize
        const lqipQueryString = queryString.replace(`w=${ width }`, `w=${ Math.round(width * 0.1) }`)

        const styles = {
            figure: {
                position: 'relative',
                margin: 0
            },
            lqip: {
                width: '100%',
                filter: 'blur(5px)',
                opacity: 1,
                transition: 'all 0.5s ease-in'
            },
            fullsize: {
                position: 'absolute',
                top: '0px',
                left: '0px',
                transition: 'all 0.5s ease-in'
            }
        }

        // When the fullsize image is loaded, fade out the LQIP
        if (fullsizeLoaded) {
            styles.lqip.opacity = 0
        }

        const missingALt = 'ALT TEXT IS REQUIRED'

        return(
            // Return the CDN domain from the TueriProvider
            <TueriContext.Consumer>
                {({ domain }) => (
                    <figure
                        style={ styles.figure }
                        ref={this.imgRef}
                    >
                        {
                            // 
                            isInViewport && width > 0 ? (
                                <React.Fragment>

                                    {/* Load fullsize image in background */}
                                    <img 
                                        onLoad={ () => { this.setState({ fullsizeLoaded: true }) } }
                                        style={ styles.fullsize }
                                        src={`${ domain }/${ src }/${ kebabCase(alt || missingALt) }.${ ext }${ queryString }`}
                                        alt={ alt || missingALt }
                                    />

                                    {/* Load LQIP in foreground */}
                                    <img 
                                        onLoad={ () => { this.setState({ lqipLoaded: true }) } }
                                        style={ styles.lqip }
                                        src={`${ domain }/${ src }/${ kebabCase(alt || missingALt) }.${ ext }${ lqipQueryString }`} 
                                        alt={ alt || missingALt } 
                                    />
                                </React.Fragment>
                            ) : null
                        }            
                    </figure>
                )}

            </TueriContext.Consumer>
        )

    }
}

Img.propTypes = {
    src: PropTypes.string.isRequired,
    alt: PropTypes.string.isRequired,
    options: PropTypes.object,
    ext: PropTypes.string,
    buffer: PropTypes.number
}

export default Img

See it in action:

Try out a live demo on CodeSandbox:

_Originally published at Tueri.io_

There is a lot that goes into making a website responsive, and images are a major factor and can make or break your site. With that out of the way, let's dig in:

<img src="giraffe.jpg" />

Whoa! That's not quite right, let's fix that.

Percentage width images using CSS

By definition, a responsive site has no fixed width. We can account for this by setting our image width using percentages. A percentage width can be set on the image directly using inline CSS or set globally using a CSS style sheet.

<!-- Inline CSS -->
<img src="giraffe.jpg" style="max-width: 100%;" />

/* Global CSS style sheet */
img {
    max-width: 100%;
}

Our image set to 100% maximum width now looks like this. Feel free to resize your browser window and see the image width change automatically.

Awesome! Our images are now responsive, but let's not get too excited. CSS percentage widths have a major downside: This reading pane has a maximum width of 700 pixels and our image is 3742 pixels wide or 532% larger than what we need. It's also consuming 1.55 MB of bandwidth.

So the image is huge, what's the big deal?

On a standard ADSL internet connection it is going to take 2 seconds to download that single image.

I'm going to assume you have more than one image on your website. If every image takes 2 seconds to download, your site will be very slow and your search ranking will take a big hit.

How can we fix this problem?

Since we only need an image that is 700 pixels wide, let's pop open Photoshop and resize it.

That's better! Our image is now 700 pixels wide and weighs in at 264 KB with no loss of quality.

What about mobile devices?

Great question! On mobile devices, 700 pixels can be more than double what you need and 264 KB on is still slow on a mobile internet connection.

What if we could display different size images for different size devices?

Now you're thinking!

Different image sizes using the srcset attribute

Let's downsize our original image and save it as three versions of 700 pixels, 480 pixels and 360 pixels. We'll name them as follows:

• giraffe-small.jpg - 360px @ 101 KB
• giraffe-medium.jpg - 480px @ 151 KB
• giraffe-large.jpg - 700px @ 264 KB

We'll use the srcset attribute to tell the browser about our different image sizes. This tells the browser that we have three versions of this image in the sizes 360w, 480w and 700w. The "w" in this case is the same as "px".

<img 
    style="max-width: 100%;"
    srcset="giraffe-small.jpg 360w, giraffe-medium.jpg 480w, giraffe-large.jpg 700w"
/>

Some older browsers will ignore the srcset attribute. We can use the src attribute as a fallback for these browsers.

<img 
    style="max-width: 100%;"
    srcset="giraffe-small.jpg 360w, giraffe-medium.jpg 480w, giraffe-large.jpg 700w"
    src="giraffe-large.jpg"
/>

Great! Now we are saving bandwidth by delivering different images to different devices.

This goes without saying, but you know what this means right? You'll need to create a minimum of three versions of every image on your site. If you want to support hi-dpi or retina displays, you'll need even more variations. That is an incredible amount of time that none of us have. In addition, if you re-design your site at different breakpoints, you'll need to do this all over again.

At Tueri, we're developers too and recognize that your time is valuable. In the next section I'll show you how we solved this problem for you.

Real-time image processing with Tueri.io

Tueri.io is a real-time image processing platform. We store, process, and deliver your image perfectly sized to every device.

Here's what you do

1. Upload your image to Tueri.io
2. Change the image src to tueri-src
3. Include tueri.js in your code

<img tueri-src="https://cdn.tueri.io/274877906982/giraffe-family.jpg"/>
<script src="tueri.js"></script>

It's like magic!

Oh, and we also do:

• Low-quality image placeholders
• Image lazy-loading
• Image compression
• Image conversion

_Originally published at Tueri.io_