Для чего нужна оптимизация размеров файла

Обновлено: 06.07.2024

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

Сжатие изображений

Сжатие графики необходимо для сокращения её веса. Вес зависит от формата, качества и размера картинки, рассмотрим их подробнее.

Качество

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

При сжатии с потерями данные о части пикселей удаляются, а при сжатии без потерь – сжимаются.

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

Потери качества можно отследить, если использовать в Adobe Photoshop функцию «Экспортировать» -> «Сохранить для Web», перемещая ползунок качества от 1 до 100. Оптимальным будет значение 80, но для разных изображений оно индивидуально. Так, на примере ниже вы можете посмотреть, как изменится оригинал, если качество сделать равным 50. При визуальной оценке изображение практически не поменялось, зато вес упал с 5,49 мб до 463,7 кб.

Размер изображения

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

При изменении длины и ширины вес графического элемента меняется. Например, возьмём всё ту же фотографию с морским пейзажем, где мы изменили степень сжатия качества на 50%. Ширина и высота 1200x1600 px с размером 463,7 кб. Но, допустим, в статье необходимо разместить картинку справа от текста (обтекание изображения текстом), и поэтому большой физический размер нам не требуется. Обрежем его до таких параметров – 400x534 px с сохранением пропорций, и получим вес равный 181 кб.

Формат изображения

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

Для растровой графики могут быть использованы популярные форматы: GIF, PNG, JPEG, WebP, для векторной – SVG.

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

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

Формат GIF достаточно тяжелый, т.к. он хранит каждый кадр как GIF-изображение без потерь.

PNG – формат со сжатием без потери качества. При использовании этого формата графический объект получает высокое качество, но больший вес. PNG идеален для передачи деталей и чёткости картинки. Можно настраивать прозрачность и полупрозрачность. Поддерживается любыми браузерами.

• PNG8 – c 256 цветами, для картинок с малым количеством цветов.
• PNG24 – c 16 миллионами цветов. Подходит для многоцветных картинок с прозрачным фоном.

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

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

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

WebP – этот формат изображений имеет сжатие с потерями и без потерь качества. Разработан компанией Google. Основная задача – сильно уменьшить вес файла с сохранением качества. Поддерживает прозрачность. Отображается не во всех браузерах – из популярных пока только в Chrome, Opera и Firefox.

По данным Google, формат WebP сжимает без потерь лучше, чем PNG, и сжимает с потерями лучше, чем JPEG.

Формат WebP часто встречается в Яндекс.Картинках и Google.Картинках, а это значит, что всё больше сайтов переходят именно на этот формат графики.

Векторная графика работает совершенно иначе, чем растровая. Она строится из геометрических примитивов (точки, линии, кривые, многоугольники) и описывается математическими формулами.

SVG – язык разметки масштабируемой векторной графики, идеально подходящий для логотипов и иконок, и в целом для всей графики, кроме изображений. Может быть анимированным. Вес намного меньше растровой графики, без потери качества при изменении масштаба картинки. Еще одной особенностью данного формата является то, что он совместим с CSS и JavaScript. Все современные браузеры поддерживают SVG.

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

Как SEO-оптимизировать картинки на сайте?

Подписи к изображениям

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

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

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

Изображения сильно сказываются на общем весе страницы (по сравнению с HTML/CSS/JS). Где вы взяли изображения?

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

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

По большей части, эти изображения весят больше, чем нужно.

Что будет, если использовать неоптимизированные изображения

Большие и несжатые изображения сильно замедляют загрузку страницы. Вот что будет:

Большие и несжатые изображения дольше загружаются, масштабируются и рендерятся

Браузер запрашивает и загружает изображение – 2400 х 1350 и 2.5Мб!

В зависимости от дизайна сайта HTML или CSS уменьшают размер изображения, чтобы оно вписалось в область превью 300 х 169.

Браузер рендерит масштабированное изображение на странице.

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

Нужно было изображение 300 х 169, а вы использовали 2400 х 1350.

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

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

Что такое оптимизация изображений?

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

Проще говоря, меньше размер файла = меньше время загрузки = быстрее загружается страница. Основные концепции оптимизации изображений сводятся к размерам изображения (визуальный размер, ширина и высота) и сжатию (качество изображения и т.д.).

Разрешение сильно влияет на размер файла

Изображения с большим разрешением весят больше. Если загружать изображение в максимальном размере для отображения, то браузеру не нужно будет скачивать ненужные данные и тратить время на масштабирование.

Сжатие

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Несжатые изображения сохраняют все данные о пикселях, а также выглядят чище и четче – но и весят больше

