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

Три части оптимизации изображений 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)

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

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

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

Сжатие изображений с потерями и без потерь

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

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

1. EWWW Image Optimizer

Плагин EWWW “the Hammer” Image Optimizer пользуется огромным успехом. Он имеет стандартную и “облачную” версии и может похвастаться более чем 100 000 закачек.

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

2. Kraken Image Optimizer

Плагин Kraken “the Shipwrecker” Image Optimizer – “профессиональный” способ автоматизировать процесс сжатия ваших изображений. Этот плагин WordPress может похвастаться более чем 4000 закачек. Он позволяет выделить на сервере область для загрузки ваших изображений в свой сервис, после чего вы сможете переписать туда свою медиа-библиотеку с оптимизированными изображениями.

3. Compress JPEG & PNG images

Это ещё один плагин, работающий по принципу “программное обеспечение как сервер”. Он является самым “молодым” в этом списке. Выпущенный в начале февраля 2015 года, он уже имеет тысячи закачек. Несмотря на название, он без потерь оптимизирует как файлы PNG, так и файлы JPG.

4. WP Smush

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

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

5. ShortPixel Image Optimizer

ShortPixel Image Optimizer – ещё один новичок. О нём пока трудно сказать что-либо определённое.

Сравнительные результаты плагинов

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

Приведём так же результаты скорости загрузки изображений в медиа-библиотеку. Было загружено 5 изображений общим объёмом 43.6 Мб.

• EWWW Image Optimizer = меньше 5 минут. Результаты были одинаковыми как с метаданными, так и без них.
• Kraken Image Optimizer = примерно 7 минут.
• TinyPNG = 10 минут.

По поводу EXIF-данных

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

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

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

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

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

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

Kraken – самый дорогой из трёх вариантов. Но тут есть несколько важных моментов. Во-первых, он имеет “микроуровень”, то есть $5/месяц за 500Мб изображений. Обратите внимание, что это ограничение касается размера данных, а не изображения. Во-вторых, Kraken – это больше, чем просто оптимизатор изображений. В Pro версии вам будет доступно облачное хранилище на сервере, куда вы сможете поместить резервные копии ваших изображений, которые вы оптимизировали через веб-интерфейс.\

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

Заключение

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

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

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

1. Ограничить размер больших изображений, которые загружают с Imsanity .
2. Автоматически оптимизировать эти изображения с помощью TinyPNG.
3. Убедиться, что эти изображения являются SEO-дружественными SEO Friendly Images .
4. Организовать эти изображения, используя библиотеку Enhanced Media Library .
5. Сделать картинки адаптивного размера по размеру экрана, используя RICG Responsive Images .

Естественно, в пункте 2 можно поменять TinyPNG на EWWW или Kraken, кому что больше нравится.

После изучения темы в интернете оказалось что в сентябре 2017 года Google Pagespeed поменял алгоритм, теперь он хочет чтобы все изображения были меньше webp q75 + 9%. Webp в среднем сжимает на 40% больше чем Jpeg. То есть добиться такого размера от Jpeg и сберечь качество изображения нереально. То есть свалу нет, придется использовать Webp. Но Webp поддерживается только Chrom и Opera. Firefox и Safari их не понимают. Просто пере конвертировать изображения в Webp не поможет. Но есть такой трюк. Можно создать по два файла для каждого изображения.
Нормальный и wepb. И выдавать браузерам поддерживающим webp — webp, а не поддерживающим — нормальный файл. Выбор файла выполняется Apache mod_rewrite. Нужно в.htaccess добавить такой код.

RewriteEngine On
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{REQUEST_URI} .*(jpe?g|png|gif)$
RewriteCond %{DOCUMENT_ROOT}/$1.webp -f
RewriteRule (.*) $1.webp


Header append Vary Accept env=REDIRECT_accept

AddType image/webp .webp

Для генерации webp файлов нашел бесплатный плагин Opti MozJpeg Guetzli WebP. Он очень интересно сделан, чтобы не устанавливать кодеки изображений на сервер (а у меня хостинг и туда они и не поставляться) можно скачать с сайта плагина виртуальную машину для Oracle Virtual Box. В ней стоит Linux, ssh сервер и кодеки изображений (MozJpeg, Guetzli, WebP). Нужно запустить виртуальную машину у себя на компе, подключить плагин к ней по ssh. И плагин будет по ssh ганять изображения и оптимизировать их в виртуальной машине. То есть я как бы сам для себя облако. Вот этим немного извратным способом я таки оптимизировал изображения и создал для них webp дубликаты. Google Pagespeed полностью снял все претензии к изображениям.

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

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;
• Нет ограничений на размер файлов;
• Массовая оптимизация.