ОПТИМИЗАЦИЯ И СЖАТИЕ ИЗОБРАЖЕНИИ В WORD PRESS-ПОШАГОВАЯ ИНСТРУКЦИЯ СО ВСЕМИ ИНСТРУМЕНТАМИ

Оптимизация изображений WordPress автоматически с помощью плагина Image optimization & Lazy Load by Optimole.

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

Автоматически сжимайте, оптимизируйте и обслуживайте масштабированные изображения вместе с WebP. Формат WebP обеспечивает более эффективное сжатие по сравнению с PNG или JPEG, поэтому такие изображения загружаются наиболее быстрее.

Автоматически оптимизируйте изображения на сайте WordPress

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

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

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

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

Это намного проще, чем другие плагины сжатия изображений. Плагин Image optimization & Lazy Load by Optimole делает всю тяжелую работу за вас в фоновом режиме, плюс — он передает изображения через CDN для еще лучшей производительности. Ваши изображения будут обслуживаться с CDN, а не с вашего основного сервера. Это уменьшает время загрузки и использование полосы пропускания. Инструмент поддерживает все типы изображений, а также Retina и WebP (если браузер посетителя поддерживает новый формат).

Оптимизация и отложенная загрузка изображений в WP

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

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

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

Сжатие изображений — это только верхушка айсберга. Optimole делает ваш сайт намного быстрее в целом!

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

Как только вы установите и активируете плагин, вам будет предложено зарегистрировать учетную запись и ввести свой личный ключ API, который позволит вам подключиться к услуге Optimole (сервис по оптимизации изображений):

Зарегистрируйтесь для получения ключа API

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

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

После посещение своей почты вернитесь в админ-панель WordPress (раздел Медиафайлы — Optimole).

На следующем экране скопируйте и вставьте ключ API, полученный в электронном письме, и нажмите Подключиться к Optimole Service:

Введите свой ключ API и подключитесь к Optimole

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

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

Отличительной особенностью Optimole является то, что он работает на автопилоте. На этом этапе Optimole уже настроен на работу с автопилотом на большинстве сайтов WordPress. Он берет все ваши изображения и автоматически оптимизирует их. Круто!

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

Основные и расширенные настройки оптимизации изображений

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

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

В заключение

Плагин очень прост в использовании — вы просто загружаете его, вставляете свой ключ API, и он начинает работать автоматически. Полностью автоматизирован, установили и забыли. И благодаря благодаря плагину Image optimization & Lazy Load by Optimole все ваши изображения будут на 80% меньше весить, а выглядят они, так же хорошо. Ваши посетители не заметят ничего странного с вашими оптимизированными картинками.

Автоматически сжимайте и оптимизируйте ваши изображения на сайте WordPress и будет вам счастье! А ваш сайт будет работать быстрее. Удачи вам, дамы и господа.

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

Оптимизация изображений WordPress — это самый простой способ ускорить загрузку вашего сайта ВордПресс!

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

Начну, пожалуй, с небольшой вводной. А что меня привело к написанию данного поста? Может, кто уже в курсе, что я создал новый сайт о криптовалюте, немного наполнил его контентом и как обычно решил проверить ресурс на скорость загрузки веб-страниц на сервисе PageSpeed Insights от Google.

Оптимизируйте изображения, грозно выдал сервис. Надо, так надо. Решил посмотреть, какой плагин для сжатия и оптимизации картинок есть в официальной директории WordPress.org, кроме тех о которых я написал ранее. Выбрал плагин по популярности (сколько раз загрузили и когда обновлялся).

Выбор пал на Smush Image Compression and Optimization (Сжатие и оптимизация изображений) — активных установок более 900 000 и обновление вышло неделю назад. Ну что же, раз такое дело, будем его проверять, а может даже и использовать постоянно. Конечно и другие похожие плагины не забудем проверить.

Smush — Lazy Load Images, Optimize & Compress Images

Smush — отложенная загрузка изображений, оптимизация и сжатие изображений. Уменьшайте размеры файлов изображений, повышайте производительность и улучшайте SEO с помощью бесплатного WordPress Smush API:

Smush — Lazy Load Images, Optimize & Compress Images

Плагин WP Smush — Lazy Load Images, Optimize & Compress Images использует внешний сервис для сжатия изображений. Оптимизируйте изображения, включите ленивую загрузку, измените размер, сожмите и увеличьте скорость своей страницы Google с помощью невероятно мощного и 100% бесплатного средства сжатия изображений WordPress.

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

Далее, я опять проверил сайт на скорость загрузки страниц в PageSpeed Insights. Результат у меня получше, но всё равно в жёлтом цвете. Скорее всего из-за размера картинок, надо посмотреть, какие правильные размеры нужны для сайта. Пока размер фоток менять не буду, пусть пока будет так.

Жалко что, в бесплатной версии плагина есть ограничение: максимальный размер файлов для сжатия всего 1 мегабайт и сжатие нескольких изображений только по 50 штук за один раз. Smush может удовлетворить все ваши потребности по оптимизации изображений, бесплатно!

Надо на всякий случай попробовать, на этом блоге, другой плагин, например, оптимизатор изображений ShortPixel (ShortPixel Image Optimizer). Про него я уже вам рассказывал.

Что можно ещё использовать для своего веб-ресурса?

Оптимизация изображений с EWWW Image Optimizer

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

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

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

Сам его пока не проверял, но советуют спецы по ВордПресс (Константин Ковшенин), также, как и выше плагин. Плагин на русском языке, активных установок более 900 000, постоянно обновляемый. EWWW IO — единственный плагин, который позволяет оптимизировать изображения с помощью инструментов на вашем собственном сервере (jpegtran, optipng, pngout, pngquant, gifsicle, cwebp).

Эти утилиты включены в дистрибутив плагина в виде исполняемых файлов и запускаются плагином через функцию PHP exec(), которая у многих хостинг-провайдеров отключена в целях безопасности.

Оптимизация картинок с помощью плагина

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

Плагин для изменения размера изображений — Resize Image After Upload

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

Также имеет возможность принудительного повторного сжатия файлов JPEG:

Изменить размер изображения после загрузки

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

Этот плагин автоматически изменяет размеры изображений (JPEG, GIF и PNG), когда они загружены, в пределах заданной максимальной ширины и/или высоты, чтобы уменьшить использование пространства на хостинге, ускорить ваш сайт, сэкономить ваше время и улучшить SEO вашего сайта.

Представьте, что сейчас изображения могут весить более 4-5 МБ, а с помощью этого плагина вы можете уменьшить их до 100-200 КБ без каких-либо дополнительных усилий с вашей стороны!

Кроме того, плагин может принудительно повторно сжимать загруженные изображения JPEG и преобразовывать PNG в JPEG (если они не имеют слоя прозрачности), независимо от того, были ли изменены их размеры или нет.

Это просто, просто попробуйте, это безопасно и бесплатно!

Найденные плагины Image Optimizer

А если ключевое слово в поиске поменяете с Image Optimizer на Optimizer Image, то появится другой список подходящих плагинов. Список большой, это у меня на скриншоте влезло маловато.

Напомню вам, конвертировать все ваши изображения в WebP можно автоматически, читайте инструкцию.

Ладно, не буду больше отнимать у вас время, не маленькие, сами разберётесь. Пойду дорабатывать свой новый сайт, Гугл же просит, а ему отказывать нельзя, себе дороже. Удачи вам. Надеюсь пост был вам полезен. До новых встреч. Пока, пока.

Обнуление в панели

Обнуление величин в админке WP

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

Размеры ширины и высоты

Ширина и высота изображения влияет на вес. Не нужно выставлять большой размер, если объект все равно подстроится под контента. Посмотрим, как определить максимальную ширину картинки на WordPress. На области контента нажимаем правой кнопкой мыши, выбираем «Просмотреть код».

Выделяем область контента

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

Блок вывода текста

Лучший бесплатный плагин Tiny png

Отличным автоматизированным решением является бесплатный плагин оптимизации изображений Tiny png. Находим и устанавливаем через админку стандартным поиском .

Регистрация на сервисе

На почту придет письмо активации, нажимаем на синюю кнопку.

Копируем API ключ из панели сервиса.

Вставляем ключ, если автоматическая подстановка не произошла, в соседнее окно в плагине

Успешное обновление подписки tinypng

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

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

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

Зайдите в медифайлы в админке, там появится новый раздел Bulk optimization, тут можно с помощью массовой оптимизации обновить хоть 100 изображений за раз.

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

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

Есть множество дополнений без ограничений, Tiny Png применяет современные технологии в оптимизации изображений не только на WordPress. Сжать картинки можно и на самом онлайн сервисе .

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

Настройка без потери качества и размера в фотошоп

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

Для начала настроим ширину и высоту по максимальному значению, которое узнали ранее с помощью браузера.

Ширина в фотошопе

Инструмент сохранить для WEB

Смотрим на настройки качества и уменьшаем, пока не начнутся искажения.

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

Новое значение размера

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

Еще одним параметром оптимизации является SEO. Тут есть только два пункта атрибут ALT и подпись. В современных реалиях больше ценится околокартиночный текст. Для того чтобы оптимизировать картинку в WordPress нажимаем знак карандаша.

Панель плагина по сжатию картинок

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

Проставляем alt и подпись

Если предпочитаете больше видео, чем текст, то смотрите мой видеоролик.

Мы разобрали все аспекты оптимизации картинок для CMS WordPress, от момента определения размеров до поиска. Надеюсь статья стала полезной. Успехов!

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

Не грузите полный размер

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

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

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

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

Я захожу на страницу статьи, кликаю по тексту правой кнопкой мыши и выбираю «Исследовать элемент». У пользователей MacOS этот пункт меню называется «Показать программный код страницы». Теперь у нас появляется вот такая вставка с кодом:

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

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

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

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

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

5 лучших сервисов для сжатия картинки без потери качества

На установке нужного размера ваши действия не заканчиваются. Следующий пункт — сжатие изображения. Для этого существует масса бесплатных онлайн-сервисов.

Например:

Сайт, которым пользуюсь лично я, называется Tinypng. Он совершенно бесплатный. Работает просто: загружаете картинки, а сервис ужимает их в среднем на 60-80% без потери качества.

Следующий сервис, который даже популярнее, чем Tinypng, — это Kraken. Тут можно сжимать сразу несколько изображений, загружая ZIP архив или пользуясь импортом из Google диска или с Dropbox.

Compressor.io — ещё один отличный сервис для сжатия изображений. Возможность массовой загрузки файлов тут отсутствует. Изображения уменьшаются в среднем на 60-80% без потери качества.

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

И последний, но не менее важный — Jpeg-optimizer.com. Дизайн может и не самый современный, зато со своими функциями сервис справляется на отлично. Он позволяет точно выставить уровень сжатия. Рекомендую для веб-страниц выставлять значение 80 в пункте «Compress Image».

Помимо сжатия тут можно ещё и сразу изменить размер изображения.

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

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

Теперь мы с нашей фотографией добрались аж до самой консоли сайта. Пусть она пройдёт ещё один фильтр — оптимизацию. В WordPress существует множество плагинов для выполнения этой функции. Сегодня я расскажу вам про лучшие пять:

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

WPMU DEV предлагает сразу несколько плагинов для ускорения сайта. И WP Smush — часть этой группы. Он занимается сжатием изображений пачками либо в момент их загрузки на сайт. Есть платная и бесплатная версии, в бесплатной можно обрабатывать не более 50 изображений подряд. Поддерживаемые для оптимизации форматы: JPEG, PNG и GIF.

Вот такой робот Optimus уменьшает размер изображений на 70%. Но у него есть ограничение — 100 kB. Он работает как с исходными изображениями, так и с только загружающимися на сайт.

Бесплатный онлайн-сервис TinyPNG, о котором мы говорили выше, можно установить и в качестве плагина. Он сжимает файлы только форматов JPEG и PNG.