Самый простой пример сжатия – операция «Экспортировать для веб» в фотошопе. Необходимо выбрать качество экспорта с наилучшим соотношением веса и качества.

Сжатые изображения хуже по качеству – заметны артефакты и потеря деталей и цветов

В этом случае вы выполняете сжатие с потерей качества. То есть чем меньше вес файла, тем меньше качество изображения. Читайте подробнее о сжатии с потерями по ссылке.

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

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

Еще больше оптимизации

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

Пользователи не видят метаданные, поэтому их нужно вырезать

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

Если удалить эти данные, то останутся только видимые пиксели – реальные данные, видимые пользователю – что уменьшит вес изображения.

Что будет, если использовать оптимизированные изображения

Уменьшенные и сжатые изображения быстрее загружаются и рендерятся

Браузер запрашивает и загружает изображение – 300 х 169 и 68Кб!

HTML/CSS масштабирование не требуется, поэтому браузер рендерит изображение на странице как есть.

В результате изображения на сайте намного быстрее загружаются и рендерятся.

«Работа с масштабированными изображениями» и адаптивный веб

У вас есть адаптивный дизайн, а GTmetrix советует «работать с масштабированными изображениями». И тут возникает конфликт. Вы можете задаться вопросом: «Как мне использовать адаптивный дизайн, если я должен работать с масштабированными изображениями? Не будут ли мои изображения плохо выглядеть на определенных брейкпоинтах?»

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

Под советом «работать с масштабированными изображениями» имеется в виду, что нужно работать с изображениями, не сильно отличающимися от масштаба.

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

В адаптивном дизайне тоже придется масштабировать изображения

Так вы получите максимальную гибкость и адаптивный дизайн, а также оптимальное качество на дисплеях с высокой плотностью пикселей. GTmetrix позволяет увеличивать изображения в два раза относительно рендера на экране перед вычетом очков (страницы анализировались на вьюпорте 1024 х 768).

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

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

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

Редакция: Команда webformyself.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

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

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

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

Преимущества оптимизации изображений

Среднее количество байт на страницу (кБ)

Преимущества оптимизации графического контента:

• Увеличение скорости загрузки страниц.
• Улучшает SEO-показатели сайта. Большие файлы изображений замедляют работу вашего сайта, а поисковики не любят медленные ресурсы.
• Более быстрое создание резервных копий.
• Требуется меньше места на вашем сервере.

Основная задача оптимизации – это получение баланс между наименьшим размером файла и приемлемым качеством изображения . Одним из распространенных способов является простое сжатие файлов перед их загрузкой в WordPress. Для этого используют Adobe Photoshop или Affinity Photo. А также плагины, которые мы подробно рассмотрим ниже.

Выбор правильного формата файла

Существует сразу несколько форматов файлов, которые можно использовать для сжатия изображений:

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

Есть еще несколько форматов, таких как JPEG XR и WebP. Но не все они поддерживаются браузерами. Поэтому лучше использовать JPEG (или JPG) для полноцветных изображений и PNG для простых картинок.

Качество сжатия против размера

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

Примечание : Объем оригинального изображения составляет 2,06 Мб.

Низкая степень сжатия (высокое качество) JPG – 590 Кб

Высокая степень сжатия (низкое качество) JPG – 68 Кб

Размер первого изображения составляет 590 Кб. Это довольно много для одной фотографии. Второе изображение выглядит ужасно, но при этом весит всего 68 Кб.

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

Средняя степень сжатия (отличное качество) JPG – 151 Кб

Оптимизация с потерями и без потерь

Оптимизация с потерями – это «фильтр», который убирает некоторые данные и ухудшает качество изображения. Но при этом размер файла изображения существенно уменьшается. Для этого можно использовать такие программы как Adobe Photoshop, Affinity Photo или любой другой графический редактор.

Оптимизация без потерь качества – сжатие данных без снижения качества изображения. Выполнить сжатие без потери качества можно с помощью Photoshop, FileOptimizer или ImageOptim .

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

Инструменты и программы для оптимизации

Существует множество инструментов и программ для оптимизации изображений. Лично мы – большие поклонники Affinity Photo .

Сжатие фотографии в Affinity Photo

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

Изменение масштабов изображений

WordPress, начиная с версии 4.4, поддерживает адаптивные изображения (не уменьшенные с помощью CSS). Движок автоматически создает несколько копий изображения разного размера, загружая их в медиа-библиотеку. Используя атрибут srcset, браузеры теперь могут выбирать для загрузки файл наиболее подходящего размера, исходя из характеристик экрана устройства пользователя.

Пример кода отзывчивых изображений srcset

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

