Руководство по оптимизации изображений для интернета

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

Используйте нужный формат картинок

Есть три наиболее распространенных формата графических файлов — .jpg, .png и .gif. Используйте тот или иной формат в зависимости от того, что вам надо:

• PNG для изображений с текстом или прозрачным фоном;
• GIF для очень маленькие картинок, например, плитка 5х5 px заполнения фона;
• JPG для фотографий, иллюстраций и прочих изображений.

Показывайте эскизы вместо картинок с изменёнными через HTML размерами

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

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

Для веб-сайтов на PHP, есть множество различных библиотек, которые позволяют легко создавать эскизы на лету. ImageMagick является одной из самых популярных.

Используйте CSS3-эффекты, а не картинки

Вам нужен градиент или фантастический эффект отображения текста на своём сайте? Не используйте картинки! Спецификация CSS3 позволяет добавлять множество визуальных эффектов. Одно из моих железных правил при разработке и веб-дизайне — по максиму избегать использования изображений.

Другими словами, если вы можете сделать что-то с помощью CSS, то делайте это только с помощью CSS, а не картинок. Здесь есть масса вещей, которые можно сделать CSS3 вместо использования картинок, а ваш сайт будет быстрее.

Используйте ВЕБ-ШРИФТЫ вместо отрисовки текстов в картинках

Даже сейчас, в 2016 году, есть масса верстальщиков, показывающих текст изображениями. Это, безусловно, плохо. В 90% случае, вы можете вместо этого использовать WebFont и CSS. Веб-шрифты быстрее, чем загрузка целой кучи текстовых изображений.

Использовать WebFonts супер просто. Для того, чтобы обеспечить хорошую совместимость с различными браузерами, вам нужно иметь шрифт в следующих форматах: .ttf, .woff, .svg и .eot. Если у вас есть только один из этих форматов, то супер полезный онлайн инструмент, генератор WebFont Fontsquirrel поможет Вам получить остальные.

Загрузите шрифты на свой веб-сервер, а затем добавьте следующие строки в свой .css файл:

@font-face {
  font-family: 'Tagesschrift';
  src: url('tagesschrift.eot'); 
       url('tagesschrift.woff') format('woff'),   
       url('tagesschrift.ttf') format('truetype'),
       url('tagesschrift.svg#font') format('svg');
}

После этого, вы назначаете WebFont к элементу, используя свойство семейства шрифтов:

p {
    font-family: "Tagesschrift", Georgia, Serif;
}

В PhotoShop применяйте инструмент «Сохранить для Web»

Когда дело доходит до веб-дизайна, то не обойтись без Photoshop, который на сегодняшний день является самой популярной программой и большинство из вас, вероятно, его используют. Несмотря на свою популярность, многие никогда не применяют функцию «Сохранить для Web». Это позор, функция Photoshop обеспечивает применение пользовательских пресетов (настроек) при сохранении изображение приспособленных для веб-сайта. В принципе, если вы намереваетесь показать изображение на своём сайте, всегда используйте в Photoshop функцию «Сохранить для Web». ВСЕГДА!

Если у вас нет Photoshop, не волнуйтесь. Можно воспользоваться Optimizilla, онлайн оптимизатором изображений. Предпочитаете приложение? Тогда рекомендую RIOT.

У Вас WORDPRESS? Установите плагин WP SMUSH

Если ваш сайт основан на CMS WordPress, то можно сэкономить массу времени, просто установите плагин, который оптимизирует ваши картинки. Бесплатная версия располагается в репозитарии WP Smush. Он работает великолепно: установите плагин, а затем загружайте свои картинке как обычно из административной панели. WP Smush при загрузке каждой картинки оптимизирует её размер, практически, без потери качества. Результаты впечатляют: размер картинки может уменьшиться до 80%.

ПРО-версия плагина называется WP Smush Pro. Я пока не пробовал её, но дополнительные возможности очень привлекательны: оптимизация картинок размером до 32 Мб (WP Smush ограничивается 1 Мб), групповая оптимизация всех ваших изображений одним щелчком мыши, с наилучшим сжатием, и прочее. Если вы заинтересованы в ПРО-версии WP Smush, посетите страницу CWC’s “deals & coupons” и получите скидку в размере 50%.

Для ускорения показа картинок используйте кэширование

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

Вот готовый фрагмент кода, который будет кэшировать файлы различных типов (изображения, а также другие виды документов такие, как PDF или FLV ). Этот код должен быть записан в файл .htaccess вашего сайта. Прежде чем редактировать это файл, на всякий случай, если что-то пойдет не так, убедитесь, что у вас есть резервная копия.

# 1 YEAR

Header set Cache-Control "max-age=29030400, public"

# 1 WEEK

Header set Cache-Control "max-age=604800, public"

# 2 DAYS

Header set Cache-Control "max-age=172800, proxy-revalidate"

# 1 MIN

Header set Cache-Control "max-age=60, private, proxy-revalidate"

По мотивам: THE DEFINITIVE GUIDE TO OPTIMIZE IMAGES FOR THE WEB