Как сжать картинку для сайта?

Сжать картинку для сайта SEO оптимизация сайта
Какой формат изображений выбрать для блога: JPEG, GIF, PNG или WebP? Как лучше сжать картинку для сайта: разбор на конкретных примерах.

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

Помимо этого картинки играют и чисто эстетическую роль на сайте. Рекомендуется написать статью предварительно в ворде, проверить текст на уникальность, исправить ошибки… Вы так делали? Значит Вам знакомо чувство чтения «простыни»… Другое дело та же статья на сайте с картинками, таблицами, блоками внимания….

А раз уж мы учимся создавать информационный блог, то количество изображений на сайте будет исчисляться тысячами. А Вы знаете, что к каждой загруженной картинке WordPress автоматически создаёт ещё целую серию миниатюр разного размера? Ситуация явно затруднительная: сайт дольше грузится, а его размер растёт «как на дрожжах».

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

Особенности форматов JPEG, GIF, PNG и WebP

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

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

Растровые изображения — это графические матрицы, состоящие из отдельных квадратиков (пикселей), каждый из которых имеет свой цвет.

Размер картинки указывается количеством пикселей по ширине и высоте 1200х500 px или общим количеством 2000х500=1.000.000 (1 мегапиксель)

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

Формат JPEG (Joint Photographic Experts Group)

Название формата Джейпег произошло от названия группы разработчиков.

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

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

Каждый раз когда Вы открываете картинку, чтобы отредактировать а потом снова её сохраняете, Вы теряете в качестве! Не используйте JPEG формат для многоэтапной обработки.

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

Есть режим сжатия и без потерь (lossless JPEG), но для веб он не подходит из-за большого размера.

.jpg и .jpeg — это расширения для названий JPEG файлов. По сути это одно и тоже, а букву «e» пришлось удалить т.к. старые операционные системы не поддерживали более трёх символов после точки.

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

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

Формат GIF (Graphics Interchange Format)

GIF формат (произносится как «джиф» или «гиф») был разработан ещё в 1987 году для передачи изображений в сети и долгое время пользовался широкой популярностью.

В отличие от JPEG данный формат хранит изображение в сжатом виде без потери качества, а также поддерживает прозрачность фона и создание анимаций (их часто называют «гифками»).

Однако GIF формат способен хранить не более 256 цветов, поэтому при использовании фото явно будут искажения из-за преобразования цветовой палитры.

Формат PNG (Portable Network Graphics)

PNG формат (произносится как «пинг») разрабатывался для использования в интернет, как бесплатная альтернатива лицензионному GIF, поэтому неофициально название расшифровывается как «PNG is Not GIF».

Новый формат позволил сжать картинку лучше и дал 5-25% экономии места.

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

Информация об изображении в файле .png хранится в сжатом виде без потери качества, что явно выделяет его по сравнению с JPEG. Кроме того, он способен поддерживать и полноцветные изображения (а значит и оттенки и переходы будут отображаться корректно), что не может делать GIF.

PNG формат может иметь различную глубину цвета:

  • PNG-8 (8-битный PNG) поддерживает прозрачность, но цветовая палитра имеет ограничение в 256 (28) цветов. Очень популярен в веб-дизайне из-за маленького размера.
  • PNG-24 (24х-битный TrueColor PNG, ) поддерживает 16,7 млн цветов (256 вариантов на каждый канал 28х28х28=16 777 216), по качеству цветопередачи превосходит JPEG, но файл будет больше на 30-40%.
  • PNG-32 — не корректное название, на самом деле это тот же 24-битный цвет + 8 на альфа-канал. Т.е. используется 16 777 216 оттенков цветов и 256 градаций прозрачности.

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

Существует некоторая путаница в терминологии при указании количества бит, поэтому хочу немного подробнее остановиться на этом. В Photoshop мы обычно пользуемся 8-битными RGB изображениями, однако на самом деле используется 24-битный цвет.

Дело в том, что каждое цветное изображение состоит из трёх каналов (красный, зелёный и синий), смешением которых мы получаем все остальные цвета. Photoshop имеет ввиду количество битов на один канал, т.е. 8х3=24. Каждый пиксель изображения будет описываться 24 битами (8 для красного, 8 для зелёного и 8 для синего).

Формат WebP (Web Picture)