Настройка медиафайлов в WordPress

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

Плагины для оптимизации изображений

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

Но не стоит полностью полагаться на плагины. Например, не следует загружать изображения размером более 2 Мб в медиа-библиотеку WordPress. Это приведет к быстрому расходованию дискового пространства, предоставляемого хостингом.

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

Плагин Imagify для оптимизации изображений

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

Изменение размера файлов в Imagify

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

Бесплатный плагин ShortPixel Image Optimizer позволяет сжимать 100 изображений в месяц. Он работает с множеством форматов, включая PNG, JPG, GIF, WebP и даже PDF. Он выполняет сжатие изображений с потерями и без потерь. Плагин конвертирует цветовую модель CMYK в RGB. При оптимизации создается резервная копия оригинальных файлов, что позволяет при желании восстановить их вручную. Данный плагин также поддерживает массовую конвертацию файлов.

Optimole

Optimole автоматически уменьшает размер файлов без вашего участия. При этом он выдает идеальный размер картинки для пользователя.

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

EWWW Image Optimizer Cloud- облачный плагин для оптимизации изображений

Плагин EWWW Image Optimizer Cloud оптимизирует изображения и повышает скорость работы сайта. Пользователи EWWW IO могут использовать функцию Bulk Optimizer («массовый оптимизатор»), предназначенную для сжатия имеющихся изображений.

Плагин EWWW IO позволяет конвертировать изображения в форматы нового поколения, такие как WebP или подобрать наилучший формат для изображения. Стоимость сжатия начинается от 0,003 доллара за изображение.

Функция ExactDN позволяет выполнять автоматическое сжатие (без необходимости сжатия на сервере), автоматическое изменение размера и обладает всеми преимуществами CDN.

Optimus Image Optimizer

Плагин Optimus Image Optimizer

Плагин Optimus WordPress Image Optimizer использует сжатие без потерь. Он поддерживает WooCoomerce и мультисайты, а также включает в себя функцию массовой оптимизации. Плагин также совместим с плагином WP Retina. Если вы совместите плагин Optimus Image Optimizer с плагином Cache Enabler, то сможете работать с изображениями, сохраненными в формате WebP.

WP Smush

Плагин WP Smush

Плагин WP Smush сканирует изображения и сжимает их по мере их загрузки на сайт. Он также находит и оптимизирует уже сохраненные рисунки. Он позволяет осуществлять массовое сжатие (до 50 файлов за раз). Плагин поддерживает форматы JPEG, GIF и PNG. Размер исходных файлов ограничен 1 Мб.

• Плагин совместим с WP All Import и WPML.
• Оптимизация изображений выполняется с помощью сжатия без потерь.
• У Smush есть функция автоматической установки ширины и высоты для всех изображений.

Compress JPEG & PNG images

Плагин TinyPNG использует сервисы TinyJPG и TinyPNG для оптимизации изображений в форматах JPG и PNG. Для экономии места плагин конвертирует CMYK в RBG. Он сжимает файлы JPEG до 60%, а файлы PNG до 80% без видимой потери качества изображения. У него нет ограничений на размер обрабатываемого файла.

ImageRecycle

ImageRecycle- плагин для оптимизации изображений и PDF-файлов

Плагин ImageRecyle – это автоматический оптимизатор изображений и PDF-файлов. Одной из его полезных функций является способность устанавливать минимальный размер файла для сжатия. Например, если у вас есть изображения размером 80 Кб, вы можете автоматически исключить их из процесса сжатия. Данный плагин также включает в себя функцию массовой оптимизации и автоматического изменения размеров изображений.

Эксперимент: оптимизация изображений

Мы решили провести свое небольшое исследование, чтобы показать вам как оптимизация изображений влияет на скорость работы WordPress-сайта.

Несжатые файлы JPG

Мы загрузили шесть несжатых файлов JPG на наш тестовый сайт. Размер каждого из них превышал 1 Мб. Общее время загрузки составило 1,55 секунды, а общий размер страницы -14,7 Мб.

Тест скорости передачи данных несжатых файлов JPG

Сжатые файлы JPG

Тест на скорость передачи данных сжатых файлов JPG

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

Использование формата SVG

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

• Файлы SVG автоматически масштабируются во всех браузерах и графических редакторах.
• Google индексирует файлы SVG так же, как и PNG и JPG, поэтому вам не нужно беспокоиться о SEO.
• SVG-файлы отличаются меньшим размером по сравнению PNG или JPG. Это положительно сказывается на скорости загрузки.

Файл JPG (оптимизированный размер: 81,4 Кб)

Файл PNG (оптимизированный размер: 85,1 Кб)

