Frontender Magazine

Отзывчивые изображения: примеры использования и документированные снипеты, чтобы вы могли начать их использовать

Вступление

Наконец-то по-настоящему отзывчивые изображения стают реальностью веба -- в чистом HTML, без всяких замысловатых хаков. Элемент <picture> и парочка новых атрибутов элемента <img> уже поддерживаются в Chromium 37 и идут в комплекте в Chromium 38 (скоро ожидается то же в Opera), в Firefox Nightly и имплементируются в WebKit (нужно будет ещё посмотреть, добавит ли их Apple в следующую версию Safari).

Новый элемент <picture> может быть длинным и запутанным потому что он решает множество случаев использования. Для того, чтобы помочь удовлетворить ваши нужды в синтаксисе отзывчивых изображений, мы подготовили эту полную примеров статью.

Четыре вопроса

Прежде чем вы начали использовать отзывчивые изображения в вашей разработке, вам нужно ответить на следующие четыре вопроса:

В приведенных ниже примерах мы осветим эти вопросы используя ключевые слова размер, dpi, mime and содержимое соответственно и далее для каждой комбинации ответов мы покажем кусок примерного кода с коротким описанием. При создании этих примеров, я держал в голове этот ночной снимок оперного зала Осло —- он может оказаться полезным для вас.

Ночной снимок оперного зала Осло

Ночной снимок оперного зала Осло

Вещи, которые нужно запомнить

Перед тем, как вы взглянете на различные примеры ниже, нужно запомнить несколько следующих вещей:

Выдача разного содержимого

размеры dpi mime содержимое

<picture>
    <source
        media="(min-width: 1024px)"
        srcset="opera-fullshot.jpg">
    <img
        src="opera-closeup.jpg" alt="The Oslo Opera House">
</picture>

Для браузеров с шириной окна в 1024 CSS пиксела и шире используется полноэкранное фото, меньшие окна браузера получат приближенное фото.

Использование различных типов изображений

размеры dpi mime содержимое

<picture>
    <source
        srcset="opera.webp"
        type="image/webp">
    <img
        src="opera.jpg" alt="The Oslo Opera House">
</picture>

Браузеры, которые поддерживают WebP получают WebP изображения; остальные получают JPG.

Различные типы изображений и разное содержимое

размеры dpi mime содержимое

<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>

Для окон браузеров с шириной в 1024 CSS пиксела и шире будет использоваться полноэкранное фото; меньшие окна браузера получат приближённое фото. Это фото будет выдаваться в WebP формате для браузеров, которые его поддерживают; другие будут получать в формате JPG.

Изображения с высоким разрешением

размеры dpi mime содержимое

<img
    src="opera-1x.jpg" alt="The Oslo Opera House"
    srcset="opera-2x.jpg 2x, opera-3x.jpg 3x">

Браузеры на устройствах с высоким разрешением получают изображения высокого разрешения; другие браузеры получают обычное изображение.

Изображения с высоким разрешением и разным содержимым

размеры dpi mime содержимое

<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>

Для окон браузеров с шириной 1024 CSS пикселов и шире используется полноэкранное изображение; меньшие окна браузера используют приближенные фото. В дополнение, эти фото поставляются как изображения с высоким разрешением для браузеров на устройствах с экранами высокого разрешения; другие браузеры получат обычное изображение.

Изображения высокого разрешения и различные типы изображений

размеры dpi mime содержимое

<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>

Браузеры на устройствах с высоким разрешением получают в два или даже в три раза большее количество пикселей; другие браузеры получают обычное изображения. Эти фото выдаются в WebP формате для поддерживающих его браузеров; остальные браузеры получают JPG.

Изображения с высоким разрешением, различные типы изображений и различное содержимое

размеры dpi mime содержимое

<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>

Для окон браузеров с шириной в 1024 CSS пиксела и шире используется полноэкранное изображение; меньшие окна браузера получают приближенное фото. В дополнение, эти фото выдаются в высоком разрешении для браузеров на устройствах с экранами высокого разрешения; остальные браузеры получают обычное изображение. Эти фото выдаются в WebP формате для поддерживающих его браузеров; остальные браузеры получают JPG.

Смена размеров изображений

размеры dpi mime содержимое

<img
    src="opera-fallback.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">

Для окон браузеров с шириной в 640 CSS пикселов и шире используется фото с шириной 60% области просмотра; для браузеров с меньшей шириной окна используется фото равное полной ширине области просмотра. Браузер выбирает оптимальное изображение из выборки изображений с шириной в 200px, 400px, 800px и 1200px, принимая во внимание ширину изображения и разрешение экрана.

Смена размеров изображения и разное содержимое

размеры dpi mime содержимое

<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-fallback.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>

