От автора: когда на рынке впервые появились ретина дисплеи, эксперты в веб-дизайне хватались за головы при одной мысли, что им придется работать с такими разрешениями.
С точки зрения веб-дизайна это был полный кошмар. Адаптивный дизайн хорошо справляется с различными размерами экранов на устройствах, но плотность пикселей стало чем-то новым. А теперь Apple выпустили еще и iMac с 5К дисплеем, и многих веб-дизайнеров бросает в жар от мысли, что им придется снова все масштабировать.
Вся проблема в том, что пользуются, обычно, такой техникой только веб и графические дизайнеры. Мы постоянно апгрейдим свои компьютеры. Мы, люди, всегда ищем максимальные возможности за наши деньги. И проблема в том, что, чтобы вся графика четко отображалась на таких разрешениях, необходимо создавать изображения, которые больше обычных в 4 раза.
Возникают проблемы
При резком увеличении разрешения экрана возникают определенные проблемы. Для ретина дисплеев изображения пришлось увеличить в два раза. Сейчас уже 5К, и изображения снова приходится увеличивать в 2 раза. В итоге получаем, что готовые изображения в 4 раза больше исходных.
Ограничение пропускной способности
Работать с большими изображениями не составляет труда, когда вы сидите за настольным компьютером с высокоскоростным подключением. Но нельзя игнорировать тот факт, что 80% посетителей вашего сайта просматривают его через мобильные устройства. Увеличенные в 4 раза изображения (4Х) быстро положат 3G и 4G сеть. Придется делать для мобильных устройств маленькие изображения, чтобы ускорить загрузку страниц и сэкономить трафик.
Не забывайте про размер файла
Помимо пропускной способности канала необходимо также помнить и о размере файла. При создании сайта приходится учитывать различные устройства и подбирать под них оптимальный размер файлов изображений. Если вы хотите сэкономить ресурсы, то это серьезная проблема. Парочка изображений в 1-4Мб, в принципе, сильно не затруднят работу сайта, а если их тысячи?
Как решить эти проблемы?
К счастью, все наше сообщество работает над способами увеличения размера изображений. Было бы слишком неудобно обслуживать множество версий сайта и страниц, однако простой скрипт облегчает эту задачу.
Изображения
В последней версии Photoshop’а появилась возможность сохранять изображение сразу в нескольких размерах. Уже только эта функция помогает сэкономить несколько минут вашего времени, причем она работает с ретина дисплеями. Adobe осталось добавить функцию сохранения изображений в 4Х.
Медиа запросы позволяют работать с разными размерами изображений под различные устройства с разной плотностью пикселей (1, 2 или 4). С их помощью можно немного повысить четкость изображений под конкретные устройства.
Эта программа позволяет работать с каждым изображением под каждого пользователя и всеми возможными условиями, которые могут возникнуть на различных устройствах. В PictureFill есть следующие условия: размер экрана, размер окна браузера, разрешение экрана и т.д.
Другие проблемы
С учетом всех существующих проблем и задач, которые мы уже рассмотрели, необходимо еще учесть вес сайта. Огромные изображения сделают ваш сайт неподъемным. У большинства хостингов ресурсы ограничены, а дорогой хостинг не каждый может себе позволить. И эта самая большая проблема, которая заставляет вас уменьшать вес файла.
SVG
SVG постоянно развивается, а, значит, это отличный способ снизить вес вашего сайта. Файлы SVG имеют малый вес, так что где бы вы их не применили, это отличный способ сбросить пару мегабайт. А адаптивный SVG еще и подстраивает размер изображений под размер экранов на различных устройствах.
Сжатие изображений
Сжатие изображений еще один способ уменьшить вес вашего сайта. Изображения можно хранить и не в оригинальном размере.
Есть несколько бесплатных сервисов по сжатию изображений. Самые лучшие это WP Smushit, TinyPNG и Optimizilla, выберите себе один какой-нибудь. Вы можете опробовать их все, чтобы выбрать, какой лучше всего вам подходит. Как пример, изображение выше сжато до 70%, однако я не заметил визуальных различий. А размер файла снизился на 50%.
Сервисы
Если у вас проблемы с большим количеством ресурсов, можно воспользоваться хостингом изображений, как Amazon Web Services. Отличный способ снизить нагрузку на хостинг. В таком случае нужно беспокоиться только за загрузку изображений на сайте, данный способ значительно облегчает ваш сайт.
Заключение
Ни для кого не секрет, что разрешение экранов постоянно увеличивается. Технологии постоянно усложняются и меняются, и подстроить новые устройства под все эти изменения может быть затруднительно. Важно помнить, что веб-технологии растут одновременно со всеми другими технологиями.
Создание комплексного решения по работе с различными размерами изображений под различные экраны и плотность пикселей не займет много времени. Но в то же время, для уменьшения веса сайта необходимо внедрять самые последние методы.
Автор: James George
Источник: //www.sitepoint.com/
Редакция: Команда webformyself.