Файл SVG (оптимизированный размер: 6.1 Кб)

Как показано выше, SVG- файл уменьшается в размере на 92,51% по сравнению с файлом в формате JPG. А при сравнении с файлом в формате PNG – на 92,83%.

Рекомендации

• Используйте WordPress-плагины, которые сжимают и оптимизируют изображения на внешних серверах. Это снижает нагрузку на ваш собственный сайт.
• Используйте векторные изображения, где это только возможно.
• Используйте CDN для быстрого предоставления изображений посетителям со всего мира.
• Используйте эффекты CSS3 как можно чаще.
• Сохраняйте изображения в подходящем разрешении. При этом помните, что WordPress поддерживает адаптивные изображения для их предоставления без изменения размера с помощью CSS.
• Используйте веб-шрифты вместо текста внутри изображений – они выглядят лучше при масштабировании и занимают меньше места.
• Уменьшайте глубину цвета для использования меньшей цветовой палитры.
• Используйте сжатие с потерей качества, где только возможно.
• Экспериментируйте для поиска наилучших установок для каждого формата.
• Используйте GIF, если вам нужна анимация.
• Используйте формат PNG, если вам требуется высокая детализация и разрешение.
• Используйте формат JPG для фотографий общего вида и скриншотов.
• Автоматизируйте процесс оптимизации изображений.
• Используйте формат WebP в Google Chrome для отображения изображений меньшего размера.

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

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

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

Автор заинтересован в том, чтобы его текст был прочитан и интерпретирован так, как задумано. Поэтому подбор картинок к тексту сплошь и рядом — естественная задача автора. О том «Где брать иллюстрации для статей» я уже рассказывал.

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

Если у вас есть свой сайт или вы работаете с сайтом заказчика, вам наверняка придётся оптимизировать изображения, и эта статья вам поможет.

Что такое оптимизация изображений и зачем она нужна

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

Мне, как пользователю тоже нравится, когда сайт загружается быстро. Примем в качестве рабочей гипотезы, что быстрая загрузка — это благо, и за неё стоит побороться.

Идём дальше. Скорость загрузки страницы сайта зависит от множества факторов: производительности серверов хостинга, качества кода, особенностей CMS, пропускной способности интернет-канала и др. И, разумеется, быстрота загрузки страницы зависит от размера контента.

Оптимизация изображений — это одновременно наука и искусство. Мы можем назвать это искусством, потому что никто не может дать определённый ответ, как лучше всего сжать конкретное изображение. Однако это и наука, ведь в нашем распоряжении есть разработанные техники и алгоритмы, которые могут значительно уменьшить размер ресурса.
(Из Рекомендаций Google для веб-разработчиков)

Типичный контент состоит из текста и картинок, причём изображения имеют размер гораздо больший, чем текст. Для сравнения, сейчас, когда эта статья уже почти готова, её текст «весит» около 100 kB, а изображения в сумме в 30 раз больше — более 3 MB, притом что это в основном скриншоты. Если вы будете использовать для иллюстраций снимки сразу из фотоаппарата, то их размер будет ещё больше.

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

Как проверить скорость загрузки сайта

Скорость загрузки вашего сайта можно проверить, например, с помощью специального сервиса компании Google . Введите URL страницы, загрузка которой вас интересует и дождитесь результатов.

У главной страницы моего сайта хорошая скорость загрузки

PageSpeed Insights анализирует различные параметры, после чего выдаёт рекомендации и прогнозирует возможную экономию времени загрузки.

Рекомендации по оптимизации картинок на верхних строчках в списке

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

По каким параметрам оптимизируются изображения

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

• размер изображения по длинной стороне сократить до ширины контентной области сайта, которая чаще всего принимается равной 960 px;
• использовать ограниченное количество цветовых оттенков — палитра для WEB включает 216 цветов;
• выбирать для изображений форматы файлов, допускающие высокое сжатие, например, JPEG (для анимированных картинок GIF, для картинок на прозрачном фоне PNG);
• метаданные (сведения о фотоаппарате, которым сделан снимок, о программе, в которой он обрабатывался, значения выдержки, диафрагмы, геоданные и др.) не нужны и для уменьшения размера файла их следует удалить.

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

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

Ещё по теме: Короткий конспект. Грег МакКеон «Эссенциализм. Путь к простоте»

Другие примеры, когда высокая детализация изображения совершенно необходима: фото ювелирных украшений, вязаных изделий, репродукции гравюр и штриховых рисунков и т. п.

Однако перед оптимизацией стоит оценить исходное качество картинки и улучшить его настолько, насколько это возможно.

Начните с визуального качества

