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

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

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

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

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

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

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

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

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

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

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

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

1. Ускорьте загрузку страницы
2. Улучшение SEO (поисковая оптимизация)
3. Уменьшите нагрузку на сервер
4. Уменьшите общий размер веб-сайта, чтобы он требовал меньше ресурсов.
5. Будьте в курсе важных задач по обслуживанию WordPress

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

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

1. Первые десять секунд сильно влияют на то, как долго пользователи остаются на веб-страницах. Читатели откажутся от вашей страницы или публикации, если весь контент не отобразится в течение этого короткого промежутка времени.
2. В 79% случаев, если пользователя не устраивает скорость сайта, он никогда не вернется на этот сайт, потому что скорость убийца.
3. Хуже того, 47% недовольных пользователей не только откажутся от вашего сайта лично, но и будут отговаривать других пользователей, рассказывая друзьям о своем опыте. Они также более склонны оставлять отрицательные отзывы в социальных сетях и Google.

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

Факторы, влияющие на скорость загрузки страниц WordPress

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

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

Для молниеносного сайта важно:

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

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

2. Оптимизируйте кеширование вашего веб-сайта

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

3. Используйте качественный хостинг WordPress.

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

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

4. Оптимизировать код

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

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

Разработчикам необходимо минимизировать код:

• Удаление форматирования и комментариев
• Избавляемся от лишних пространств
• Удаление запятых и неиспользуемого кода

Важно минимизировать код во всех ваших ресурсах, включая HTML, JavaScript и CSS. Для минимизации вашего HTML мощным инструментом является HTMLMinifier. Для JavaScript попробуйте UglifyJS. Также стоит изучить компилятор Closure. Когда дело доходит до вашего CSS, CSSNano - хороший выбор.

5. Сократите количество переадресаций

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

Это означает, что ваши перенаправления идут, например, с example.com> example.com/subdomain> example.com/subdomain/redirect.html. Целевая страница будет очень трудно загрузиться за три секунды или меньше при выполнении этих нескольких перенаправлений.

Одно перенаправление - это нормально. Больше одного обычно нет.

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

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

WordPress автоматически сжимает изображения?

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

• Функция сжатия изображений, представленная в WordPress 5.3, определяет, когда загружается большое изображение, а затем автоматически генерирует оптимизированные для Интернета версии изображения.
• При загрузке изображения автоматически меняются до 2560 пикселей - нового полного размера в WordPress.
• При изменении размера загружаемого изображения к имени файла добавляется слово «масштабировано».
• Если автоматическое изменение размера изображения не удается из-за тайм-аута на сервере, WordPress будет постоянно повторять попытки, пока не будет создано оптимизированное изображение.

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

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

Полная оптимизация изображений в WordPress - не такая уж сложная задача.

Есть три основных способа оптимизации изображений для вашего сайта WordPress:

1. Плагины для оптимизации изображений WordPress, которые позволяют выполнять работу прямо из панели администратора WordPress.
2. Предварительная загрузка программного обеспечения / приложения оптимизатора изображений. Эти приложения могут быть либо программным обеспечением с открытым исходным кодом, таким как оптимизатор изображений, либо, как минимум, фоторедактором, либо платными приложениями, которые предоставляют возможности регулировки размера изображения. Photoshop - это пример программного обеспечения премиум-класса, которое позволяет настраивать разрешение изображения для сжатия изображений для использования в Интернете.
3. Бесплатные онлайн-сервисы, которые сжимают и оптимизируют ваши изображения перед их загрузкой в ​​WordPress.

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

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

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

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

Параметры инструмента оптимизации изображений перед загрузкой

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

1. Настольный фоторедактор

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

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

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

2. Мобильные приложения и онлайн-фоторедакторы

Приложения для редактирования фотографий и онлайн-фоторедакторы (такие как Fotor и Pixlr) созданы для базового редактирования фотографий. Многие из этих инструментов также включают опции для оптимизации ваших изображений перед их загрузкой в ​​WordPress.

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

3. Веб-компрессоры изображений

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

Просто введите в Google термин «онлайн-компрессор изображений» и выберите бесплатный вариант с наиболее интересным названием. Большинство из них работают точно так же.

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

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

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

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

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

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

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

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

Какое разрешение изображения лучше всего?

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

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

А как насчет соотношения размера и веса?

Цвета играют важную роль в том, сколько «весит» изображение. Простая черно-белая фотография размером 1000 × 800 пикселей с очень небольшим количеством элементов может весить около 100 КБ. Однако фотография точно такого же размера в пикселях, с высокой контрастностью и яркими цветами иногда будет весить более чем в восемь раз больше.

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

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

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

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

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

Файлы JPEG (или .jpg) идеально подходят для всех растровых изображений (изображений, состоящих из пикселей, а не линий). В частности, фотографии почти всегда сохраняются в виде файлов JPEG.

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

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

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

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

Польза от оптимизации изображений для сайтов WordPress?

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

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

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

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

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

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

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

Показатель отказов

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

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

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

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

Приоритизация страниц

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

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

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

А это плохо для бизнеса.

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

Думайте о метаданных как о информации, дающей больше информации о другой информации.

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

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

Вам потребуется ввести данные для следующих областей:

• Альтернативный текст
• Заголовок
• Подпись
• Слизняк

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

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

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

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

Но когда ваш сайт начинает расти, готовы ли вы к угрозам безопасности, которые могут возникнуть с ним? Мощный плагин безопасности WordPress, такой как iThemes Security Pro, может пресечь эти угрозы в зародыше, прежде чем они станут проблемами.

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

Теперь приступим к оптимизации изображений WordPress!

Кристен Райт

Кристен пишет учебные пособия, чтобы помочь пользователям WordPress с 2011 года. Обычно вы можете увидеть, что она работает над новыми статьями для блога iThemes или разрабатывает ресурсы для #WPprosper. Вне работы Кристен любит вести дневник (она написала две книги!), Ходить в походы и кемпинги, готовить и ежедневные приключения с семьей, надеясь жить более настоящей жизнью.