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

Оптимизация изображенийПривет! С вами 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):
  • сохраняем для Web и устройств

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

  • выбираем нужный нам формат: GIF, JPEG, PNG-8, PNG-24, WBMP (это черно-белый):

выбираем формат изображения

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

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

высокое качество JPG для фотографий  с людьми

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

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

формат для картинки с текстом

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

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

установите оптимальное количество цветов для PNG-8 и GIF

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

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

кнопка в формате GIF

GIF – 1,15 Кб

кнопка в формате JPEG

JPEG – 2,09 Кб

кнопка в формате PNG-8

PNG-8 – 826 байт

кнопка в формате PNG-24

PNG-24 – 1,68 Кб





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

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

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

  • pngout для PNG:
  • кнопка в PNG-8 через pngout

    (вес этой картинки (png-8) – 733 байта)

  • jpegtran для JPG:
  • кнопка в JPEG через jpegtran

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

  • можете попробовать еще такую штуку PunyPNG:
  • кнопка PNG-24 через PunyPNG

    (вес этой картинки (png-24) – 1,39 Кб)

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

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

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

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

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

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

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

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

1 звезда2 звезды3 звезды4 звезды5 звезд! Ура! (5 голосов, оценка: 5.00 из 5)
Loading...Loading...
Последние комментарии

А что думаете Вы?

Ваш email не будет опубликован. Обязательные поля отмечены *

CommentLuv badge