Блог студии 77

Оптимизация изображений

22 декабря 2011

При создании сайта в нашей студии нам приходится много уделять времени работе с растровой и векторной графикой. Часто необходимо выезжать на различные объекты, которые относятся к деятельности наших клиентов, фотографировать, обрабатывать, и подготавливать изображения для будущего сайта, создавать иллюстрации, иконки. При этом куда легче реализовать какую-либо задачу, когда перед глазами есть графические изображения необходимых предметов, объектов, мест, чем просто визуально пытаться фантазировать и представлять их. Сегодня я хотел бы рассказать о том, как мы оптимизируем изображения для наших проектов. Здесь есть много тонкостей и нюансов, от которых зависит дальнейшее время загрузки страниц, когда на них заходят пользователи с разной скоростью доступа к интернету. И поэтому если не побеспокоиться про оптимизацию графики заранее, либо не правильно это делать, то многие пользователи могут ощутить продолжительное время загрузки веб-страниц, что явно не скажется положительно на их отношении к сайту. Наша задача – это подготовить изображения, которые будут занимать минимум пространства на сервере (подразумевается физический размер и объем конечного изображения) без потери качества по сравнению с исходным изображением.

Оптимизируя изображения для сайта, необходимо учитывать следующие нюансы: современные браузеры понимают и читают следующие форматы изображений – JPEG, PNG, GIF. Всегда необходимо понимать логику оптимизации изображений – в каком формате, каком размере и с какой компрессией необходимо подготавливать изображения.

JPEG – это наиболее распространенный и известный формат, который идеально подходит для оптимизации фотографий, ввиду большого количество различных цветов и оттенков, входящих в них. Оптимизируя JPEG файл необходимо определиться с тем, какого размера конечное изображение нам необходимо, т.е. количество пикселей по горизонтали и вертикали, которое будет иметь изображение. Далее нам нужно подобрать объемом компрессии для наших jpeg изображений. Все это выполняется в программах по работе с растровой графикой. В данном случае, мы подбираем тот объем компрессии, при котором у нас не будут заметны так называемые артефакты. Есть определенный потолок в компрессии, когда это будет уже в ущерб визуального восприятия изображения. Наша задача оптимизировать изображения, не переходя данный потолок. Приведу простой пример оптимизации Jpeg изображения. Первая картинка ( размер 114 К) – у нас оригинальное изображение, в котором оптимизирован только размер изображения, но без компрессии. Второе (размер 32 К) – оптимизированное изображение с уменьшеным размером и компрессией. Как мы видим, мы значительно уменьшили объем нашего файла, без потери качества, что в итоге ускорило обращение к нашему серверу, и страница грузится быстрее. И для примера неправильной оптимизации, я добавил также третье изображение ( размер 7 К). В данном случае нам значительно удалось сократить размер файла, по сравнению с оригинальным изображением, но и невооруженым глазом видны артефакты (потеря визуальных свойств изображения). Данная картинка - пример неоптимальной оптимизации.

Не оптимизированное изображение Оптимизированное изображение Изображение с артифактами

PNG. Важной особенностью данного формата является поддержка прозрачности в изображениях. Существует 2 вида PNG формата: PNG-8 и PNG-24. PNG-8 имеет ограниченное количество цветов, и не поддерживает прозрачность. Своими свойствами он очень похож на GIF формат. На сегодняшний день – это редко используемый формат. В свою очередь PNG-24 очень популярный формат. Он позволяет сохранять изображения, как и JPG, с миллионами различных цветов + поддерживает прозрачность. Отрицательной особенностью данного формата является его размер. Зачастую он превышает размер изображений оптимизированных и сохраненных в форматах GIF и JPEG. Для изображений данного формата также с помощью специального софта можно добиться уменьшений объема изображения, обычно до 25% без потери качества.

GIF – формат, в основном используемый для оптимизации иллюстраций, логотипов, где используются сплошные цвета. Основной особенностью данного формата является ограничение по максимальному количеству используемых цветов - 256. Основным свойством, которое будет влиять на конечный размер GIF изображения, является минимальное количество необходимых цветов для изображения. Во время оптимизации, мы подбираем то количество цветов, которое позволит максимально сократить размер файлы, при этом не ухудшив внешний вид нашего изображения.

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

Есть и другие варианты уменьшения нагрузки на сервер. Я приведу пару примеров.

1. Бесшовный узор.

Обратите внимание на верхнюю часть нашего сайта (шапка). В ней мы увидим, что используется определенный узор поверх сплошного черного цвета. Подготавливая изображения, задача верстальщика побеспокоиться о том, чтобы такие элементы сайта, как например узоры можно было бы повторить для различных разрешений экрана. Кто-то мог бы просто скопировать такой узор в размере, например 2500 px по горизонтали, и 128 px по вертикали, и вставить такое изображение для сайта, не задумываясь о том, как данный объем изображения будет влиять на скорость загрузки страницы. Если бы мы, для нашего сайта поступили так, то объем нашего узора составлял бы 4000 К. Но наша задача – это максимально сократить нагрузку на сервер. Поэтому, хорошо зная возможности стилизации, мы подготовили данный узор, вырезав только минимально необходимый кусочек.

Дальше же, за счет стилизации, мы просто повторяем его на всю ширину браузера. Это позволяет нам, независимо от разрешений экранов наших пользователей, видеть такой же красивый узор, как если бы мы пытались сохранить наш узор сплошной огромной картинкой. Посмотрим, сколько же весит наш узор теперь – 363 байт. Итого, в 10 раз нам удалось уменьшить размер нашего файла для узора. Вуаля.

2. Метод спрайты

Ещё одним примером оптимизации изображений будет пример создания ссылки, у которой слева будет меняться фоновое изображение в зависимости от состояния. Это же актуально для любых элементов панели навигации на сайтах. Решение будет основано на применении изображений, без необходимости предварительной загрузки множества отдельных файлов. Для нашего примера, будем использовать 3 состояния для нашей ссылки – обычное, наведение на ссылку, и активное (в момент клика по ссылке). Для нашей ссылки применим 3 фоновых изображения.

Ну а теперь подключим наше фоновое изображение к обычной ссылке. Попробуйте навести указателем мышки, на нашу ссылку. Если же кликнуть на ссылку фоновое изображение примит синий цвет.

Верстка сайта

Можно было бы сохранить все 3 фоновых изображения, которые мы используем для различных состояний нашей ссылки, как 3 отдельных файла. Затем необходимо было бы сохранить 3 изображения на сервер, и в коде прописать 3 отдельных запроса к данным изображениям. Но это не оптимальный путь. В данном случае я объединил все 3 фоновых изображений в одну картинку. Это дает возможность сохранить все одним файлом, что в конечном счете позволит нам сократить количество запросов к серверу к минимуму – 1 запрос. Затем, мы позиционируем нашу картинку, в зависимости от состояния. Дополнительным плюсом такого подхода является также и то, что мы сокращаем и объем кода необходимого для создания данного эффекта для ссылки. В данном случае я продемонстрировал простой пример данного подхода. Сложнее будет такой вариант, когда, например, для навигационного меню необходимо использовать много разных фоновых изображений, и вместо большого количества отдельных файлов, мы создаем одну большую картинку, и затем позиционируем ее. И затем, вместо, например 20 отдельных запросов к серверу, мы делаем только 1 запрос. Все это позволяет оптимизировать наши изображения, для более быстрой работы с нашими сайтами.

Оптимизация изображений

Другие статьи автора: