Wp сжатие изображений на лету. Как подключить OptiPic к WordPress для сжатия изображений? Функции, доступные и в платной, и бесплатной версии

Faq 16.06.2019

Здравствуйте! Уже давно не стоит вопрос, что нужно оптимизировать на сайте для «поисковой любви», а что может и так сойти. Действительность такова, что оптимизировать нужно всё (). Причем одно цепляется за другое и все сотни правил индексации и ранжирования, работающие в поисковых алгоритмах, давно переплелись в единый клубок. Например, фотографии на сайте нужно оптимизировать обязательно.

Три части оптимизации изображений WordPress

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

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

  • Оптимизация до добавления фото на сайт;
  • Оптимизация при добавлении фото в статью;
  • Массовая оптимизация фото на сайте без выгрузки.

Оптимизация изображений WordPress (SEO) при вставки в статью, анкоры изображений

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

Полная HTML структура добавления фото в wordpress, выглядит так.

Без подписи фото:

С подписью фото:

Подпись фотографии

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

Атрибуты добавляются в режимах « » или в режиме «Редактировать фото».

Правила для анкора фотографии

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

Вывод 1

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

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

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

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

  • Наиболее легкие фотографии в расширении jpeg.
  • Формат png и скриншоты в pnp самые тяжелые.

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

  • Стандартный инструмент Microsoft Office (отличное сжатие при изменении размера до 448x);