Для окон браузеров с шириной в 1280 CSS пикселов и шире используется полноэкранное изображение с шириной просмотра в 50%; для браузеров с шириной в 640-1279 CSS пикселов используется фото с 60% ширины области просмотра; для меньших окон браузера используется фото равное полной ширине области просмотра. В каждом случае браузер берёт оптимальное изображение из выборки с шириной в 200px, 400px, 800px и 1200px, принимая во внимание ширину и разрешение экрана устройства.

Смена размеров изображения и различные типы изображения

размеры dpi mime содержимое

<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-fallback.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>

Для окон браузеров с шириной в 640 CSS пикселов и шире используется полноэкранное изображение с шириной 60% от ширины области просмотра; для меньших окон браузера используется фото равное полной ширине области просмотра. Браузер берёт оптимальное изображение из выборки изображений с шириной 200px, 400px, 800px and 1200px, принимая во внимание ширину и разрешение экрана устройства. Эти фото выдаются в WebP формате для поддерживающих его браузеров; остальные браузеры получают JPG.

Смена размеров изображения, различные типы изображения и разное содержимое

размеры dpi mime содержимое

<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-fallback.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>

Для окон браузеров с шириной в 1280 CSS пикселов и шире используется полноэкранное фото с шириной 50% области просмотра; для окон браузеров с шириной в 640-1279 CSS пикселов используется фото с шириной в 60% области просмотра; для менее широких окон браузеров используется фото с шириной равной полной области просмотра. В каждом случае браузер выбирает оптимальное изображение из набора изображений с шириной в 200px, 400px, 800px и 1200px, принимая во внимание ширину и разрешение экрана. Эти фото выдаются в WebP формате для поддерживающих его браузеров; остальные браузеры получают JPG.

Смена размеров изображения и изображения высокого разрешения

размеры dpi mime содержимое

<img
    src="opera-fallback.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">

Для окон браузеров с шириной в 640 CSS пикселов и шире используется полноэкранное фото с шириной 60% области просмотра; для менее широких окон браузеров используется фото с шириной равной полной области просмотра. Браузер выбирает оптимальное изображение из набора изображений с шириной в 200px, 400px, 800px, 1200px, 1600px и 2000px, принимая во внимание ширину и разрешение экрана.

Смена размеров изображения, изображения высокого разрешения и разное содержимое

размеры dpi mime содержимое

<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-fallback.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>

Для окон браузеров с шириной в 1280 CSS пикселов и шире используется полноэкранное фото с шириной 50% области просмотра; для окон браузеров с шириной в 640-1279 CSS пикселов используется фото с шириной в 60% области просмотра; для менее широких окон браузеров используется фото с шириной равной полной области просмотра. В каждом случае браузер выбирает оптимальное изображение из набора изображений с шириной в 200px, 400px, 800px, 1200px, 1600px и 2000px, принимая во внимание ширину и разрешение экрана.

Смена размеров изображения, изображения высокого разрешения и различные типы изображения

размеры dpi mime содержимое

<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-fallback.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>

Для окон браузеров с шириной в 640 CSS пикселов и шире используется полноэкранное фото с шириной 60% области просмотра; для менее широких окон браузеров используется фото с шириной равной полной области просмотра. В каждом случае браузер выбирает оптимальное изображение из набора изображений с шириной в 200px, 400px, 800px, 1200px, 1600px и 2000px, принимая во внимание ширину и разрешение экрана. Эти фото выдаются в WebP формате для поддерживающих его браузеров; остальные браузеры получают JPG.

Смена размеров изображения, изображения высокого разрешения, различные типы изображения и разное содержимое

размеры dpi mime содержимое

<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-fallback.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>

Для окон браузеров с шириной в 1280 CSS пикселов и шире используется полноэкранное фото с шириной 50% области просмотра; для окон браузеров с шириной в 640-1279 CSS пикселов используется фото с шириной в 60% области просмотра; для менее широких окон браузеров используется фото с шириной равной полной области просмотра. В каждом случае браузер выбирает оптимальное изображение из набора изображений с шириной в 200px, 400px, 800px, 1200px, 1600px и 2000px, принимая во внимание ширину и разрешение экрана. Эти фото выдаются в WebP формате для поддерживающих его браузеров; остальные браузеры получают JPG.

Есть о чём задуматься!

Не переживайте, если вы не поняли это полностью! Скоро мы опубликуем полноценный урок по <picture> и отзывчивым изображениям. В это время наслаждайтесь подготовкой к улучшению линии пропуска ваших босса и пользователей и повышением производительности сайта.

Если вы заметили ошибку, вы всегда можете отредактировать статью, создать issue или просто написать об этом Антону Немцеву в skype ravencry.

Andreas Bovens
Автор:
Andreas Bovens
GitHub:
andreasbovens
Twitter:
@andreasbovens
Виктор Матушевский
Переводчик:
Виктор Матушевский
Сaйт:
MODX Revolution
GitHub:
Viktorminator
Twitter:
@viktorminator