Modern Responsive Images

Objectives are to support different kinds of...

• Formats (WEBP and JPG)
• Browser Sizes (<768px wide, 768-1200px, 1200px+)
• Resolutions (1x, 2x, 3x)
• Orientations (Horizontal, Square, Vertical)

Technique #1 - art directing tall, wide and square versions of a picture

<picture> w/ srcset, pixel densities

Test image - resize the browser to see this image adapt:

The html:

                
                    <picture>
        
                        <!-- Images for wide screens -->
                        <source media="(min-width: 1200px)"
                                srcset="
                                    https://placehold.co/1200x800/black/white/webp?text=webp+1x+@1200+x+800 1x,
                                    https://placehold.co/1200x800@2x/black/white/webp?text=webp+2x+@1200+x+800 2x,
                                    https://placehold.co/1200x800@3x/black/white/webp?text=webp+3x+@1200+x+800 3x
                                " >
                        <source media="(min-width: 1200px)"
                                srcset="
                                    https://placehold.co/1200x800/black/white/jpeg?text=jpeg+1x+@1200+x+800 1x,
                                    https://placehold.co/1200x800@2x/black/white/jpeg?text=jpeg+2x+@1200+x+800 2x,
                                    https://placehold.co/1200x800@3x/black/white/jpeg?text=jpeg+3x+@1200+x+800 3x
                                " >
                        
                        <!-- Images for medium screens -->
                        <source media="(min-width: 768px)"
                                srcset="
                                    https://placehold.co/768x512/black/white/webp?text=webp+1x+@768+x+512 1x,
                                    https://placehold.co/768x512@2x/black/white/webp?text=webp+2x+@768+x+512 2x,
                                    https://placehold.co/768x512@3x/black/white/webp?text=webp+3x+@768+x+512 3x
                                " >
                        <source media="(min-width: 768px)"
                                srcset="
                                    https://placehold.co/768x512/black/white/jpeg?text=jpeg+1x+@768+x+512 1x,
                                    https://placehold.co/768x512@2x/black/white/jpeg?text=jpeg+2x+@768+x+512 2x,
                                    https://placehold.co/768x512@3x/black/white/jpeg?text=jpeg+3x+@768+x+512 3x
                                " >
        
                        <!-- NOTE: CAN CROP IMAGES TO BE VERTICAL OR SQUARE ON MOBILE, DEPENDING ON SUBJECT -->
                        
                        <!-- Images for small screens and default -->
                        <source srcset="
                                    https://placehold.co/360x360/black/white/webp?text=webp+1x+@360+x+360 1x,
                                    https://placehold.co/360x360@2x/black/white/webp?text=webp+2x+@360+x+360 2x,
                                    https://placehold.co/360x360@3x/black/white/webp?text=webp+3x+@360+x+360 3x
                                " >
                        <source srcset="
                                    https://placehold.co/360x360/black/white/jpeg?text=jpeg+1x+@360+x+360 1x,
                                    https://placehold.co/360x360@2x/black/white/jpeg?text=jpeg+2x+@360+x+360 2x,
                                    https://placehold.co/360x360@3x/black/white/jpeg?text=jpeg+3x+@360+x+360 3x
                                " >
                        
                        <!-- Fallback for browsers that do not support <picture> or the above formats -->
                        <img src="https://placehold.co/360x360/jpg" alt="Descriptive text for the image" width="360" height="360">

                    </picture>
                
            

Technique #2 - a single square image with different widths

<img> w/ widths and auto-sizing for lazy load

Test image - resize the browser to see this image adapt:

See this animated GIF for an example in the wild of where I use this.

Placeholder pictures courtesy of Placehold.co