От автора: эта статья посвящена наиболее распространенному варианту использования адаптивного изображения: переключению разрешения.
Спецификация адаптивных изображений является фантастической и охватывает множество вариантов использования, но, по моему опыту, в большинстве случаев вам понадобится понять только один из них: предоставление копии одного и того же изображения разного размера в зависимости от ширины области просмотра пользователя. Мы называем это переключение разрешения, и вы можете сделать это с помощью атрибутов srcset и sizes.
Логика быстрого отображения изображения довольно сложна. Она включает в себя определение размера изображения, а также понимание того, использует ли пользователь дисплей с высоким разрешением. К счастью, браузер оснащен лучше, чем мы, чтобы справиться с этой логикой. Все, что нам нужно сделать, это предоставить ему несколько подсказок. Мы будем использовать атрибут srcset, чтобы предоставить список ресурсов изображения на выбор, и атрибут sizes, чтобы сообщить браузеру, насколько большое изображение будет отображаться в различных контрольных точках.
О, и не беспокойтесь о поддержке браузерами! Мало того, что эти атрибуты имеют отличную поддержку по всем направлениям, мы также будем предоставлять запасной вариант для старых браузеров, таких как IE11.
Атрибут srcset
Атрибут srcset предоставляет браузеру множество источников на выбор, а также размер каждого из этих источников.
Это разделенный запятыми список URL-адресов с шириной для каждого. Каждый элемент в списке выглядит так: «image.jpg 1000w,», что сообщает браузеру, что файл image.jpg имеет ширину 1000 пикселей.
Предоставляя таким образом набор графических ресурсов, вы говорите браузеру: «Я даю тебе список изображений и надеюсь, что ты выберешь лучший».
Браузер выберет наилучшее изображение на основе сложного набора критериев, в том числе того, какой размер изображения отображается пользователю при его текущем размере окна просмотра, и работает ли пользователь на дисплее с высоким разрешением.
Он достаточно умен, чтобы знать, что на экране настольного компьютера с низким разрешением, если изображение будет отображаться с шириной 800 пикселей, ему следует выбрать ресурс из списка шириной не менее 800 пикселей.
Также ему будет известно, что если изображение будет отображаться с шириной 320 пикселей на retina-экране, ему следует выбрать ресурс шириной не менее 640 пикселей. Так что вам не придется беспокоиться о 1x и 2x ресурсах. Все, что вам нужно сделать, это предоставить хороший набор изображений, а браузер сделает все остальное.
Не уверены, какой размер изображения предоставить? Читайте дальше!
Атрибут sizes
Атрибут srcset работает отлично, но когда браузер читает HTML, он не знает, использовали ли вы CSS , чтобы масштабировать изображение, например, на 50% от ширины экрана.
Вот когда в игру вступает атрибут sizes. С его помощью мы даем браузеру подсказку о том, как будет отображаться изображение после применения CSS.
Атрибут sizes представляет собой список разделенных запятыми медиа условий с шириной для каждого. Каждый элемент в списке выглядит следующим образом: «(min-width: 1023px) 780px,», это говорит браузеру, что, когда область просмотра имеет ширину 1023 пикселя (или шире), изображение будет иметь ширину ровно 780 пикселей.
Вы также можете использовать относительную ширину, например, 50vw, при которой изображение будет составлять 50 процентов от ширины области просмотра. Вы даже можете использовать calc для более сложных ситуаций. Например, calc(50vw — 2rem) говорит, что изображение будет составлять 50 процентов от ширины области просмотра, минус 2rem, возможно, чтобы учесть некоторые отступы или границы.
Для последнего элемента в списке не должно указываться условие. Если вы указали ширину и не указали условие, оно будет считаться шириной по умолчанию, которая будет использоваться, если другие условия не удовлетворяются.
Браузер будет проходить вниз по этому списку и применять первый элемент, который соответствует области просмотра. Так, если задан атрибут sizes:
(min-width: 1023px) 780px, (min-width: 675px) 620px, 100vw
Если пользователь работает на большом настольном дисплее, браузер сопоставляет первый элемент в списке и знает, что изображение будет иметь ширину 780 пикселей.
Стандартный iPad в вертикальной ориентации имеет ширину 768 пикселей, поэтому браузер пропускает первый элемент, но выбирает второй, что говорит о том, что изображение будет иметь ширину 620 пикселей.
Пользователь на обычном мобильном устройстве не будет соответствовать ни одному из первых двух условий, что говорит о том, что изображение будет иметь 100% ширины области просмотра.
Конечно, это всего лишь примеры, в реальном мире все сложнее. Пользователь с большим дисплеем, но при узком окне просмотра получит уменьшенное изображение. Пользователь на iPad Pro может получить большое изображение при удерживании планшета в альбомной ориентации, среднее изображение при удерживании в портретном режиме или маленькое изображение при использовании браузера в режиме разделенного экрана. Некоторые смартфоны могут соответствовать второму правилу при альбомной ориентации. В этом прелесть системы — вам не нужно думать обо всех этих форм-факторах. Вам нужно только учитывать, какой размер изображения отображать на основе ширины области просмотра.
Не уверены, какие значения объявлять? Читайте дальше!
Атрибут src
Возможно, вы заметили, что все приведенные мною примеры все равно содержат атрибут src, и задаетесь вопросом, нужен ли он по-прежнему. Ответ таков: если вы укажете атрибут srcset, современные браузеры заменят значение src в DOM изображением, выбранным из srcset. Поэтому современные браузеры игнорируют значение, указанное в атрибуте src в пользу srcset.
Но src все еще важен для браузеров, которые не поддерживают адаптивные изображения. Эти старые браузеры будут игнорировать атрибуты srcset и sizes, потому что они не могут их понять. Однако они понимают атрибут src, поэтому вы можете предоставить для них одно изображение в качестве запасного варианта. Я обычно выбираю самое маленькое изображение, которое все равно будет хорошо смотреться на настольном не-retina мониторе.
Вопросы и ответы
Как я должен генерировать ресурсы изображения?
Вы можете создавать изображения несколькими способами: вручную, с помощью адаптивного генератора изображений или с помощью CDN с изображениями.
Чтобы создать изображения вручную, откройте исходное изображение в Photoshop (или в любом другом редакторе) и экспортируйте его во все нужные размеры.
Это может занять немного времени, поэтому вы можете использовать инструмент для генерации изображений. Несколько инструментов позволяют это сделать, но мне больше всего нравится Responsive Image Breakpoints Generator от Cloudinary. Вы загружаете изображение, и он автоматически генерирует различные размеры. Вы можете настроить параметры, чтобы контролировать, сколько изображений он генерирует. Затем вы можете скачать изображения для использования.
Другой вариант — разместить изображения в CDN, например, в Cloudinary или imgix. При использовании подобного сервиса вы загружаете в CDN изображение с самым высоким разрешением, а затем можете запросить версии изображения с измененным размером, используя параметры URL. Вам не нужно выполнять какую-либо работу, вы просто сообщаете CDN, в каком размере хотите отображать изображение.
Какие размеры изображения я должен предоставить?
Это важный вопрос! Если вы предоставляете слишком много ресурсов, вы тратите свое время и энергию на их создание. Если вы предоставляете слишком мало, вы заставляете своих пользователей загружать изображения большего размера, чем им нужно.
Если вы имеете дело с одним изображением и можете предоставить пользовательскую разметку для этого изображения, вы можете использовать Responsive Image Breakpoints Generator от Cloudinary. Он автоматически проверит изображение и определит, какой оптимальный набор ресурсов необходим для обеспечения наилучшего баланса между размером файла и разрешением. После этого он не только генерирует файлы, но он также указывает атрибуты srcset и sizes.
Если вы работаете в CMS или веб-приложении, когда вы не знаете, какое точно изображение будет отображаться в слоте, я рекомендую выбрать стандартный массив размеров изображения. В прошлом, я использовал 320w, 640w, 960w, 1280w, 1920w, и 2560w, потому что это круглые числа, которые следуют в логической последовательности (кратные 320). Этот набор охватывает размеры от мобильного до настольного.
Однако стандартный массив размеров всегда будет менее эффективным, чем настроенный. В этом случае, хотя числа логичны, размер файла постепенно увеличивается, потому что когда вы удваиваете ширину, вы в четыре раза увеличиваете количество пикселей. В результате, если вам нужно выбрать массив стандартного размера, вы можете рассмотреть тот, у которого меньше ресурсов при небольших размерах и больше при больших размерах.
Если вы размещаете изображения в Cloudinary, вы можете воспользоваться другим подходом, который заключается в использовании API Cloudinary для запуска Генератора адаптивных точек при их загрузке! Тогда вы можете принять ответ от API для динамического заполнения атрибутов srcset и sizes.
Какие значения sizes я должен объявить?
Вам нужно определить, какие размеры добавить в атрибут sizes, посмотрев на CSS, чтобы определить, насколько широко изображение отображается в различных контрольных точках. Иногда это определяется шириной самого изображения:
img { width 320px;
} @media screen and (min-width: 37.5em) { width: 640px;
}В этом случае изображение имеет два фиксированных размера, которые могут быть отражены непосредственно в атрибуте sizes:
<img alt="Ferrari" src="ferrari.jpg" srcset="ferrari-s.jpg 320w, ferrari-m.jpg 960w, ferrari-l.jpg 1920w" sizes="(min-width: 37.5em) 640px, 320px">
Тем не менее, вы часто можете столкнуться с ситуацией, когда изображение является гибким и наследует ширину от контейнера:
img { height: auto; width: 100%;
} .container { padding: 1rem; width: 100%;
} @media screen and (min-width: 37.5em) { .container { width: 50%; }
}В этом примере (при условии, что .container — это единственный элемент, который влияет на ширину изображения), вы можете применить к изображению ширину контейнера. Обратите внимание, что мы также вычитаем из ширины контейнера ширину отступа. Вам может это потребоваться, или нет, в зависимости от того, насколько отступ влияет на общую ширину.
<img alt="Ferrari" src="ferrari.jpg" srcset="ferrari-s.jpg 320w, ferrari-m.jpg 960w, ferrari-l.jpg 1920w" sizes="(min-width: 37.5em) calc(50vw - 2rem), calc(100vw - 2rem)">
Как вы можете видеть, это будет сильно зависеть от конкретного макета. Я обычно работаю наоборот, проверяя изображение в devtools браузера, чтобы определить, какие контрольные точки влияют на ширину изображения.
Как я могу проверить, что я все сделал правильно?
Как вы можете себе представить, проверка правильности написания кода для адаптивных изображений может быть сложной и трудоемкой. К счастью, есть инструмент, облегчающий эту задачу, который называется Responsive Image Linter.
Это букмарклет, который добавляется в браузер и используется на сайте. Когда вы запускаете его, он автоматически сканирует страницу с различными размерами области просмотра и плотностью пикселей, чтобы проверить изображения.
Затем он предоставит вам отчет, показывающий каждое изображение на странице, а также, правильно ли они меняют размеры. Если это не так, он укажет вам, что не так, и даже предложит, как это исправить.
Заключение
Как вы можете видеть, комбинация атрибутов srcset и sizes дает вам много преимуществ. Добавляя два атрибута, вы говорите браузеру: «При таком размере экрана это изображение будет настолько широким, поэтому, пожалуйста, выбери лучший вариант из этого списка изображений».
Автор: Scott Vandehey
Источник: https://cloudfour.com
Редакция: Команда webformyself.