оптимизация изображений WordPress программой Microsoft Office 2010
  • Отличная программа Fast Stone Image Viewer (http://www.faststone.org/). Этоотличный редактор с возможностью хорошего группового сжатия и изменения формата фото;

оптимизация изображений WordPress программой FastStone
  • Программа (https://saerasoft.com/caesium/). Это бесплатная программа, с отличным одиночным или групповым сжатием фотографий в формате jpeg.

оптимизация изображений WordPress программой Caesium
  • Рекомендую программу (sourceforge.net/projects/nikkhokkho/files/latest/download). в отличие от Ceasium эта программа на Windows сожмет любые форматы картинок.

Вывод 2

Сжимать фотографии нужно до добавления на сайт WordPress.

Массовая оптимизация изображений Вордпресс

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

Для оптимизации фотографий уже помещенных в медиабиблиотеку WordPress используем плагин: EWWW Image Optimizer (протестирован на версии 4.4.2.). Плагин простой, но рабочий периодически обновляется. Плагин Cloud (2) позволяет оптимизировать фотографии с использованием облачных технологий и сжимает фото, без смены формата. Этот плагин платный, 0,005 $ за фото до 1000 фото.

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

После активации плагина он готов к работе, но можно пройтись по настройкам (Настройки→ EWWW Image Optimizer) Настройки на русском, опасные настройки выделены словом «Внимание!». Кстати, есть функция переформатирование фотографий из png и gif в jpeg. После настроек открываем страницу плагина и запускаем процесс оптимизации.

Через некоторое время, смотрим результаты сжатия фотографий. Отмечу, что я всегда сжимаю фото до сайта, однако плагин EWWW Image Optimizer умудряется «выжать» из каждой фото, от 5% до 20 %.

Вывод 3

WordPress, при помощи дополнительного плагина (плагинов), позволяет оптимизировать фотографии всей медиабиблиотеки сайта, в любой момент.

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

  • Старайтесь выбирать векторные форматы изображений. Их качество не зависит от разрешения и размеров, из-за этого они отлично смотреться на больших мониторах и разных устройствах.
  • Для SVG-ресурсов : сжимайте их, удаляете XML-разметку, проверьте настройку GZIP сжатие для SVG файлов.
  • Для растровых фото : выберете свой масштаб и свой формат для растровых фото, избегайте GIF, сжимайте фото перед добавлением на сайт (), не бойтесь снижать качество фото, уменьшайте по мере возможности цвет (оптимально 256 цветов), удаляйте ненужные метаданные (

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

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

Особенности плагина Compress JPEG & PNG Images

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

Как это работает?

После того как вы загрузите изображение на свой WordPress сайта, каждый изменения размера изображение будет загружено на TinyJPG или услуги TinyPNG. Ваше изображение анализируется, чтобы применить наилучшее сжатие. Исходя из содержания вашего образа выбирается оптимальная стратегия. Результат отправляется обратно на ваш сайт где медиафайл заменяется оригинальный файл с заданным размером.

В среднем изображения JPEG сжимаются на 40-60% и изображений PNG на 50-80% без видимой потери качества. Ваш сайт будет загружаться быстрее для ваших посетителей, и вы будете экономить дисковое пространство и пропускную способность!

Установка и настройки плагина

Найти плагин вам можно в админпанели, вбив название «Compress JPEG & PNG Images» в окно поиска плагинов. Сразу после загрузки и активации, обратите внимание на строки в самом верху на списком плагинов. Там будет присутствовать ссылка, переход которой и дальнейшие несложные действия, предоставят вам возможность получить ключ API.

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

После того, как получите ключ, вы можете сразу же начать сокращение изображений. Вы можете представить PNG или JPEG файл с любым клиентом HTTP. Сервер будет сжимать изображение и отвечать с URL, где вы можете захватить результат.

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

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

Особенности API

  • Сжатие PNG и JPEG изображения;
  • Автоматическое обнаружение PNG и JPEG изображений;
  • Изменение размера PNG и JPEG изображения;
  • Сохранение (размеры) изображение на Amazon S3;
  • Загрузить один раз, сжимать и изменить размер нескольких раз.

Для документации и другие примеры вы можете исследовать API Reference .

Ценообразование

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

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

Изображения загружены с API Цена на изображения

  • Первые 500 изображений в месяц бесплатно
  • Следующая 9 500 изображений в месяц $ 0,009 за изображение
  • Более 10 000 изображений в месяц $ 0,002 за изображение

Инструкция по установке

  1. Введите ключ API TinyPNG или TinyJPG и настройте размеры изображений для сжатия на специальной странице админпанели вашего сайта.

  1. Посмотрите, как много места занимают ваши картинке на странице «Медиафайлы».

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

Для того, что бы зараз сжать ВСЕ имеющиеся на вашем сайте картинки с вышеуказанными расширениями, нужно в админпанели перейти из строки «Инструменты» на страницу «Comhress All Images»(Сжать все изображения):

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

(Visited 133 times, 1 visits today)

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

Зачем необходимо такое дополнение?

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

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

Можно же вручную…

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

Какие плагины подойдут лучше?

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

  • SEO Friendly Images

    добавляет название и описание к вашим изображениям. Без атрибутов «alt » «title » в коде точно никуда. Первый – поможет поисковым системам, а второй – отобразит название при наведении мышки на картинку.

  • EWWW Image Optimizer

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

  • Сw-image-optimizer

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

  • Imsanity

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

  • WP Smush.it

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

  • Hammy

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

  • Pb-responsive-images

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

  • Media File Renamer

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

  • BJ Lazy Load

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

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

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

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

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

До скорого!

P/S

С уважением, Александр Сергиенко

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

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

Сжатие изображений  - неотъемлемая часть общей оптимизации сайта. Можно выполнить все пункты Google PageSpeed Insights, но увидеть нечто подобное:

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

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

Поэтому, оптимизируем изображения вручную.

Шаг 1: Отключаем лишнее

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

Создатели Wordpress и WooCommerce считают, чем больше различных миниатюр создается, тем это лучше для сайта.

Я с этим не согласен, поэтому для себя выделил три вида изображений : маленькая миниатюра (200х200 пикселей), средняя миниатюра (400х400 пикселей) и оригинал (1000х1000 пикселей).

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

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

Неправильно настроенный сайт WordPress генерирует множество ненужных миниатюр. Поэтому, перейдем к настройке.

  1. Миниатюры для блога настраиваются в меню Настройки › Медиафайлы:

2. Изображения товаров настраиваются в меню WooCommerce › Настройки › Товары › Отображение:

Как вы заметили, мы всюду установили одинаковые размеры. Итого у нас генерируется три вида изображений: маленькое, среднее и оригинал. Так ли это? Оказывается, нет.

В папке с изображениями находим миниатюры размером 768х768 пикселей. О том, что они сгенерированы системой говорит их название, например big-sale-768x768 .jpg

Так как мы таких размеров явно не задавали, подозрение падает на плагины и тему.

В WordPress есть функция add_image_size() для создания миниатюр:

add_image_size("custom-size", 768, 768, true);

В каком-то из файлов php прописан похожий код. С помощью программы Folder Find Text ищем текст add_image_size(и изучаем найденные файлы с помощью Notepad++.

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

Шаг 2: Очищаем сайт от мусора

После задания новых размеров миниатюр нам нужно пересоздать их. Этот процесс называется regenerate thumbnails .

Для этого нам понадобиться установить плагин Force Regenerate Thumbnails . Он удалит старые изображения и создаст новые, к сожалению, не оптимизированные.

Не лишним будет вручную выкачать файлы из папки /wp-content/uploads на компьютер и удалить лишние.

К примеру, у нас почему-то остались изображения размером 140х140 пикселей, смело удаляем их:

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

Еще один способ найти неиспользуемые изображения - перейти в панели управления сайтом в раздел Медиафайлы > Библиотека и выбрать из выпадающего списка пункт Неприкрепленные:

Неиспользуемые по мнению системы изображения

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

Шаг 3: Оптимизируем изображения

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

Вариант 1: Оптимизировать на сервере (долго)

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

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

Вариант 2: Оптимизировать на компьютере (быстро)

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

Вариант 3: Оптимизация на лету

Установить плагин Jetpack от WordPress.com , который использует CND для изображений. Данная функция называется “Производительность с изображениями”. К сожалению, у данного плагина есть и один большой недостаток - он очень грузит сайт.

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

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

WP smush

WP smush уменьшает размер изображения , не ухудшая при этом качества. Использование этого плагина увеличит быстродействие вашего веб-сайта. Инструмент оптимизирует и новые изображения, и уже загруженные.
Особенности:
  • Оптимизация файлов типа JPEG, PNG и GIF;
  • Автоматическая оптимизация вложенных файлов;
  • Возможность массовой оптимизации до 50 изображений за раз;
  • Оптимизирует без потери качества;
  • Есть платная и бесплатная версии WP smush. Для начинающих пользователей бесплатной версии будет более, чем достаточно.

Optimus - оптимизация изображений на Wordpress

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

CW image optimizer

Плагин для WordPress CW image optimizer имеет ту же функцию, что и EWWW и WP smush - уменьшает размер изображений до оптимального. Может оптимизировать все изображения в блоге за раз, а также автоматически уменьшает размер всех картинок, что вы загружаете.
Качество изображений при этом не страдает, плагин уменьшает размер изображений, ничем при этом не жертвуя.
Особенности:
  • Быстродействие;
  • Работает на вашем сервере , без использования API.

Lazy load

Это ещё один хороший оптимизатор изображений . Плагин Lazy load отличается тем, что загружает изображения только тогда, когда они находятся в поле зрении пользователя.
Его не нужно настраивать, все что требуется - это установить. Для загрузки изображений используется .sonar.

Compress JPEG and PNG images

Compress JPEG and PNG images оптимизирует изображения , чтобы увеличить скорость загрузки страницы . Для этого используется технология TinyPNG.
Может изменять размер изображений, которые уже есть на сайте, а также новых, перед их загрузкой.
Особенности:
  • Позволяет менять размеры изображения на заданные вами;
  • Автоматически сжимает новые и уже загруженные изображения;
  • Работа с множеством сайтов с одним ключом API;
  • Нет ограничений на размер файлов;
  • Массовая оптимизация.



Рекомендуем почитать

Наверх