lbineau
1/4/2018 - 9:16 AM

Responsive images

Snippets from https://dev.opera.com/articles/responsive-images/#different-image-types-use-case

Before you start using responsive images in your design, you always have to answer the following four questions:

  • Do I want my image sizes to change depending on my responsive design rules?
  • Do I want to optimize for high-dpi screens?
  • Do I want to serve images with different mime types to browsers that support them?
  • Do I want to serve different art depending on certain contextual factors?
changing-image-sizes-and-high-dpi-images-and-different-image-types-and-art-direction.html
content_copyfile_download
<picture>
	<source
		media="(min-width: 1280px)"
		sizes="50vw"
		srcset="opera-fullshot-200.webp 200w,
				opera-fullshot-400.webp 400w,
				opera-fullshot-800.webp 800w,
				opera-fullshot-1200.webp 1200w,
				opera-fullshot-1600.webp 1600w,
				opera-fullshot-2000.webp 2000w"
		type="image/webp">
	<source
		sizes="(min-width: 640px) 60vw, 100vw"
		srcset="opera-closeup-200.webp 200w,
				opera-closeup-400.webp 400w,
				opera-closeup-800.webp 800w,
				opera-closeup-1200.webp 1200w,
				opera-closeup-1600.webp 1600w,
				opera-closeup-2000.webp 2000w"
		type="image/webp">
	<source
		media="(min-width: 1280px)"
		sizes="50vw"
		srcset="opera-fullshot-200.jpg 200w,
				opera-fullshot-400.jpg 400w,
				opera-fullshot-800.jpg 800w,
				opera-fullshot-1200.jpg 1200w,
				opera-fullshot-1600.jpg 1800w,
				opera-fullshot-2000.jpg 2000w">
	<img
		src="opera-closeup-400.jpg" alt="The Oslo Opera House"
		sizes="(min-width: 640px) 60vw, 100vw"
		srcset="opera-closeup-200.jpg 200w,
				opera-closeup-400.jpg 400w,
				opera-closeup-800.jpg 800w,
				opera-closeup-1200.jpg 1200w,
				opera-closeup-1600.jpg 1600w,
				opera-closeup-2000.jpg 2000w">
</picture>
changing-image-sizes-and-high-dpi-images-and-different-image-types.html
content_copyfile_download
<picture>
	<source
		sizes="(min-width: 640px) 60vw, 100vw"
		srcset="opera-200.webp 200w,
				opera-400.webp 400w,
				opera-800.webp 800w,
				opera-1200.webp 1200w,
				opera-1600.webp 1600w,
				opera-2000.webp 2000w"
		type="image/webp">
	<img
		src="opera-400.jpg" alt="The Oslo Opera House"
		sizes="(min-width: 640px) 60vw, 100vw"
		srcset="opera-200.jpg 200w,
				opera-400.jpg 400w,
				opera-800.jpg 800w,
				opera-1200.jpg 1200w,
				opera-1600.jpg 1600w,
				opera-2000.jpg 2000w">
</picture>
changing-image-sizes-and-high-DPI-images-and-art-direction.html
content_copyfile_download
<picture>
	<source
		media="(min-width: 1280px)"
		sizes="50vw"
		srcset="opera-fullshot-200.jpg 200w,
				opera-fullshot-400.jpg 400w,
				opera-fullshot-800.jpg 800w,
				opera-fullshot-1200.jpg 1200w,
				opera-fullshot-1600.jpg 1600w,
				opera-fullshot-2000.jpg 2000w">
	<img
		src="opera-closeup-400.jpg" alt="The Oslo Opera House"
		sizes="(min-width: 640px) 60vw, 100vw"
		srcset="opera-closeup-200.jpg 200w,
				opera-closeup-400.jpg 400w,
				opera-closeup-800.jpg 800w,
				opera-closeup-1200.jpg 1200w,
				opera-closeup-1600.jpg 1600w,
				opera-closeup-2000.jpg 2000w">
</picture>
changing-image-sizes-and-high-dpi-images.html
content_copyfile_download
<img
	src="opera-400.jpg" alt="The Oslo Opera House"
	sizes="(min-width: 640px) 60vw, 100vw"
	srcset="opera-200.jpg 200w,
			opera-400.jpg 400w,
			opera-800.jpg 800w,
			opera-1200.jpg 1200w,
			opera-1600.jpg 1600w,
			opera-2000.jpg 2000w">
changing-image-sizes-and-different-image-types-and-art-direction.html
content_copyfile_download
<picture>
	<source
		media="(min-width: 1280px)"
		sizes="50vw"
		srcset="opera-fullshot-200.webp 200w,
				opera-fullshot-400.webp 400w,
				opera-fullshot-800.webp 800w,
				opera-fullshot-1200.webp 1200w"
		type="image/webp">
	<source
		sizes="(min-width: 640px) 60vw, 100vw"
		srcset="opera-closeup-200.webp 200w,
				opera-closeup-400.webp 400w,
				opera-closeup-800.webp 800w,
				opera-closeup-1200.webp 1200w"
		type="image/webp">
	<source
		media="(min-width: 1280px)"
		sizes="50vw"
		srcset="opera-fullshot-200.jpg 200w,
				opera-fullshot-400.jpg 400w,
				opera-fullshot-800.jpg 800w,
				opera-fullshot-1200.jpg 1200w">
	<img
		src="opera-closeup-400.jpg" alt="The Oslo Opera House"
		sizes="(min-width: 640px) 60vw, 100vw"
		srcset="opera-closeup-200.jpg 200w,
				opera-closeup-400.jpg 400w,
				opera-closeup-800.jpg 800w,
				opera-closeup-1200.jpg 1200w">