Главное отличие плагина Short Pixel — возможность обработки PDF-файлов и совместимость с WooCommerce. В остальном он выполняет все те же функции, что и предыдущие сервисы.

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

Настройка lazy loading изображений

Есть ещё один способ ускорения сайтов при помощи оптимизации изображений. Это настройка отложенной или ленивой (lazy) загрузки. Такую функцию использует очень много сайтов.

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

Когда стоит настраивать отложенную загрузку?

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

Как сделать отложенную загрузку изображений?

Для этого используется атрибут loading, он задаёт условия загрузки. Он устанавливается как для фотографий с тегом img, так и для медиа с тегом iframe.

Для отложенной загрузки (когда картинка грузится по мере необходимости) мы ставим параметр lazy:

Вот вы и узнали, как правильно оптимизировать картинки. Теперь они точно не заставят ваш сайт оставаться позади быстрых соперников! Пользуйтесь советами из статьи и ускоряйте свой ресурс. Удачи!

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

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

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

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

В этом посте мы рассмотрим 8 творческих способов оптимизации изображений для молниеносного сайта WordPress!

Способы оптимизации изображений в WordPress

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

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

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

Используйте устаревшие отчеты GTmetrix, чтобы увидеть больше оптимизаций изображений

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

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

Правильный размер изображений

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

В результате важно убедиться, что все изображения на вашем веб-сайте имеют правильный размер. Самый простой способ сделать это — использовать программу редактирования изображений, такую ​​как Photoshop или GIMP, чтобы изменить размер изображений перед их загрузкой на свой веб-сайт.

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

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

Отложить закадровые изображения

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

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

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

Подавайте изображения в форматах нового поколения

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

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

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

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

Эффективное кодирование изображений.

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

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

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

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

Укажите размеры изображения

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

Скорее, это относится к количеству пикселей на дюйм (PPI). Изображение шириной 1000 пикселей и высотой 500 пикселей имеет разрешение 1000×500.

То же изображение с разрешением 200 PPI будет иметь разрешение 5×2.5 дюйма. При загрузке изображений на веб-сайты или отправке их в электронном виде важно указать как размеры, так и разрешение. Таким образом, получатель сможет просмотреть изображение в правильном размере.

Подавайте изображения из CDN

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

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

Заключение — 8 способов оптимизировать изображения в WordPress для повышения скорости 2023

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

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

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

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

Начните оптимизировать изображения на своем веб-сайте WordPress сегодня и воспользуйтесь всеми преимуществами повышения скорости сайта и повышения рейтинга SEO!

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

Для чего оптимизировать изображения

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

Разберем на примере. Представьте сайт интернет-магазина с 1000 товаров. Каждый из них нужно показать покупателям, то есть сопроводить не только текстовым описанием с ценой, но и фотографией. Если размер одного изображения — 2 МБ, то все вместе они будут весить больше 2 ГБ и занимать много места на хостинге. Кроме того, из-за размера файлов страницы товаров будут грузиться медленно.

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

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

Благодаря сжатию можно сократить изначальный вес файла вплоть до 80–90%. При этом важно не переусердствовать, ведь чрезмерная оптимизация приведет к потере качества. Изображение будет мутным, нечётким и вряд ли понравится посетителям.

Для каталога товаров в интернет-магазине оптимальный размер картинок — примерно 70–150 КБ. Если на вашем сайте меньше изображений, нужно смотреть по ситуации и скорости загрузки сайта. В среднем оптимальный вес каждого файла — 200 КБ–1 МБ).

Как оптимизировать картинки

Оптимизация изображений зависит от их типа:

Несколько наиболее распространенных способов оптимизации:

Ниже рассмотрим работу с картинками в WordPress.

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

В каталоге WordPress представлено более тысячи решений для работы с картинками:

Мы рассмотрим 2 самых популярных плагина: Smush (1 млн установок) и Compress JPEG & PNG Images (200 тыс. установок).

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

Как установить и настроить плагин сжатия изображений WordPress

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

Готово, так вы сможете сжимать изображения для быстрой работы сайта.

