04 Фев Адаптивные изображения
Адаптивные изображения с точками перехода.
Одна из основных задач отзывчивых интерфейсов – выбор разрешений графических файлов, которые соответствуют размерам дисплея. Под различные разрешения экранов создается сразу несколько изображений вместо одного. Таким образом, браузер автоматически выбирает одно из них в зависимости от размера окна.
Ранее веб-дизайнеры создавали несколько изображений, разрешение которых выбиралось вручную и фактически наудачу. Но у нас есть неплохая новость – появился открытый ресурс, позволяющий автоматически генерировать размеры изображений.
Данный ресурс называется Responsive Image Breakpoints Generator. В дословном переводе — генератор контрольных точек изображений. Что это означает? Контрольная точка или точка перехода (breakpoint) – разрешение дисплея, при котором меняется разрешение графического файла.
Вначале мы расскажем, для чего все это нужно.
Современные сайты безусловно должны быть отзывчивыми. Это означает, что все элементы интерфейса должны подстраиваться под размеры дисплея и его разрешение. В том числе и изображения, присутствующие на сайте. Но даже на современных сайтах данная опция очень часто реализуется с ошибками. Вот две самые распространенные из них:
Максимальное разрешение изображений для всех устройств.
Владельцы сайтов, как правило, желают видеть качественные изображения на своих ресурсах. Современные мониторы с высоким разрешением позволяют видеть множество деталей на фотографиях – и это здорово. Но разработчики зачастую предусматривают только одно изображение для всех устройств.
В результате сайт смотрится отлично, особенно на дисплеях больших размеров. Но при открытии на мобильном устройстве всех деталей изображений все равно не будет видно. И мы получаем огромный рост трафика без какой-либо необходимости.
Если же мы открываем сайт со смартфона вне зоны действия скоростных сетей, есть вероятность того, что страница просто не загрузится.
Приведем пример:
Изображение в хедере нашего сайта имеет разрешение 1920×495 точек при размере файла 95 КБ (безусловно, после оптимизации). Для дисплеев шириной 1024 пикселя оно имеет разрешение 1024×264 точки и размер 22 КБ – а это 87% сэкономленного трафика. А изображение для мобильных телефонов весит всего 4 КБ – 96% экономии!
Теперь представьте, что изображение существует в единственном экземпляре и весит 1 МБ – как для мониторов ПК, так и для мобильных. В таком случае у пользователя смартфона будут веские причины покинуть ваш сайт из за долгой загрузки.
Поэтому обязательно нужны сжатые копии изображений для различных разрешений дисплея, но здесь кроется вторая частая ошибка:
Слишком много версий одного изображения.
Веб-разработчики, тщательно следящие за скоростной оптимизацией сайта, всегда создают несколько копий одного изображения. Для этого существуют как специальные сервисы, так и встроенные в CMS оптимизаторы – такая функция есть в WordPress 4.4.
Однако следует помнить, что существует огромное количество моделей мобильных телефонов, планшетов и настольных мониторов. Если оптимизировать каждое изображение под размер каждого дисплея, мы будем иметь десятки или даже сотни их копий. В результате – увеличение нагрузки на сервер.
Как найти равновесие между количеством файлов и их общим размером?
Вывод один – нужно правильно выбрать точки перехода. Во-первых, все зависит от размера исходного файла. Если при ширине изображения 1920 точек оно весит 300 КБ, а при ширине 1200 – 280 КБ, вам не обязательно что-то менять. Если же при уменьшении размера картинка существенно теряет в весе, необходимо выбрать точку перехода между 1200 px и 1900 px.
Различные изображения требуют разное количество контрольных точек. Это зависит от формата файла, цветовой модели, глубины цвета и т.д. – все это существенно осложняет задачу веб-дизайнерам.
Поэтому и появился такой сервис, как Image Breakpoint Generator. С его помощью вы можете выбрать только те изображения, разница в весе которых для вас существенна. Вы также можете изначально указать максимальное количество изображений, разницу между точками перехода в КБ, минимальное и максимальное разрешение и соотношение сторон.
Дизайн некоторых интерфейсов также подразумевает обрезку фотографий при уменьшении размера дисплея (как фон хедера нашего сайта). Реализовать это также поможет данный сервис.
Все изображения вы можете сохранить в облаке или загрузить в ZIP-архиве, а также скопировать автоматически сгенерирированный для вас HTML-код.
О других функциях этого сервиса вы можете узнать из оригинальной статьи и на сайте responsivebreakpoints.com