</picture>
changing-image-sizes-different-image-types
content_copyfile_download
<picture>
	<source
		sizes="(min-width: 640px) 60vw, 100vw"
		srcset="opera-200.webp 200w,
				opera-400.webp 400w,
				opera-800.webp 800w,
				opera-1200.webp 1200w"
		type="image/webp">
	<img
		src="opera-400.jpg" alt="The Oslo Opera House"
		sizes="(min-width: 640px) 60vw, 100vw"
		srcset="opera-200.jpg 200w,
				opera-400.jpg 400w,
				opera-800.jpg 800w,
				opera-1200.jpg 1200w">
</picture>
changing-image-sizes-and-art-direction.html
content_copyfile_download
<picture>
	<source
		media="(min-width: 1280px)"
		sizes="50vw"
		srcset="opera-fullshot-200.jpg 200w,
				opera-fullshot-400.jpg 400w,
				opera-fullshot-800.jpg 800w,
				opera-fullshot-1200.jpg 1200w">
	<img
		src="opera-closeup-400.jpg" alt="The Oslo Opera House"
		sizes="(min-width: 640px) 60vw, 100vw"
		srcset="opera-closeup-200.jpg 200w,
				opera-closeup-400.jpg 400w,
				opera-closeup-800.jpg 800w,
				opera-closeup-1200.jpg 1200w">
</picture>
changing-image-sizes.html
content_copyfile_download
<img
	src="opera-400.jpg" alt="The Oslo Opera House"
	sizes="(min-width: 640px) 60vw, 100vw"
	srcset="opera-200.jpg 200w,
			opera-400.jpg 400w,
			opera-800.jpg 800w,
			opera-1200.jpg 1200w">
high-dpi-images-and-different-image-types-and-art-direction.html
content_copyfile_download
<picture>
	<source
		media="(min-width: 1024px)"
		srcset="opera-fullshot-1x.webp 1x,
				opera-fullshot-2x.webp 2x,
				opera-fullshot-3x.webp 3x"
		type="image/webp">
	<source
		media="(min-width: 1024px)"
		srcset="opera-fullshot-1x.jpg 1x,
				opera-fullshot-2x.jpg 2x,
				opera-fullshot-3x.jpg 3x">
	<source
		srcset="opera-closeup-1x.webp 1x,
				opera-closeup-2x.webp 2x,
				opera-closeup-3x.webp 3x"
		type="image/webp">
	<img
		src="opera-closeup-1x.jpg" alt="The Oslo Opera House"
		srcset="opera-closeup-2x.jpg 2x,
				opera-closeup-3x.jpg 3x">
</picture>
high-dpi-images-and-different-types.html
content_copyfile_download
<picture>
	<source
		srcset="opera-1x.webp 1x,
				opera-2x.webp 2x,
				opera-3x.webp 3x"
		type="image/webp">
	<img
		src="opera-1x.jpg" alt="The Oslo Opera House"
		srcset="opera-2x.jpg 2x,
				opera-3x.jpg 3x">
</picture>
high-dpi-images-and-art-direction.html
content_copyfile_download
<picture>
	<source
		media="(min-width: 1024px)"
		srcset="opera-fullshot-1x.jpg 1x,
				opera-fullshot-2x.jpg 2x,
				opera-fullshot-3x.jpg 3x">
	<img
		src="opera-closeup-1x.jpg" alt="The Oslo Opera House"
		srcset="opera-closeup-2x.jpg 2x,
				opera-closeup-3x.jpg 3x">
</picture>
high-dpi-images.html
content_copyfile_download
<img
	src="opera-1x.jpg" alt="The Oslo Opera House"
	srcset="opera-2x.jpg 2x, opera-3x.jpg 3x">
different-image-types-and-art-direction.html
content_copyfile_download
<picture>
	<source
		media="(min-width: 1024px)"
		srcset="opera-fullshot.webp"
		type="image/webp">
	<source
		media="(min-width: 1024px)"
		srcset="opera-fullshot.jpg">
	<source
		srcset="opera-closeup.webp"
		type="image/webp">
	<img
		src="opera-closeup.jpg" alt="The Oslo Opera House">
</picture>
different-image-type.html
content_copyfile_download
<picture>
	<source
		srcset="opera.webp"
		type="image/webp">
	<img
		src="opera.jpg" alt="The Oslo Opera House">
</picture>
art-direction.html
content_copyfile_download
<h1>Art direction use case</h1>
<picture>
	<source
		media="(min-width: 1024px)"
		srcset="opera-fullshot.jpg">
	<img
		src="opera-closeup.jpg" alt="The Oslo Opera House">
</picture>