WebP (произносится как Weppy) — современный формат изображений, разработанный компанией Google в 2010 году. Вы можете сэкономить порядка 30% веса Вашего сайта (а можно и больше) всего лишь сконвертировав картинки. При этом качество останется без видимых изменений.

Его цветопередача на уровне PNG, он хорошо передаёт как графику, так и фото. Мало того, WebP поддерживает прозрачность и анимации. Справедливости ради нужно отметить, что WebP не работает в цифровом пространстве RGB (3 цвета), происходит кодирование изображения в цветовую модель YUV (яркость + 2 цвета).

Это формат нового поколения, он явно превзошёл своих предшественников. Однако ему пришлось целых 10 лет доказывать своё преимущество. Окончательно он победил в 2020 году, когда Apple обновил Safari и теперь ещё 20% пользователей получили возможность широко использовать WebP. Итак, на сегодняшний день его уже поддерживают все современные браузеры: Google Chrome, Opera, Firefox, Safari, Edge.

Меня очень заинтересовал этот формат и я стала его использовать на своём сайте ещё до того, как WordPress позаботился об этом. Мне даже пришлось внести дополнительный код, чтобы провести эксперименты на моём блоге. Результат был впечатляющий: в ряде случаев мне удавалось сэкономить до 50% веса картинки!

К счастью, Вам уже ничего не придётся добавлять в код, потому что в последнем обновлении (сентябрь 2021) WordPress 5.8.1 включил WebP в список используемых форматов .

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

Facebook ещё 2013 году начал внедрять новый формат, но встретил сопротивление среди пользователей, потому что люди не знали как открывать модные файлы: большинство графических редакторов не работало с WebP.

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

Что нас ждёт в будущем? Google разрабатывает новый формат WebP 2, который возможно придёт на смену старому.

Как определить ширину картинки для статьи?

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

DevTools (Developer Tools) — инструменты разработчика

Откройте любую Вашу статью, можно даже воспользоваться примером страницы от WordPress. Нажмите правую кнопку мышки и выберите Inspect (Посмотреть код), в большинстве браузеров также можно открыть панель разработчика с помощью F12:

Посмотреть код

С правой стороны у Вас появится панель DevTools, Вы можете её отсоединить в виде отдельного окна. Для этого нажмите на три точки и выберите режим отделения. Чтобы Вы смогли выбирать различные элементы сайта для просмотра нажмите на значок со стрелочкой в верхнем левом углу:

Настройка панели разработчика DevTools

Определение ширины элемента сайта

Выбираем абзац (параграф) с текстом и смотрим его размеры, так в моём случае ширина 690 пикселей:

Определение ширины элемента с помощью DevTools

Выбор формата для изображения

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

Сравнение трёх форматов для одной картинки

Формат PNG-8 хорошо справился с тонкими линиями и резкими переходами, но с градиентным фоном и цветопередачей оказался бессильным.

JPEG дал более приемлемый результат, но надо признать, что изображение при сильном сжатии таки «поплыло».

Формат WebP показал себя лучшим как по размеру так и по качеству. Достаточно плавные переходы, чёткие линии, разборчивые буквы на порядок выше конкурентов.

Мой личный выбор WebP. Данный сайт только создаётся и я хочу идти в ногу со временем даже в ущерб тем читателям, которые пользуются устаревшими браузерами, например Internet Explorer. Он не поддерживает WebP и не будет обновляться, а с 2022 года Microsoft полностью прекратит поддержку Internet Explorer.

Как открыть файл WebP?

С каждым днём всё большее количество сайтов переходит на WebP формат и у новичков может возникнуть страх, что делать со скаченной картинкой. Вы сохранили файл, но не знаете как его посмотреть? Самый простой способ изменить ситуацию — это изменить настройки файла. Нажмите правую кнопку мышки и выберите опцию Открыть с помощью / Google Chrome:

Открыть файл WebP с помощью Google Chrome

В следующий раз WebP картинки будут открываться автоматически.

Онлайн-конвертер Ezgif.com

Для конвертации форматов JPEG и PNG в WebP я использую бесплатный онлайн-сервис Ezgif.com. Большой плюс, что есть предварительный просмотр и можно для каждой фотографии подобрать свои параметры оптимизации (сжатия), добиваясь наилучшего результата.

В зависимости от картинки мне удаётся выиграть 20-50% от JPEG варианта. Давайте рассмотрим как это сделать.

Конвертация PNG to WebP

