Мобильный логотип Томатус
+7 (495) 181 01 44
Оставить заявку
Галина Бугаевская

4 Ноября 2016, Галина Бугаевская

"Оптимизация картинок" или "Как не стать вором?"

Подводные камни на пути к прекрасному

С каждым годом растет количество интернет-пользователей, использующих мобильные телефоны, небольшие нет-буки и планшеты. Это удобно и практично – можно не отрываться от «мира сего» ни в командировках, ни в дороге, ни в поездках на работу – с работы. Да даже банально удобнее просматривать любимые сайты и паблики, лежа на диване, нежели у стационарного компьютера. Не говоря уже о просмотре роликов или серфинге сайтов в горячей ванной, используя смартфон. Мммм….

В общем, так или иначе, все чаще отдается предпочтение гаджетам с невысокой шириной экрана, в виду их компактности. Раньше были очень популярны ( да и сейчас, чего греха таить, они активно используются) мобильные версии сайтов. Сейчас же все больше разработчиков и владельцев сайтов признают удобство адаптивной гибкой верстки. Написал код один раз под разные разрешения экрана и отлично. Здесь только один минус. Что может сделать сайт более красивым и привлекательным? Красочные «сочные» картинки. Но в них и заключается главный подводный камень.

Только необходимое?

Предположим, что у нас есть красивый баннер на странице, который изумительно смотрится на экране шириной, к примеру 1366. Чтобы картинка подстроилась под другие разрешения, мы прописываем :

img {width: 100%;}

Вроде бы, все правильно… Но если открыть страницу с мобильного телефона, то страница будет грузиться на 3-4 секунды дольше. Вряд ли посетители нашего сайта захотят ждать так долго. Можно вообще не показывать картинку на мобильных устройствах. Прописываем через медиа запрос:

@media screen and (max-width: 600px) { img {display:none;}}

Готово, теперь картинка не отображается на экране смартфона. Страница стала грузиться намного быстрее, за счет того, что браузеру не нужно тратить время на отрисовку изображения. Но не спешите ликовать – картинка все равно скачивается, съедая трафик пользователя. А трафик мобильного интернета, зачастую, ограничен рамками выбранного пользователем размера. Выходит, наша картинка, в прямом смысле, поедает деньги наших посетителей! Куда это годится?

Через фон?

Картинку, так же, можно прописать фоном. При определенном разрешении экрана, будет просто загружаться свой вариант изображения. Пишем:

.img-block { background: url(/адрес картинки) no-repeat center/cover; }

@media screen and (max-width: 600px) { .img-block { background: url(/адрес картинки) no-repeat top center; }

На первый взгляд, все идеально. Под каждую ширину экрана грузится та версия, которая необходима. Но! Представляете, сколько придется прописывать кода? Для каждой картинки, под разные медиа запросы… С ума сойти! А если у Вас как раз сайт, где разные картинки и есть большая часть контента? Ох, не завидую… =)

Так есть ли выход из этой ситуации? Более простой, не связанный с такими танталовыми муками?

Решение есть!

Все-таки, время не стоит на месте. Много талантливых людей, профессионалов в своем деле, занимались созданием отзывчивых сайтов и решением этой проблемы. При помощи специальных атрибутов к тегу img мы облегчаем жизнь и себе, и пользователям!

Под каждое указанное разрешение экрана будет грузится своя картинка!

Проверьте свой сайт!

Чтобы узнать, сколько трафика впустую расходует сайт, можно проделать следующие манипуляции.

  • Заходим в Google Chrome в режиме инкогнито.
  • Переходим: Инструменты разработчика (DevTools)/ Network/img
  • Заходим на тестируемый сайт и видим результат.

Чтобы избежать этого, для начала проведите тест Тафта, проверьте Ваш сайт на скорость загрузки, оптимизируйте картинки и используйте новые атрибуты к ним! Давайте вместе экономить трафик наших посетителей!

Вернуться ко всем статьям