Оптимизация картинок для WordPress

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

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

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

Важность оптимизации изображения

Согласно Snipcart, три основные причины, по которым изображения влияют на ваш сайт WordPress:

  • Они слишком большие. Используйте меньшие размеры.
  • Их слишком много, что требует большое количество HTTP-запросов. Помогает использование CDN.
  • Они способствуют синхронной загрузке элементов вместе с HTML, CSS и JavaScript. Это увеличивает время рендеринга. Постепенное отображение изображений (с помощью отложенной загрузки) не позволит загружать изображения одновременно с другими элементами, что ускорит загрузку страницы.

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

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

Есть много инструментов, которые проверяют скорость вашего сайта. Самый простой метод — это Pingdom.

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

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

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

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

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

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

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

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

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

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

Как ускорить ваш сайт WordPress

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

Кэширование

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

Кэширование на самом деле это очень просто. Независимо от того, делаете ли вы это вручную или устанавливаете плагин, оно может быть реализован на вашем сайте довольно быстро. Одними из лучших плагинов являются WP Super Cache и W3 Total Cache и WP Fastest Cache — они бесплатны и имеют лучший рейтинг в официальном репозитории WordPress.org.

CDN (Сеть доставки контента)

CDN будет запрашивать содержимое вашего сайта с серверакоторый ближе всего доступен для ваших читателей. Это означает, что он хранит копию вашего сайта во многих дата-центрах, расположенных в разных местах по всему миру. Как только посетитель заходит на ваш сайт через свое домашнее местоположение, ближайший сервер запросит ваш контент, что приведет к ускорению загрузки. Cloudflare и MaxCDN (сейчас StackPath) — самые популярные решения для WordPress.

GZIP Сжатие

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

И WP Super Cache, и W3 Total Cache оснащены функцией сжатия GZIP, которую можно включить после установки. Кроме того, многие популярные провайдеры хостинга WordPress уже включили эту функцию через свои стандартные пакеты. Чтобы узнать, включено ли сжатие GZIP на вашем сайте, используйте этот инструмент для быстрой проверки.

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

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

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

Оптимизация картинок

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

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

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

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

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

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

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

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

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

Оптимизация изображений на сайте вручную

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

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

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

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

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

Альтернативой JPG и PNG может быть WebP, формат веб-изображений, представленный Google, который призван обеспечивать даже меньшие размеры, чем JPG (или любые другие форматы), сохраняя качество изображения аналогичным последнему. Формат WebP допускает варианты сжатия с потерями и без потерь. По данным Google, изображение WebP может быть на 34% меньше, чем изображение JPG, и на 26% меньше, чем изображения PNG.

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

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

Давайте сделаем быстрый тест. Я сохранил изображение JPG, содержащее множество цветов, а затем преобразовал его в формат PNG. После преобразования фото стало намного больше по размеру. Затем я использовал инструмент ImageResize.org для сжатия обоих изображений (я выбрал этот инструмент, потому что он позволял мне сжимать оба формата и использовать файлы размером более 1 МБ).

Это не сжатое изображение:

И это результаты:

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

Давайте сделаем еще один тест. Я сохранил скриншот моей панели WordPress как в формате JPG, так и в формате PNG. Затем я использовал один и тот же ImageResize.org для сжатия каждого формата. Стоит отметить, что файл PNG был сохранен в значительно меньшем размере, чем JPG.

Это изображение:

Результаты после сжатия:

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

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

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

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

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

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

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

Например, если вы хотите, чтобы ваши изображения были удобными для Retina, отредактируйте их, используя в два раза больший размер экрана для лучшего качества. Изображение на скриншоте имеет 428×321 пикселей, поэтому для лучшего качества Retina сделайте его 856×642 пикселей.

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

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

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

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

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

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

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

У JPEG Optimizer и JPEG.io процент сокращения составляет около 60%, а у TinyPNG (если вы решили работать с PNG) — около 70%. Kraken хорош для обоих форматов, возвращая файлы примерно на 70% меньше за счет сжатия с потерями.

Пользователи Mac могут попробовать ImageOptim, который сжимает форматы JPG и PNG до 50%.

Установить автоматическую оптимизацию изображения

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

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

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

Мы собираемся сравнить Optimole, ShortPixel и Smush.

OPTIMOLE

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

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

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

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

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

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

SHORTPIXEL

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

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

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

Если вы хотите оптимизировать их все сразу, просто выберите Bulk Actions -> Optimize with ShortPixel (или любой из его подпунктов) и нажмите Apply. Ваши изображения будут сжаты в течение нескольких минут.

Кроме того, ShortPixel позволяет автоматически конвертировать PNG в JPG, создавать версии изображений для WebP и оптимизировать файлы PDF. Он также обеспечивает преобразование CMYK в RGB. Он работает с сервисом Cloudflare CDN для загрузки оптимизированных изображений на облачный сервер.

SMUSH

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

Он также имеет массовое сжатие, ленивую загрузку, автоматическую PNG в JPG и интеграцию CDN. Как и ShortPixel, Smush также добавляет состояние сжатия для каждого изображения в медиатеке, поэтому вы можете управлять ими по отдельности или в большом количестве.

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

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

Я взял следующее изображение размером 904 КБ с MyStock.photos и провел серию тестов с тремя представленными выше плагинами.

Вот как сжимают єту картинку плагины:

  • Optimole: 555 КБ (312 КБ, если выбрать высокий уровень сжатия)
  • ShortPixel: 197.87 КБ
  • Smush: 894 КБ

Optimole и ShortPixel используют сжатие с потерями, в то время как Smush использует сжатие без потерь.

Следующий тест еще более интересен.

Я загрузил это изображение на свой сайт WordPress и впоследствии использовал его в своем блоге. И Optimole, и ShortPixel автоматически уменьшили его размер, чтобы он соответствовал моему разрешению экрана и разметке поста. Таким образом, вместо того, чтобы использовать изображение размером почти 1 МБ, сокращенное до размера поста, я теперь использую то же изображение, уменьшенное до максимального размера дисплея. Плагины нашли нужный размер и размеры, необходимые в моем блоге, и соответственно изменили изображение.

И вот какие результаты для каждого плагина:

  • Optimole: 158 КБ, 524×394 пикселей
  • ShortPixel: 71,7 КБ, 768×577 пикселей
  • Smush: не оптимизировал

При этом важно отметить две вещи:

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

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

Вот как это должно выглядеть на живом сайте:

Теперь давайте кратко рассмотрим, как эти плагины адаптируются к экранам мобильных устройств:

Я следовал той же рутине. Я активировал один плагин одновременно и запросил ту же страницу веб-сайта через мой мобильный телефон (Android). Результаты:

optimole image optimization test result mobile

Optimole: 96 КБ, 389×292 пикселей

shortpixel image optimization test result mobile

ShortPixel: 19 КБ, 300×225 пикселей.

Smush: не оптимизировал изображение для мобильных устройств.

Скриншот с мобильного устройства

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

Завершение

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

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

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

Перевод статьи image Optimization In WordPress

Если у вас остались вопросы или есть интересные темы для статьи, которые хотите что бы я подсветил, оставляйте свои комментарии 🙂
И еще, подписывайтесь на наш телеграм-канал, чтобы вы всегда были вкурсе новых статей, книг и курсов 😉

Оставьте ответ

comment-avatar

*