Это архиважный пункт:

• подправьте в фоторедакторе:
  • яркость;
  • контрастность;
  • насыщенность;

  
  

  
  

  
  

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

  Инструменты для оптимизации изображения

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

  Графический редактор

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

  Файл — Экспорт — Сохранить для Web
  File — Export — Save for Web

  или клавиатурную комбинацию Ctrl + Alt + Shift + S.

  
  

  Графический редактор — универсальный инструмент оптимизации изображений для Web

  В открывшемся диалоговом окне установите следующие настройки:

  • формат файла — JPEG;
  • качество после сжатия, например, Medium;
  • отметьте чекбокс Progressive, если хотите, чтобы изображение «проявлялось» постепенно;
  • задайте размер изображения по ширине, например, 960 px.

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

  
  

  Меняя настройки, наблюдайте за изменениями изображения в окне превью

  Переключаясь между вкладками Original и Optimized, посмотрите, как меняется картинка после сжатия по сравнению с исходной. Используйте подходящее значение Zoom (слева внизу). Если изображение не содержит мелких деталей или ими, с точки зрения содержания картинки, можно пренебречь, попробуйте ещё больше снизить качество и сократить размер файла.

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

  Получившийся файл сохраните под желаемым именем.

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

  Ещё по теме: Почему ваши вакансии никто не читает. Хроника разочарований

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

  При всех достоинствах полнофункционального графического редактора использовать его для оптимизации изображений не всегда возможно. Его у вас может просто не быть. Альтернативный вариант — воспользоваться одним из многочисленных онлайн-сервисов.

  Онлайн-сервисы

  
  

  Интерфейс онлайн-сервиса для сжатия изображений

  Можно загрузить сразу пакет изображений до 40 штук. Сервис обрабатывает их одновременно, а затем предлагает скачать одним архивом или сохранить на Google Диск или в Dropbox.

  По такому же принципу работают и другие сервисы:

  Все они дают примерно одинаковое сжатие. Пользователь не задаёт никаких настроек: загрузил файлы, подождал 2–3 минуты, скачал архив, распаковал, залил картинки на сайт.

  Однако здесь есть узкое место: перечисленные сервисы сжимают изображение за счёт уменьшения качества, удаляют из файла метаданные, но никак не изменяют размер. Поэтому, если вы загрузите для сжатия картинку шириной 5000 пикселей, на выходе вы получите те же 5000 пикселей, хотя вам для вашего сайта хватило бы и 1000. Изображения получаются «недооптимизированными».

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

  Сервис Image Optimizer позволяет задать максимальный размер изображения по ширине и высоте, но обрабатывает файлы онлайн только по одному. Если вы хотите сжимать картинки пакетами, вы можете скачать и установить десктопную версию Image Optimizer.

  Плагины для CMS

  Процесс сжатия изображений можно автоматизировать: специальные плагины сжимают изображения прямо во время загрузки в CMS. Один из таких плагинов Smush установлен на этом сайте, работающем на WordPress.

  
  

  Плагин Smush в панели управления WordPress

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

  Вы можете попробовать другие плагины: TinyPNG, Optimus, Imagify или EWWW Image Optimizer. Они различаются дополнительными функциями и ограничениями. Например, бесплатный TinyPNG не позволяет оптимизировать больше 100 изображений в месяц. Зато плагин EWWW Image Optimizer даёт возможность указать файлы, которые сжимать не требуется. Это полезно, если на вашем сайте есть изображения, для которых важно сохранить мелкую детализацию. Это могут быть, например, фото ювелирных изделий и т. п.

  Аналогичные по функционалу плагины есть для всех популярных CMS.

  Оптимизация по шагам

  1. Убедитесь, что изображения выполняют главную задачу — поясняют и дополняют текст. Лишние изображения удалите.
  2. Отредактируйте изображения до наилучшего качества: обрежьте, отрегулируйте яркость, контраст, цвет.
  3. Уменьшите размер изображения до ширины контентной части страницы вашего сайта, например, до 960 px.
  4. Подберите степень сжатия, убедитесь, что иллюстрация сохраняет необходимую детализацию.
  5. Выберите наиболее подходящий формат файла и сохраните изображение в нём.
  6. Загрузите изображение в CMS.
  7. Заполните метатеги, сделайте подпись. Впрочем, это тема следующей статьи.

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

  Читайте также:

    
  • Как создать идентификатор в teamspeak
    
  • Как в internet explorer отключить поиск яндекс
    
  • Сравнение тарифов интернет провайдеров чебоксары
    
  • Как сделать электронную подпись в втб брокер
    
  • Dr web ошибка 1066