Оптимизация изображений для web – База знаний Timeweb Community

Введение

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

1. Повышение производительности

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

1.1. Масштабирование изображений

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

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

По информации HTTP Archive, вес изображений составляет 62% от общего веса каждой страницы веб-сайта. Поэтому лучший способ оптимизации – сжатие изображений без потерь. При таком методе сжатия изображение уменьшается по весу, но при этом не теряет в качестве. Используя этот метод оптимизации, вы можете уменьшить использование своих ресурсов на 30%.

1.3. Отзывчивые изображения

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

<img src="flowers. jpg" alt="flowers">

А вот так вы можете добавить дополнительные атрибуты для того, чтобы на сайте использовались разные размеры изображения для разных дисплеев (в данном случае дисплеи с шириной экрана 160, 320, 640 и 1280 пикселей соответственно):

<img src="flowers.jpg" alt="flowers" srcset="flowers-160.jpg 160w, flowers-320.jpg 320w, flowers-640.jpg 640w, flowers -1280.jpg 1280w">

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

1.4. Использование CDN

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

1.5. Форматы изображений – PNG, JPEG, WebP, SVG

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

WebP

Этот формат был разработан корпорацией Google в 2010 году. Он позволяет наиболее эффектно сжать изображение: проведенные тесты показали, что использование WebP вместо JPEG позволяет примерно в два раза увеличить скорость загрузки страницы и более чем на 70% уменьшить ее вес.

SVG (Scalable Vector Graphics — масштабируемая векторная графика)

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

SVG.
Картинку в формате SVG вы можете вставить на свой сайт точно так же, как и другие изображения:

<img src="flowers.svg">

Совет:
в некоторых CMS (к примеру, в WordPress) файлы с этим расширением могут быть запрещены из соображений безопасности. В этом случае вам нужно воспользоваться одним из плагинов, например, SVG Support или Add Full SVG Support.

Комьюнити теперь в Телеграм

Подпишитесь и будьте в курсе последних IT-новостей

Подписаться

2. SEO-оптимизация изображений

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

2.1. Названия файлов изображений

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

Совет:
если в качестве названия вашего изображения вы хотите использовать фразу – к примеру, “Summer Flower Arrangements”, то обязательно разделяйте ее дефисами: “summer-flower-arrangements.jpg”, так как поисковый робот Google рассматривает дефис в названии файла как разделение, пробел. Если вы будете использовать нижнее подчеркивание, то робот всю фразу воспримет как одно целое слово.

2.2. Атрибут alt

Данный атрибут описывает изображение и высвечивается пользователю, если по каким-либо причинам браузер не смог загрузить саму картинку. Поэтому в этом атрибуте должна быть записана короткая, но емкая фраза, которая наиболее точно описывает изображение. Зачастую название файла и атрибут alt могут совпадать:

<img src=" summer-flower-arrangements.jpg" alt="summer flower arrangements">

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

2.3. Атрибут title

В отличие от атрибута alt, title не является обязательным к использованию, тем не менее многие советуют все же использовать его для SEO-продвижения изображений. Title-описание показывается пользователю в тот момент, когда он наводит курсор мыши на изображение, поэтому заполнение этого атрибута может быть полезным для посетителей вашего сайта. Приоритет атрибута alt выше, чем атрибута title, поэтому ждать каких-то высоких результатов после заполнения title не стоит, однако его наличие все-таки будет нелишним.

2.4. Карта сайта для изображений

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

2.5. Индексация изображений

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

Ниже вы видите пример стандартного файла robots.txt – его достаточно для того, чтобы вы точно знали, что все ваши изображения можно просканировать:

User-agent: *
Allow:
Disallow:

Первая строка (User-agent) определяет, к какому поисковому боту относится данное правило. Если вы поставите звездочку (*), то правило будет распространяться на всех роботов; либо вы можете написать название конкретной поисковой системы – Google, Yandex и т.д. Вторая и третья строчки, соответственно, отвечают за те разделы сайта, к которым робот имеет (allow) или не имеет (disallow) доступ.

Если вы используете CDN, необходимо добавить строчку rel=»canonical» в заголовок HTTP для того, чтобы поисковые боты понимали, что CDN-контент – это просто копия, а не продублированный материал:

3.

Оптимизация изображений для социальных сетей

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

3.1. Разметка Facebook Open Graph

Теги Open Graph определяют, как будет выглядеть материал при появлении на Facebook. Когда вы собираетесь поделиться какой-либо статьей, именно мета-теги задают все параметры записи: URL-адрес, заголовок, описание и, самое главное, изображение. Вы можете использовать множество разных мета-тегов, но основные из них:

<meta property="og:url" content="http://www.exmpl.com/arts.html" />
<meta property="og:type" content="article" />
<meta property="og:title" content="7 Psychology Books Every Designer Should Read " />
<meta property="og:description" content="Continuous learning. That’s one thing that applies to a lot of fields, especially to the field of design.
  " />
<meta property="og:image" content="http://www.exmpl.com /images/fb-v2.jpg" />

Эти мета-теги можно вручную добавить на любой статический сайт; если вы используете CMS (к примеру, WordPress), то это можно сделать при помощи плагина (например, Yoast SEO).

Рекомендуемый размер изображения для Facebook: 1200 на 630 пикселей.

3.2. Разметка Twitter Cards

Функции этой разметки схожи с Facebook Open Graph: они используются для отображения анонса статьи в Твиттере. Существует 4 основных вида Twitter Cards:

Summary Card: запись состоит из заголовка, описания, миниатюры и авторства;
Summary Card with Large Image: такая же запись, как и Summary Card, но с большим размером изображения;
App Card: запись с возможностью скачивания мобильного приложения;

Player Card: запись с каким-либо медиа-контентом (видео, аудио).

Ниже вы видите код Summary Card with Large Image:

<meta name="twitter:card"    content="summary_large_image" />
<meta name="twitter:description" content=" Continuous learning.  That’s one thing that applies to a lot of fields, especially to the field of design." />
<meta name="twitter:title"   content="Example article" />
<meta name="twitter:site"    content="@example" />
<meta name="twitter:image"   content="https://example.com/blog/wp-content/seo-indexing-images.png" />
<meta name="twitter:creator"  content="@example" />

Как и в случае с Facebook Open Graph, эти мета-теги можно добавить самостоятельно на любой статический сайт либо при помощи плагина на CMS.

Рекомендуемый размер изображения для Twitter: 1024 на 512 пикселей.

3.3. Сниппеты Google+

Google+ использует микроданные Schema.org в качестве главного источника получения информации для своих сниппетов, но также использует и разметку Open Graph (как Facebook). Поэтому если выше вы уже настроили эти теги, то больше вам не нужно ничего делать.

Заключение

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

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

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

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

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

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

Векторные изображения имеют основный формат svg. Файл svg можно создать прямо в текстовом редакторе с помощью тега <svg>. Также разметку svg встраивайте в веб-страницу.

Уменьшить размер векторных файлов можно, оптимизировав их с помощью решения svgo. Он очищает файлы от бесполезной информации: комментариев и скрытых ненужных элементов. Файлы становятся меньше, но качество отрисовки остается на прежнем уровне.

Оптимизируем растровые изображения 

Растровые изображения состоят из пикселей. Каждый пиксель содержит информацию о цвете и прозрачности в цветовой модели RGBA (red, green, blue, alpha — прозрачность). В браузере 256 оттенков на каждый канал цвета, который в пересчете занимает 8 битов. Каждый пиксель весит: 4 канала х 8 бит = 32 бита или 4 байта. 

Легко рассчитать вес фотографий самостоятельно, зная размер в пикселях. Допустим, изображения имеет размер 50 х 50 пикселей. Это 2 500 пикселей. 

1 пиксель = 4 байта. 
2500 пикселей х 4 байта = 10 000 байтов 
10 000 байтов / 1024 = 10 КБ

Пример расчета веса изображений для разных размеров: 

Размер изображения	Количество пикселей	Вес файла, КБ
100 х 100	10 000	39
250 х 250	62 500	244
500 х 500	250 000	977
800 х 800	640 000	2500

Изображения с множеством деталей не заменишь на векторную графику. Если фотографии просто уменьшать в размере, то при открытии в большом размере и на экранах с высоким разрешением они будут выглядеть размыто и нечетко. Это происходит из-за того, что фотография распадается на пиксели, поэтому основная задача — оптимизировать с минимальной потерей качества. Для этого есть несколько способов.

• Снижаем глубину цвета. Иногда широкая палитра для отображения цветов не нужна. Если каждый канал имеет 256 оттенков, то мы имеем более 2500 цветов. Ограничьтесь палитрой в 256 цветов всего, тогда на каждый канал будет приходиться 2 бита вместо 8, а пиксель будет весить 2 байта вместо 4. Мы уменьшили вес изображений в два раза.

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

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

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

Размер изображения больше всего лишь на 10 пикселей, но вес прибавляется существенно:

Фактический размер	Отображаемый размер	Лишний вес, пиксели
210 х 210	200 х 200	210х210 — 200х200 = 4100
510 х 510	500 х 500	510х510 — 500х500 = 10 100
910 х 910	900 х 900	910х910 — 900х900 = 18 100

Сжимаем данные 

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

		Прозрачность
		ДА	НЕТ
Анимация	ДА	GIF	—
	НЕТ	PNG	JPEG

Используйте только подходящие форматы для изображений. Например, png не сжимается с потерей данных, поэтому он всегда будет весить много. Используйте формат png только для изображений, где важно показать мелкие детали. Для этого можно использовать разные инструменты.

Сервисы для оптимизации изображений — ТОП-9

• Compressor.io

Онлайн-сервис для сжатия картинок с уменьшением веса до 90%. Работает с форматами JPEG, PNG, SVG, GIF и WEBP. Имеет три степени сжатия: • Lossy – с потерей качества, дает максимальную компрессию. • Lossless – без потери качества. • Custom – настройки задаются вручную, можно менять размер по высоте и ширине, ориентацию, формат файла. Поддерживается пакетная загрузка изображений, есть предпросмотр. Данные выгружаются на жесткий диск или в облачные хранилища Dropbox, Google Drive. В платной версии Pro есть расширенный набор ручных настроек, возможность автоматического переименования файлов.

• Compressjpeg.com

Очень простой редактор, сжимает картинки в формате JPEG, умеет преобразовывать PNG в JPEG, JPEG в PNG, SVG в PNG, работает с GIF-файлами. Загрузка до 20 картинок одновременно, скачать файлы можно в ZIP-архиве. Сервис позволяет корректировать степень сжатия для каждого изображения с предварительным просмотром.

• Imagify.io

Функциональный инструмент для работы с изображениями JPEG, PNG, PDF и GIF. В бесплатной версии максимальный размер файла до 2 МБ, в платной – без ограничений. Интегрируется с WordPress, позволяя обрабатывать картинки из панели управления сайтом. Файлы можно загружать через API по протоколу HTTPS. Доступны три режима: • Обычный – режим для щадящей оптимизации без потери качества. • Агрессивный – сжатие до 50% с потерей качества. • Ультра – экстремальное сжатие. Рекомендуется для изображений с минимальным количеством деталей. Настройки позволяют выставлять ширину, высоту, % от оригинального размера. Есть функция восстановления исходных файлов.

• Squoosh.app

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

• WebP Converter

Набор утилит от Google Page Speed для преобразования картинок и GIF-файлов в формат WEBP. Инструмент поддерживает 2 типа перекодирования: • Без потерь – объем данных меньше на 30% по сравнению с файлами JPEG, PNG, GIF. При этом сохраняется эквивалентное визуальное качество. • С потерями – существенно сокращается размер файлов, при этом инструмент прогнозирует результат сжатия. На основе прогноза адаптивно распределяются области, в которых допускается максимальная потеря данных (однородный фон, мало деталей), и области, где важно сохранить визуальную полноту картинки. Утилиты подходят для Windows, Linux, и Mac OS X.

• ILoveIMG.com

Онлайн-редактор изображений с возможностью их обработки и оптимизации. Сжимает JPEG, PNG, GIF, а так же преобразует сырые форматы TIFF и RAW в JPEG. В сервисе есть возможность добавления водяных знаков, конвертации HTML-страницы в изображение, обрезки, поворота кадра. Файлы можно загружать из Dropbox и Google Drive, предусмотрена пакетная обработка. Изображения сжимаются до наименьшего возможного размера без потери визуального качества. Платформа предлагает плагин для WordPress.

• ezGIF.com

ezGIF работает с форматами GIF, JPEG, PNG, WEBP. Для каждого формата предусмотрено несколько способов оптимизации: • GIF – сжатие за счет дизеринга, за счет уменьшения количества цветов в каждом кадре, за счет пропуска каждого n-ного кадра. • JPEG – оптимизация файла при удалении мета-данных, сжатие по размеру, сжатие по качеству от 0 до 100. • PNG, WEBP – сжатие до минимально возможного размера при сохранении качества картинки. В сервисе есть дополнительные опции: регулировка скорости, фильтры, надписи, водяной знак и создание новой гифки из видео, картинок или нескольких других гифок.

• Jpegtran

Оптимизирует изображения в формате JPEG. Утилита входит в libjpeg. С ее помощью убираются метаданные из изображения. При сжатии указывайте значение самостоятельно. Наилучшее соотношение определяется методом подбора значения от 5 до 95. Удобное средство для пакетной обработки однотипных изображений (для каталогов, карточек товаров).

• Pngquant.org

Может сжимать изображения PNG с потерями качества. Инструмент конвертирует 32-битные файлы в 8-битные с использованием векторного квантования. Обработка уменьшает размер файла в 2 и более раз. Сохраняется полная альфа-прозрачность. Применяется алгоритм подавления шума.

Прописываем мета-данные 

Название файла. Все картинки перед загрузкой на сайт называйте понятными словами, используя латиницу. Если файлы уже были названы по-русски, переведите названия, используя сервис «Транслит». Избегайте спама в названии и нечитаемых символов.

Нет	Да
дом_кп_лесное.jpeg img792138.jpeg kupit-dom-nedorogo.jpeg	dom-kp-lesnoe-front.jpeg dom-kp-lesnoe-uchastok.jpeg cottage-kp-lesnoe.jpeg

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

Нет	Да
Отдых Подмосковье  Фото378 Домик на базе отдыха цена	Въезд на базу отдыха «Лесные просторы» Интерьер домика на базе отдыха «Соловьи»

Поле Alt. Указывайте описание файла. Если он не загрузится, пользователь увидит описание из Alt. Поля title и alt могут совпадать по описанию. Лучше их заполнить одинаково, чем оставить пустыми. Обязательно добавляйте в мета-теги ключевые слова, но избегайте переспама. Делайте описания естественными и информативными.

Как легко оптимизировать изображения для Интернета (без потери качества)

Знаете ли вы, что оптимизация изображений перед загрузкой в ​​WordPress может оказать огромное влияние на скорость вашего сайта?

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

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

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

Поскольку это всеобъемлющее руководство по оптимизации изображений для Интернета, мы создали простое для понимания содержание:

• Что такое оптимизация изображений?
• Каковы преимущества оптимизации изображения?
  • Как сохранять и оптимизировать изображения для веб-производительности
  • Лучшие инструменты и программы для оптимизации изображений
  • Лучшие плагины для оптимизации изображений для WordPress
  • Заключительные мысли и рекомендации по оптимизации изображений

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

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

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

  Вот пример оптимизированного и неоптимизированного изображения:

  Как видите, при правильной оптимизации одно и то же изображение может быть на 80% меньше оригинала без потери качества. В этом примере изображение на 52% меньше.

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

  Проще говоря, оптимизация изображений работает с использованием технологии сжатия.

  Сжатие может быть «с потерями» или «без потерь».

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

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

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

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

  Каковы преимущества оптимизации изображения?

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

  • Более высокая скорость веб-сайта
  • Улучшение рейтинга SEO
  • Более высокий общий коэффициент конверсии для продаж и лидов
  • Меньше места для хранения и пропускной способности (что может снизить затраты на хостинг и CDN)
  • Более быстрое резервное копирование веб-сайта (что может снизить стоимость резервного хранилища )

  Изображения являются вторым по значимости элементом на веб-странице после видео. Согласно HTTP-архиву, изображений составляют 21% от общего веса средней веб-страницы .

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

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

  Согласно исследованию Strangeloop, задержка загрузки веб-сайта на одну секунду может стоить вам 7% продаж, на 11% меньше просмотров страниц и на 16% снижения удовлетворенности клиентов.

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

  Это означает, что, оптимизируя изображения для Интернета, вы можете повысить скорость сайта и повысить SEO-рейтинг WordPress.

  Видеоруководство

  Подписаться на WPBeginner

  Если вы предпочитаете письменные инструкции, просто продолжайте читать.

  Как сохранять и оптимизировать изображения для работы в Интернете

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

  Три вещи, которые играют огромную роль в оптимизации изображения:

  • Формат файла изображения (JPEG, PNG или GIF)
  • Сжатие (большее сжатие = меньший размер файла)
  • Размеры изображения (высота и ширина)

  Выбрав правильную комбинацию этих трех параметров, вы можете уменьшить размер изображения до 80%.

  Давайте рассмотрим каждый из них более подробно.

  1. Формат файла изображения

  Для большинства владельцев веб-сайтов единственными тремя действительно важными форматами файлов изображений являются JPEG, PNG и GIF. Выбор правильного типа файла играет важную роль в оптимизации изображения.

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

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

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

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

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

  2. Сжатие

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

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

  Большинство инструментов для редактирования изображений, таких как Adobe Photoshop, ON1 Photo, GIMP, Affinity Photo и другие, имеют встроенные функции сжатия изображений.

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

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

  Существует также несколько популярных плагинов WordPress, таких как Optimole и EWWW Image Optimizer, которые могут автоматически сжимать изображения при их первой загрузке. Это удобно, и многие новички и даже крупные корпорации предпочитают использовать эти плагины для оптимизации изображений.

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

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

  Обычно при импорте фотографии с телефона или цифровой камеры она имеет очень высокое разрешение и большие размеры файла (высота и ширина).

  Обычно такие фотографии имеют разрешение 300 DPI и размеры от 2000 пикселей и более. Хотя фотографии высокого качества хорошо подходят для печати или публикации на компьютере, их большой размер делает их непригодными для веб-сайтов.

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

  Например, мы оптимизировали фотографию с разрешением 300 DPI и размерами изображения 4900×3200 пикселей. Исходный размер файла был 1,8 МБ.

  Мы выбрали формат JPEG для более высокого сжатия и изменили размеры на 1200×795 пикселей. Размер файла был уменьшен всего до 103 КБ. это 9На 4% меньше исходного размера файла.

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

  Лучшие инструменты и программы для оптимизации изображений

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

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

  Мы рекомендуем использовать эти инструменты для оптимизации изображений перед их загрузкой в ​​WordPress, особенно если вы перфекционист.

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

  Adobe Photoshop

  Adobe Photoshop — это приложение для редактирования изображений премиум-класса, которое позволяет экспортировать изображения с меньшим размером файла для Интернета.

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

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

  GIMP

  GIMP — это бесплатная альтернатива Adobe Photoshop с открытым исходным кодом. Его можно использовать для оптимизации изображений для Интернета. Недостатком является то, что его не так просто использовать, как некоторые другие решения в этом списке.

  Сначала вам нужно открыть изображение в GIMP, а затем выбрать Файл » Экспортировать как… вариант. Откроется диалоговое окно «Экспорт изображения», в котором вы можете дать файлу новое имя. Далее необходимо нажать кнопку «Экспорт».

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

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

  TinyPNG

  TinyPNG — это бесплатное веб-приложение, которое использует интеллектуальную технику сжатия с потерями для уменьшения размера файлов PNG и JPEG. Все, что вам нужно сделать, это зайти на их веб-сайт и загрузить свои изображения, используя простое перетаскивание.

  Они сожмут изображение и дадут вам ссылку для скачивания.

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

  Для разработчиков есть API для автоматического преобразования изображений, а для новичков есть плагин WordPress, который сделает это за вас. Подробнее об этом позже.

  JPEGmini

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

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

  ImageOptim

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

  Альтернативой Windows является Trimage.

  Лучшие плагины для оптимизации изображений для WordPress

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

  Вот наш список лучших плагинов для сжатия изображений WordPress:

  1. Optimole, популярный плагин от команды ThemeIsle
  2. EWWW Image Optimizer
  3. JPEG, PNG & WebP Image Compression, плагин от упомянутой выше команды TinyPNG
  4. Imagify, плагин от популярной команды WP Rocket
  5. ShortPixel Image Optimizer
  6. Smush
  7. reSmush.it

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

  Заключительные мысли и рекомендации по оптимизации изображений

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

  Не говоря уже о том, что более быстрые веб-сайты отлично подходят для SEO, и вы, вероятно, увидите повышение рейтинга вашего сайта в поисковых системах.

  Помимо оптимизации изображения, две вещи, которые значительно помогут вам ускорить работу вашего веб-сайта, — это использование плагина кэширования WordPress и использование CDN WordPress.

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

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

  Если вам понравилась эта статья, подпишитесь на наш YouTube канал для видеоуроков по WordPress. Вы также можете найти нас в Твиттере и Facebook.

  Как оптимизировать изображения для Интернета и производительность (2023)

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

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

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

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

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

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

  
  

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

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

  Во-первых, зачем вам нужно форматировать изображения? Каковы преимущества? Оптимизация изображений для повышения производительности дает множество преимуществ. Согласно HTTP Archive, по состоянию на ноябрь 2018 г., изображений составляют в среднем 21% от общего веса веб-страницы . Поэтому, когда дело доходит до оптимизации вашего сайта, после видеоконтента изображения — это, безусловно, первое место, с которого вы должны начать!

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

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

  Вот основные преимущества:

  • Это улучшит скорость загрузки вашей страницы (см. наш пример ниже, чтобы узнать, насколько это влияет на вашу скорость). Если ваша страница загружается слишком долго, ваши посетители могут устать ждать и перейти к чему-то другому. Для получения дополнительной информации об оптимизации времени загрузки страницы см. наше подробное руководство по оптимизации скорости загрузки страницы.
  • В сочетании с отличным SEO-плагином WordPress он улучшает вашу SEO-оптимизацию. Ваш сайт будет занимать более высокие позиции в результатах поиска. Большие файлы замедляют работу вашего сайта, а поисковые системы ненавидят медленные сайты. Google также может быстрее сканировать и индексировать ваши изображения для поиска изображений Google. Хотите знать, какой процент вашего трафика приходится на поиск изображений Google? Вы можете использовать плагин или сегмент Google Analytics для WordPress, чтобы проверить трафик поиска изображений Google.
  • Создание резервных копий будет выполняться быстрее.
  • Файлы изображений меньшего размера используют меньшую полосу пропускания. Сети и браузеры это оценят.
  • Требуется меньше места для хранения на вашем сервере (это зависит от того, сколько эскизов вы оптимизируете)

  Изображения составляют в среднем 21% от общего веса веб-страницы. 😮 Оптимизируйте их! Нажмите, чтобы твитнуть
  Как клиент Kinsta, вы можете бесплатно воспользоваться оптимизацией изображений, включив автоматическую оптимизацию изображений всего за несколько кликов. Мы рассмотрим это подробнее ниже.
  

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

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

  Практически все эти оптимизации можно выполнить несколькими способами. Один из самых популярных способов — просто сжать их перед загрузкой в ​​WordPress. Обычно это можно сделать в таких инструментах, как Adobe Photoshop или Affinity Photo. Некоторые из этих задач также можно выполнять с помощью плагинов, о которых мы поговорим ниже.

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

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

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

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

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

  2. Остерегайтесь соотношения качества и размера сжатия

  Вот пример того, что может произойти при слишком сильном сжатии изображения. Первый использует очень низкую степень сжатия, что обеспечивает высочайшее качество (но больший размер файла). Во-вторых, используется очень высокая степень сжатия, что приводит к очень низкому качеству изображения (но меньшему размеру файла). Примечание. Размер исходного нетронутого изображения составляет 2,06 МБ.

  Низкое сжатие (высокое качество) JPG – 590 КБ Высокое сжатие (низкое качество) JPG — 68 КБ

  Как вы можете видеть, размер первого изображения выше составляет 590 КБ. Это очень много для одного фото! Как правило, лучше всего, если общий вес веб-страницы не превышает 1 или 2 МБ. 590 КБ — это уже четверть от этого. Второе изображение явно выглядит ужасно, но тогда оно весит всего 68 КБ. Что вы хотите сделать, так это найти золотую середину между степенью сжатия (качеством) и размером файла.

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

  Среднее сжатие (отличное качество) JPG — 151 КБ

  3. Понятие об оптимизации с потерями и без потерь

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

  С потерями: Это фильтр, удаляющий часть данных. Это ухудшит изображение, поэтому вам нужно быть осторожным с тем, насколько уменьшить изображение. Размер файла можно уменьшить на большую величину. Вы можете использовать такие инструменты, как Adobe Photoshop, Affinity Photo или другие графические редакторы, чтобы настроить параметры качества изображения. Пример, который мы использовали выше, использует сжатие с потерями.

  Без потерь: Это фильтр, сжимающий данные. Это не снижает качество, но требует, чтобы изображения были несжатыми, прежде чем их можно будет визуализировать. Вы можете выполнять сжатие без потерь на рабочем столе с помощью таких инструментов, как Photoshop, FileOptimizer или ImageOptim.

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

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

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

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

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

  Вот некоторые дополнительные инструменты и программы, которые стоит проверить:

  • Адоб Фотошоп
  • Гимп
  • Paint.NET
  • GIFsicle
  • JPEG Мини
  • OptiPNG
  • pngквант
  • Оптимизатор файлов
  • ИмиджОптим
  • Тримейдж
  • ImageResize.org
  • Функция оптимизации изображения Kinsta

  Не забывайте, что ваши методы подачи изображений так же важны, как и размер файла. Многие хосты премиум-класса, такие как Kinsta, реализуют CDN для быстрой доставки изображений и других файлов пользователям. Бесплатная интеграция Kinsta с Cloudflare также защищает все сайты на платформе, делая их быстрыми.0402 и защищены.

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

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

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

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

  Таким образом, в настоящее время все больше и больше дисплеев HiDPI, может быть хорошо найти золотую середину. Скажем, в 2 или 3 раза больше размера столбца или блока вашего веб-сайта, но все же меньше исходного размера. Браузер покажет правильный в зависимости от разрешения устройства.

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

  Медиа-настройки WordPress

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

  Imsanity подключается к WordPress сразу после загрузки изображения, но до обработки WordPress. Таким образом, WordPress ведет себя точно так же во всех отношениях, за исключением того, что участник масштабировал свое изображение до разумного размера перед загрузкой.

  Очистите вашу медиатеку

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

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

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

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

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

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

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

  Прежде чем использовать один из этих инструментов или плагинов, вам следует убедиться, что ваш провайдер веб-хостинга не предлагает встроенные инструменты, которые сделают эту работу за вас. Например, клиенты Kinsta имеют доступ к бесплатной функции оптимизации изображений, которая автоматически создает оптимизированные копии всех изображений WordPress, которые хранятся бесплатно. Меньший из двух файлов изображений затем обслуживается с помощью молниеносной CDN Kinsta, чтобы еще больше повысить скорость. Клиенты могут даже выбирать между сжатием без потерь и сжатием с потерями в зависимости от своих потребностей.

  1. Imagify Image Optimizer

  Плагин Imagify Image Optimizer

  Imagify создан той же командой, которая разработала WP Rocket, с которым, вероятно, знакомо большинство из вас. Он совместим с WooCommerce, NextGen Gallery и WP Retina. Он также имеет функцию массовой оптимизации, и вы можете выбирать между тремя различными уровнями сжатия: нормальным, агрессивным и ультра. Он также имеет функцию восстановления, поэтому, если вы недовольны качеством, вы можете восстановить одним щелчком мыши и повторно сжать на уровне, который лучше соответствует вашим потребностям. Есть бесплатная и премиум версия. Вы ограничены квотой 25 МБ изображений в месяц с бесплатной учетной записью.

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

  Изменение размера изображений в Imagify

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

  2. Optimole

  Плагин Optimole

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

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

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

  3. Оптимизатор изображения Optimus

  Плагин Optimus Image Optimizer

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

  4. WP Smush

  Плагин WP Smush

  WP Smush имеет как бесплатную, так и премиум-версию. Это уменьшит скрытую информацию от изображений, чтобы уменьшить размер без снижения качества. Он будет сканировать изображения и уменьшать их, когда вы загружаете их на свой сайт. Он также будет сканировать изображения, которые вы уже загрузили, и уменьшать их. Он будет массово обрабатывать до 50 файлов одновременно. Вы также можете вручную раздавить, если хотите. Он будет разбивать типы изображений JPEG, GIF и PNG. Размер файла ограничен 1 МБ.

  • Он совместим с некоторыми из самых популярных плагинов медиатеки, такими как WP All Import и WPML.
  • Вся оптимизация изображения выполняется с использованием методов сжатия без потерь, что обеспечивает высокое качество изображения.
  • Неважно, в какой каталог вы сохраняете изображения. Smush находит их и сжимает.
  • Smush имеет возможность автоматически устанавливать ширину и высоту для всех изображений, поэтому все ваши изображения будут изменены в одинаковых пропорциях.

  5. TinyPNG (также сжатые JPG)

  Плагин TinyPNG

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

  6. Переработка изображений

  ImageRecycle — плагин оптимизатора изображений и PDF

  Плагин ImageRecyle — это автоматический оптимизатор изображений и PDF. Этот плагин ориентирован не только на сжатие изображений, но и на PDF-файлы. Одна действительно удобная функция — возможность установить минимальный размер файла для сжатия. Например, если у вас есть изображения размером 80 КБ, вы можете автоматически исключить их из сжатия. Это гарантирует, что изображения и файлы никогда не будут сжаты слишком сильно. Он также включает в себя массовую оптимизацию и автоматическое изменение размера изображения. Примечание. У них есть бесплатная 15-дневная пробная версия, но это платная услуга, а изображения загружаются и сжимаются с использованием их серверов. Они взимают плату не за месяц, а за общее количество сжатых изображений, начиная с 10 долларов за 10 000.

  7. EWWW Image Optimizer

  EWWW Image Optimizer

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

  Бесплатный режим позволяет неограниченное сжатие JPG и преобразование WebP и отлично подходит для хобби-сайтов или блогов, которые только начинают свою деятельность. Все пользователи EWWW IO могут использовать Bulk Optimizer для сжатия своих существующих изображений или использовать режим списка библиотеки мультимедиа, чтобы выбрать определенные изображения для сжатия. Можно сканировать дополнительные папки, чтобы убедиться, что каждое изображение на вашем сайте правильно оптимизировано.

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

  Premium Compress API позволяет вывести сжатие на совершенно новый уровень без ущерба для качества и средней экономии в 50%. Он также разблокирует сжатие PDF и включает удобные резервные копии изображений на 30 дней. С дополнительным CDN Easy IO изображения автоматически сжимаются, масштабируются в соответствии с размером страницы и устройства, загружаются в режиме отложенной загрузки и преобразуются в формат WebP следующего поколения.

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

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

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

  Сначала мы загрузили на наш тестовый сайт 6 несжатых файлов JPG, каждый из которых был размером более 1 МБ. Затем мы провели 5 тестов через Pingdom и взяли среднее значение. Как видно из приведенного ниже теста скорости, наше общее время загрузки составило 1,55 секунды, а общий размер страницы — 14,7 МБ.

  Тест скорости с несжатыми файлами JPG

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

  Затем мы сжали файлы JPG с помощью плагина Imagify WordPress с «агрессивной настройкой». Затем мы провели 5 тестов через Pingdom и взяли среднее значение. Как видно из приведенного ниже теста скорости, общее время загрузки сократилось до 476 мс, а общий размер страницы уменьшился до 2,9 МБ. Наше общее время загрузки сократилось на 54,88% , а размер страницы уменьшился на 80,27% .

  Тест скорости со сжатыми файлами JPG

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

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

  Оптимизируя изображения, будь то с помощью инструмента для редактирования фотографий или плагина WordPress, вы также можете исправить предупреждение «Оптимизировать изображения», которое появляется в Google PageSpeed ​​Insights (как показано ниже).

  Предупреждение PageSpeed ​​Insights об оптимизации изображений

  Если у вас есть другие предупреждения об оптимизации от инструментов проверки скорости, обязательно ознакомьтесь с нашей публикацией в Google PageSpeed ​​Insights и нашим подробным пошаговым руководством Pingdom.

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

  Использование SVG: преимущества, которые необходимо знать

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

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

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

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

  Изображение JPG

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

  Изображение PNG

  SVG (оптимизированный размер: 6,1 КБ)

  Изображение SVG

  размер файла 92,51% по сравнению с JPG. А если сравнивать с PNG, то 92,83%. Ознакомьтесь с нашим руководством по использованию SVG на вашем сайте WordPress.

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

  Вот несколько общих рекомендаций по оптимизации изображений для Интернета:

  • Если вы используете плагин WordPress, используйте тот, который сжимает и оптимизирует изображения извне на своих серверах. Это, в свою очередь, снижает нагрузку на собственный сайт.
  • По возможности используйте векторные изображения вместе с PNG и JPG.
  • Используйте CDN для быстрой доставки ваших изображений посетителям по всему миру. Kinsta CDN имеет функцию минимизации кода, которая встроена непосредственно в панель управления MyKinsta. Это позволяет клиентам Kinsta легко включать автоматическую минимизацию CSS и JavaScript одним щелчком мыши.
  • Удалите ненужные данные изображения.
  • Обрежьте пустое пространство и создайте его заново, используя CSS для заполнения.
  • Максимально используйте эффекты CSS3.
  • Сохраняйте изображения в нужных размерах. Хотя помните, что WordPress теперь поддерживает адаптивные изображения, чтобы обслуживать их без изменения их размера с помощью CSS.
  • Всегда используйте формат файла .ico для своего фавикона.
  • Используйте веб-шрифты вместо размещения текста внутри изображений — они выглядят лучше при масштабировании и занимают меньше места.
  • Используйте растровые изображения только для сцен с большим количеством форм и деталей.
  • Уменьшите разрядность до меньшей цветовой палитры.
  • По возможности используйте сжатие с потерями.
  • Поэкспериментируйте, чтобы найти наилучшие настройки для каждого формата.
  • Используйте GIF, если вам нужна анимация. (но сжимайте ваши анимированные GIF-файлы)
  • Используйте PNG, если вам нужна высокая детализация и высокое разрешение.
  • Используйте JPG для общих фотографий и скриншотов.
  • Удалите все ненужные метаданные изображения.
  • Максимально автоматизируйте процесс.
  • В некоторых случаях может потребоваться ленивая загрузка изображений для более быстрого рендеринга первой страницы.
  • Сохраняйте изображения как «оптимизированные для Интернета» в таких инструментах, как Photoshop.
  • Используйте WebP в Chrome для показа изображений меньшего размера.
  • Используйте встроенную функцию оптимизации изображений Kinsta
  Не забудьте оптимизировать изображения, иначе ваш сайт WordPress может показаться замедленным.