Увеличиваем скорость загрузки сайта. Уменьшаем изображения.

Привет! С вами Hess! Рад приветствовать всех на Блоге SEO сектанта.

Кристина отправилась за новыми знаниями в Лондон. Периодически она будет вещать оттуда. А мы с вами в ближайшее время обсудим вопросы клиентской оптимизации, SMM, интернет-маркетинга.

Сегодня я хотел бы обратить внимание на такой немаловажный момент в оптимизации сайта, как увеличение скорости загрузки страницы (уменьшение времени ее загрузки) посредством оптимизации изображений. Будем уменьшать размер, вес, качество картинок, но все это в приемлемых пределах.

Зачем оптимизировать изображения?

Скорость загрузки сайта является частью внутренней оптимизации и выступает одним из факторов ранжирования в поисковой системе. На эту скорость влияет применяемая таблица стилей (CSS), использованные на странице скрипты, контент, хостинг и многое другое. Однако самая главная причина (после скорости и качества интернет-соединения, конечно) – это медиа-контент: изображения, видео, баннеры, музыка.

Из всего вышеперечисленного на сайтах чаще всего используются именно статические изображения. Они входят в дизайн и в контент и требуют большего времени для загрузки.

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

Что необходимо знать о картинках?

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

Форматы изображений в теории:
Самыми распространенными форматами изображений в сети являются JPEG, GIF, PNG-8, PNG-24.

• Формат JPEG применяют для большинства изображений. В основном он используется для фотографий, картинок с большим количеством деталей, цветов, сложных градиентов. Чем больше геометрический размер фотографии с большим количеством деталей, тем более предпочтителен именно формат JPEG. Однако в этом формате отсутствует прозрачность.
• К формату GIF лучше прибегнуть в том случае, если количество цветов в изображении менее 10. (Это в теории). Здесь уже есть поддержка прозрачности.
• PNG-8 особенно хорош для иконок, кнопок, простых градиентов, изображений с повторяющимися элементами (паттернов). Великолепно справляется с прозрачностью.
• PNG-24 лучший формат, когда используется полупрозрачный градиент: кнопки, картинки, иконки с тенями, градиентами и т.п.

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

Независимо от того, где вы берете изображения: ищете в Google картинках, из фотостоков, собственная подборка, – перед загрузкой на сайт их лучше оптимизировать.

Как оптимизировать изображения?

Возможно, у каждого из вас есть свой метод «уменьшения» изображений. Здесь я приведу способ, которым пользуюсь сам:

• открываем изображение в Adobe Photoshop.
• анализируем его размер: не слишком ли оно большое для поста (страницы); видны ли все необходимые, важные детали; легко ли читается текст на нем, если он есть.
• при необходимости – уменьшаем картинку до нужных нам размеров (комбинация Ctrl+Alt+I):

Здесь я руководствуюсь такими критериями:

- нужно поместить изображение на всю доступную ширину зоны контента или достаточно будет уменьшенной версии?

- eсли на картинке есть текст, он должен легко читаться сразу или нужно открыть изображение полностью, чтобы прочитать?

Нет смысла сохранять изображение большого размера, если на сайте будет использоваться только его уменьшенная версия, из которой и так все будет понятно. Не забивайте место на хостинге ненужными килобайтами.

• сохраняем изображение для WEB и устройств (Ctrl+Shift+Alt+S):
(вес этой картинки – 639 байт)
• выбираем нужный нам формат: GIF, JPEG, PNG-8, PNG-24, WBMP (это черно-белый):

(вес этой картинки – 699 байт)

Если на картинке есть люди или необходимо отличное качество изображения, то лучше сохранять такие изображения только в JPEG с минимальным уровнем качества High. Это относится к фотографиям, в основном. Нарисованных человечков можно и «сжать» немножко, используя более выгодные форматы. (Нажмите для увеличения)

(вес этой картинки целиком – 148 Кб. За высокое качество и большой размер приходится платить)

Если это картинка с текстом, кнопка или изображение, где качество не столь критично, то проверяем, где она будет весить меньше. Здесь все будет зависеть от количества цветов, градиентов, теней, размера картинки в целом.
Для этой картинки больше всего подошел формат PNG-8:

(вес этой картинки – 1,84 Кб)

Если вы выбираете формат GIF или PNG-8, также настройте количество цветов в изображении на самое возможное минимальное, но без существенного ухудшения качества:

(вес этой картинки – 3,50 Кб)

Еще для примера приведу такой вариант:

Здесь мы видим, что меньше всего весит кнопка в формате PNG-8, но у нее появляется белая каемка. Это формат плохо справляется с полупрозрачными градиентами. У GIF такая же проблема, но весит при этом изображение еще больше. JPEG – хороший вариант, если у вас белый фон страницы (или просто монотонный). Но лучше всего для изображений с полупрозрачными градиентами подойдет вариант PNG-24, весит немного, но качество – самое лучшее из всех вариантов.

Инструменты для уменьшения веса картинок

И чуть не забыл. Все типы изображений можно дополнительно «ужать» при помощи различных программ. Правда, лучше всего сжимается опять же PNG-формат. На просторах сети вы можете найти что-нибудь подходящее для себя. Я же пользуюсь:

• pngout для PNG:
(вес этой картинки (png-8) – 733 байта)
• jpegtran для JPG:
(вес этой картинки – 2,06 Кб)
• можете попробовать еще такую штуку PunyPNG:
(вес этой картинки (png-24) – 1,39 Кб)

Качество изображения при использовании таких инструментов не ухудшается.

Делаем выводы

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

Знайте, что есть не только внешняя и внутренняя оптимизация, но и клиентская. Это часть внутренней оптимизации, о которой очень многие почему-то не задумываются.

Думайте о своих посетителях! И чтобы не пропустить еще что-нибудь полезное, подписывайтесь на обновления. Еще можете посмеяться над забавными моментами из жизни сеошников, программистов и даже дизайнеров

Дополнения и вопросы по теме оптимизации изображений очень даже приветствуются.

Если статья была для Вас полезной, не стесняйтесь ссылаться!

<a href="https://promored.ru/2012/04/umenshaem-izobrazheniya/">Увеличиваем скорость загрузки сайта. Уменьшаем изображения.</a>