А ваши картинки крадут время?
Загружать большое изображение на мобильный телефон пользователя = проявить к нему неуважение. Как решить проблему неуместных картинок на вашем сайте.
Чем больше устройств с доступом в интернет появляется на рынке, тем больше разработчики озабочены тем, чтобы сайты открывались везде и всегда хорошо выглядели.
В далеком(далеком ли?) прошлом для мобильных сайтов разрабатывалась отдельная, мобильная, версия.
Сейчас все чаще отдается предпочтение адаптивным или отзывчивым интерфейсам.
Действительно круто создать одну разметку и написать стили один раз, предусмотрев все нужные разрешения.
В этой прекрасной сказке есть один отрицательный герой — картинки.
Предположим, на вашем чудесном сайте есть hero image — большой и красивый баннер, привлекающий к себе взгляды посетителей. На компьютере сайт грузится быстро, баннер выполняет свою продающую роль, интерфейс выглядит отлично.
Чтобы картинка адаптировалась под разные экраны вы делаете что-то вроде:
See the Pen Hero image by Alena (@solarrust) on CodePen.
Вес нашей картинки 110 КБ, размеры картинки — 960×539. Она восхитительно смотрится.
Но что произойдет, если ваш сайт открыть, например, на телефоне? Через мобильный интернет? В области?
Чтобы загрузить эту картинку через 3G в Питере, потребуется 3,34 сек. Три с половиной секунды только на картинку, Карл! Спросите себя, а нужен ли вам реальный размер этой картинки на маленьком экране телефона? Отвечу за вас — конечно нет.
Если вам кажется, что это всего несколько секунд и это мелочи, то вспомните, сколько всего на вашей странице помимо картинки: текст, скрипты, реклама, счетчики слежения.
Показать только нужное
Есть кардинальный вариант — вообще не показывать на мобильном устройстве эту картинку.
Есть отличный тест Тафта, который поможет определить, действительно ли важна эта картинка для контента сайта.
Делаем просто:
See the Pen Hero image by Alena (@solarrust) on CodePen.
C первого взгляда проблема решена. Вы даже ощутите, что страница загружается быстрее, если откроете ее на мобильном телефоне. Это происходит за счет того, что браузер экономит время на отрисовке картинки.
Но тут вас будет ждать огромное разочарование — картинка по прежнему скачивается, безжалостно пожирая трафик пользователя.
На фоне
Еще один вариант манипуляций предполагает, что картинка у нас будет фоном элемента. Тогда при помощи тех же медиа-запросов мы можем вообще не загружать ее или подменять на более легкий вариант.
See the Pen Hero image, ex.3 by Alena (@solarrust) on CodePen.
Браузер загрузит только ту картинку, которая предусмотрена для текущего разрешения.
Profit!
Но вы потратите довольно много времени на то, чтобы подменять картинки на каждом разрешении. Ваш CSS слегка вспухнет. А рано или поздно кто-то забьет на это (от лени или по незнанию) и на мобильных снова полезут увесистые картинки.
И я уже молчу про вариант, когда действительно нужен img>, а background вам не подойдет.
Решабельно
В нынешней спецификации HTML есть отличное решение нашей с вами проблемы. Умные люди пишут эти спецификации!
Я настаиваю на вашем знакомстве с Отзывчивыми изображениями.
Отзывчивое изображение — загружается только та версия картинки, которая подходит по размеру области, экрана и DPI.
Вся эта магия реализуется при помощи дополнительных атрибутов к тегу img.
Так выглядит основной синтаксис, обеспечивающий вам отзывчивые изображения:
See the Pen Hero image, ex.4 by Alena (@solarrust) on CodePen.
При помощи разных манипуляций с этой формулой мы можем обеспечить себе не только облегчение от груза картинок, но и:
- Качественные картинки на ретине.
- Показ подходящего формата в зависимости от знаний браузера.
Живой пример
See the Pen srcset & sizes testcase by Martin Wolf (@martinwolf) on CodePen.
Примечание: Codepen не очень дружит с отзывчивыми картинками. Аналогичные примеры http://responsiveimages.org/demos/variable-width/index.html и https://googlechrome.github.io/samples/picture-element/
В приведенном примере картинка занимает 700 px при ширине экрана больше 700 px и 100% ширины при меньших разрешениях.
При этом, если вы откроете этот пример на мобильном телефоне, то браузер загрузит меньшую из версий картинки.
Вы можете видеть, что адреса картинок указаны в ранее не используемом атрибуте srcset. У этого атрибута следующий синтаксис: srcset=URL-картинки размер-в-w, URL-картинки размер-в-w. И так нужное количество раз.
Дальше пишем еще один новый атрибут — sizes. Он содержит в себе информацию о том, сколько места занимает картинка на том или ином разрешении. Для брейкпоинтов используется обычное медиа-выражение. Синтаксис: sizes: брейкпоинт размер-в-px/vw. Вы можете перечислить нужное количество брейкпоинтов и задать для каждого размер отображаемой картинки. Можно указать одно значение, например, 100vw. Тогда картинка будет всегда на 100% ширины экрана.
Злоупотребление картинками
Советую вам сразу после прочтения этой статьи проверить свой сайт на размеры картинок.
Делаем следующее:
- Открываем Chrome в режиме инкогнито.
- Открываем Инструменты разработчика (DevTools).
- Переходим на вкладку Network, нажимаем Img.
- Заходим на наш сайт и видим внизу результат.
Заключение
Я не рассказала и десятой части о том, как можно решить проблему воровства трафика из-за больших картинок.
Честно скажу, что у меня не было цели написать пошаговую инструкцию. Я поставила себе задачу привлечь ваше внимание к проблеме неуважительного отношения к трафику и времени пользователей. И дала вам подсказки, в какую сторону стоит посмотреть.
В следующий раз, когда будете ставить огромный баннер в начало статьи, пожалуйста:
- Проведите тест Тафта.
- Проверьте финальную скорость загрузки.
- Оптимизируйте изображение (крошечная панда).
- Используйте новые атрибуты для img.
Пишите в комментарии, какие темы вас интересуют и я обязательно напишу о них в следующих статьях.
Полезные ссылки:
- Получаем разные разрешения одной картинки РАЗ и ДВА.
- Читаем документацию: раз, два, три.
- Изучаем мануалы: первый, второй, третий.
- Проверяем поддержку в браузерах.
Полный текст статьи читайте на Нетология