Полезные рекомендации от PageSpeed Insights

Сжатие картинок WordPress — не единственный способ улучшения. Для SEO-оптимизации также будут полезны и другие меры. Например, перенесение всего тяжелого контента на отдельный домен и подключение CDN (Content Delivery Network). Оно позволит увеличить скорость загрузки за счет использования распределённой системы серверов. Благодаря этому, как бы далеко ни находились пользователи от исходного сервера вашего сайта, контент для них будет загружаться быстрее.

Кратко о компрессии и плагинах для сжатия изображений

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

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

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

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

7 лучших плагинов WordPress для сжатия картинок

Далее рассмотрим лучшие WordPress-расширения, сжимающие изображения на этапе их загрузки на сервер.

Тестирование компрессоров

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

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

ShortPixel Adaptive Images

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

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

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

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

Как и большинство таких плагинов, по умолчанию ShortPixel распространяется бесплатно. Но это только если вы оптимизируете не больше сотни картинок в месяц. Увеличение этого значения повысит стоимость до 5 долларов в месяц.

Imagify

Imagify работает в трех режимах: Normal, Aggressive и Ultra. Первый сохраняет качество картинки, второй уменьшает размер, ухудшая качество, а третий делает то же, что и второй, но еще более заметно.

Второй режим включен по умолчанию, поэтому показатели эффективности Imagify такие высокие.

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

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

Стоимость плагина варьируется в зависимости от размера оптимизируемых картинок. Если за месяц вы отправляете «худеть» файлов меньше чем на 1 гигабайт, то платить не придется. А вот за большее придется – как минимум 5 долларов в месяц.

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

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

Optimole дружит с конструкторами сайтов в духе Elementor и Beaver Builder, а также встроенным редактором в WordPress 5. Интерфейс прямолинеен, хорошо задокументирован, построен интуитивно понятно.

Есть и другие приятные мелочи:

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

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

Пользователи ценят Smush за проактивность. Сразу после подключения к WP-блогу он предлагает не только оптимизировать вновь загруженные картинки, но и провести переоптимизацию всего контента, что уже имеется на ресурсе.

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

Одно из ключевых преимуществ Smush — возможность сжимать неограниченное количество картинок бесплатно. Разработчики установили ограниченный размер для каждого изображения (он не должен превышать 5 мегабайт), но не на их количество. Поэтому можно использовать плагин без ограничений по времени, не заплатив ни копейки. Но есть и Pro-версия с поддержкой формата WebP. Она убирает все ограничения и добавляет режим сжатия с потерей качества. Цена зависит от того, как много сайтов будут использовать одну лицензию Smush. Для одного достаточно учетной записи Hobbyist. Она обойдется в 70 долларов за год. Чтобы установить плагин на 5 сайтов, придется отдать 140 долларов за год.

EWWW Optimizer

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

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

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

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

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

WP Compress

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

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

Но это не все возможности плагина. Разработчики решили не останавливаться только на картинках, поэтому научили WP Compress обрабатывать JS-скрипты, CSS-файлы и даже SVG.

Стоимость зависит от объема загружаемых в месяц данных. За 25 Гбайт просят 9 долларов ежемесячно. За 125 Гб — 29 долларов в месяц.

Robin Image Optimizer

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

Robin сжимает картинки в формате PNG и JPG, уменьшая их размер на 80% без заметной потери качества. Разработчики достигли таких внушительных значений за счет изменения цветовой гаммы и удаления EXIF-данных с изображений. Детализация и разрешение остаются прежними. Алгоритм Robin творит чудеса, и невооруженным взглядом заметить ухудшения в картинке не выйдет.

Также с Robin можно:

Плагин распространяется бесплатно. Но есть платная версия, добавляющая поддержку формата WebP, компрессию в директорию на выбор и интеграцию с галереей NextGEN. Цена зависит от количества компрессируемых картинок. Например, за 39 долларов в год можно оптимизировать 5000 файлов в месяц.

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

Я рекомендую Robin Image Optimizer. Считаю, что это идеальный баланс характеристик.

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