Урок 105. Оптимизация изображений для сайта

Урок 105. Оптимизация изображений для сайта

Всем-всем привет!

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

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

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

Прежде, чем начать оптимизацию изображений, необходимо понять какие именно картинки тормозят загрузку. Опять же в прошлом уроке я продемонстрировал два сервиса для анализа скорости загрузки сайта: Google PageSpeed Insights и GTmetrix. Они-то нам и укажут на косяк.

В Google PageSpeed после анализа появляются вкладки, где мы можем увидеть ссылки на картинки, на JavaScript’ы и другие штуки, тормозящие работу сайта:Рекомендации Google PageSpeed по оптимизации скорости загрузки сайта

Достаточно нажать на вкладку «Как исправить?» и перед Вами появится список ссылок: Оптимизация изображений

В GTmetrix нужно будет щелкнуть на вкладку «Optimize image»:Анализ оптимизации изображений на сайте

Однако функционал второго сервиса гораздо шире, нежели PageSpeed от Google, и он предлагает нам скачать уже оптимизированную версию проблемного изображения. Для этого нужно будет нажать на ссылку «Optimized version»:Оптимизированное изображение

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

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

Для этой цели существует множество программ и онлайн-сервисов, что даже не знаешь какой выбрать. Особняком стоит популярнейшая программа от Adobe — Photoshop. Однако не каждый юзер может работать с ним, как никак профессиональная софтина, да и скачивать его только для оптимизации изображений сайта нецелесообразно. Поэтому я дам Вам небольшой список онлайн-сервисов:

  • Optimizzila. Познакомился я с ним буквально пару часов назад, но он уже успел понравится мне. Его задача — сжать размер изображения до минимальных значений. Справляется на ура. Пример: закинул картинку на 414 кб, которая сильно тормозит скорость загрузки, и сжалась она до 3 кб(!) и без потери качества:Программа для оптимизации изображений для сайтаИспользует эффективную комбинацию алгоритмов по сжатию PNG и JPEG. Можно закинуть до 20 картинок и скачать их одним архивом;
  • Compressor.io. Очень схож с Optimizilla, но сжимает чуть лучше. То же изображение весом 414 кб Compressor сжал до 2.9 кб. Результат впечатляет.Оптимизация изображений Compressor
  • JPEG-optimizer. Предназначен исключительно для работы с графическими файлами формата JPEG. Качество немного ухудшается:Оптимизация изображений JPEG optimizer
  • TinyPNG. Несмотря на свое название, данный сервис работает как с файлами формата PNG, так и JPEG. Справляется неплохо;Оптимизация изображений TinyPNG
  • Kraken.io. Данный сервис подойдет если Вы хотите оптимизировать большое количество изображений (от нескольких десятков до нескольких сотен). Однако изначальное качество картинки будет немного скомкано. Поверьте мне, лучше пожертвовать качеством картинки, чем большим количеством времени.

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

Какой формат изображений использовать для сайта?

Этот вопрос довольно часто возникает у начинающий вебмастеров. Всего рекомендуется использовать три формата изображений для сайта:

  1. JPEG. Является приоритетным, так как картинки такого формата очень легко сжимаются без потери качества, к тому же и вес их небольшой;
  2. PNG. В основном используется для создания картинок с прозрачным фоном. Существует две разновидности данного формата:
    1. PNG-8 — использует 256 цветов. Естественно, изображения этого формата имеют маленький вес;
    2. PNG-24 — использует 16 млн. цветов. Имеют гораздо больший вес по сравнению с PNG-8;
  3. GIF. По сравнению с остальными форматами ограничен в качестве изображения. Рекомендуется использовать для иконок или картинок с декоративным эффектом. Поддерживает анимацию.

Вот небольшой пример изменения качества изображения в зависимости от формата при изменении размера:Оптимизированные изображения

На этом буду заканчивать, дорогие друзья! Надеюсь помог Вам этим уроком и Ваш сайт начнет наконец нормально грузиться.

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

До завтра!

Пост опубликован: 04/04/2017


Добавить комментарий

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