Если исходный файл PNG, то переходим в PNG-WebP конвертер, загружаем картинку:

Загрузка файла в Ezgif конвертер

После этого появляется кнопка Преобразовать в WebP:

Конвертация PNG формата в WebP

Вы сразу видите результат, как правило я больше ничего не трогаю и сохраняю файл:

Созранение полученного файла

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

Конвертация JPEG to WebP

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

Итак, откройте конвертер JPEG/WebP, загрузите файл и преобразуйте его в WebP. В моём случае произошло уменьшение фала почти в 3 раза, из 140 kB миниатюра стала весить 49 kB. Теперь нажмите кнопку Оптимизировать:

Оптимизировать WebP

Затем настройте наилучшее соотношение размер/качество:

Оптимизация формата WebP с помощью сервиса Ezgif

Я выбрала качество в 75% и получила картинку ещё в три раза меньше, теперь моя миниатюра весит всего лишь 15 kB, именно её Вы и видите в данной статье.

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

Плагин WebP Format для Photoshop

Чтобы Ваш Photoshop стал работать с WebP нужно скачать плагин и скопировать файл WebPFormat.8bi учитывая Вашу версию в папку Plug-Ins:

c:/Program Files/Adobe/Adobe Photoshop (Ваша версия)/Plug-Ins/

Если же у Вас Photoshop CC 2017, то копировать нужно в папку File Formats:

c:/Program Files/Adobe/Adobe Photoshop CC 2017/Required/Plug-Ins/File Formats/

Если у Вас установлены обе версии Photoshop (32 и 64 bit), то нужно в каждую скопировать соответствующий файл.

Всё! Теперь загрузите Photoshop и пользуйтесь! Теперь Вы можете как открыть WebP файл, так сконвертировать с другого формата, используя функцию Сохранить как / WebP:

WebP формат в Photoshop

Плагин WebPShop от Google

На сайте поддержки от Adobe я нашла внешний модуль WebPShop, который так же позволяет работать с WebP в фотошопе. По словам разработчика, для обычных фото, подготавливаемых для веб-сайтов степень сжатия можно выбирать 70 и меньше, а вот для малоцветных картинок, скриншотов, чёрно-белых текстов алгоритм сжатия может показать лучший результат при качестве 98 и более.

Данный модуль устанавливается в общую папку и работает для всех установленных версий Photoshop. Итак, файл WebPShop_0_3_3_Win_x64.8bi нужно разместить в папку:

c:/Program Files/Common Files/Adobe/Plug-Ins/CC/File Formats/

Откройте Photoshop, теперь Вы можете как открывать файлы WebP, так и конвертировать картинки с помощью функции Сохранить как / WebPShop.

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

Модуль WebPShop

Как сохранить картинку для статьи в JPEG и PNG?

Давайте проведём эксперимент: сохраним ту же миниатюру, но в классических форматах JPEG и PNG. Рассмотрим процесс на примере графического редактора Photoshop.

Фотошоп для этого случая имеет специальную функцию «Сохранить для Web»:

Сохранить для Web в Photoshop редакторе

Для JPG варианта я установила качество 30%, при этом размер файла составил 26 kB.

Сохранить для Web JPEG

Качество картинки при этом на том же уровне, что и миниатюра для этой статьи (15 kB в WebP формате). При 10% качестве картинка уже выглядит не презентабельно, а весит 18 kB.

Давайте теперь попробуем для сравнения сохранить эту же миниатюру в формате PNG. Снова заходим в раздел фотошопа «Сохранить для Web», но теперь выбираем настройки для PNG. Я попробовала сохранить и в PNG-8 и PNG-24, но в первом случае возникли проблемы с оттенками, а во втором — с размером:

Сравнение качества PNG-8 и PNG-24

Заключение

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

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

Лично я сейчас работаю по такой схеме:

  • Сохраняю готовую картинку в максимальном качестве JPEG.
  • Конвертирую JPEG с помощью Ezgif в WebP (Photoshop у меня иногда подвисает и нет времени перезагружать его).
  • Оптимизирую вручную каждую картинку, добиваясь минимального размера для каждого конкретного изображения.

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

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

Буду рада Вашим отзывам, комментариям, замечаниям. Делитесь Вашим мнением и опытом.

Поделиться с друзьями
Светлана Стецко

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

Оцените автора
( Пока оценок нет )
SiteFromZero'21
А как Вы сжимаете картинки для сайта?