Средний размер веб-страницы - 2,4 Mb и 64% приходится на изображения. Вы все правильно поняли: средний размер изображений на веб-странице - 1,5 Mb .
Какой размер страниц на вашем сайте?
Если на вашем сайте много изображений или на них приходится значительная доля объема страницы, необходимо их оптимизировать для уменьшения размера. С уменьшением изображений связаны следующие преимущества:
- уменьшение общего размера страницы;
- экономия трафика;
- сокращение времени загрузки страницы и повышение SEO рейтинга.
- Самостоятельные инструменты : На сайте ничего устанавливать не нужно. Просто зайдите на страницу сервиса, загрузите изображения и получите оптимизированные изображения.
- Плагин WordPress : Установите плагин на ваш сайт на WordPress и, в зависимости от выбранных настроек, размер изображения будет сокращаться при загрузке на сайт.
- Расширение для Joomla : Установите расширение на ваш сайт на Joomla и изображения будут оптимизированы на вашем сервере с Joomla.
Самостоятельные инструменты
Возможно, это наилучший способ сжатия изображений, но могут быть ограничения по размеру или количеству изображений. Попробуйте сами и найдите наиболее подходящее решение.1. Tiny PNG
Для уменьшения размера файлов PNG или JPG на TinyPNG используются методы сжатия с потерями. Можно загружать до 20 изображений, размер каждого из которых не может превышать 5 Mb.
2. Compressor
Compressor позволяет сжать изображения с уменьшением объема до 90% и при этом сохранить высокое разрешение. Он работает с JPEG, PNG, GIF и SVG-файлами. Ограничение по размеру - 10 Mb.
3. Puny PNG
PunyPNG подходит для дизайнеров и разработчиков. Не годится для работы, если размеры ваших изображений исчисляются мегабайтами: ограничение по размеру - 500 KB, по количеству файлов - 20 штук. Возможно сжатие JPG, GIF и PNG-файлов.4. Compress Now
Уменьшите размер изображений с помощью Compressnow . Этот инструмент хорош тем, что вы можете задать процент сжатия.То есть, вы сами решаете насколько сжимать файл.5. Kraken
При оптимизации Kraken позволяет вам выбирать между сжатием с потерями, без потерь и с возможностью самостоятельной настройки. Файл можно загрузить с компьютера, Dropbox, Google drive или Box.6. Optimi Zilla
Загрузите до 20 JPEG или PNG-файлов на OptimiZilla . Если вы загружаете несколько файлов, то скачать их все можно одним архивом.7. JPEG Mini
Избавьтесь от лишних килобайт с помощью JPEG Mini . Возможна обработка исключительно файлов JPG.8. Imagify
Здесь можно выбрать из нескольких уровней сжатия: нормальным, агрессивным и ультра-сжатием. Файлы хранятся до 24 часов на Imagify , так что их можно скачать позже, если захотите.
Вышеуказанные самостоятельные инструменты помогут вам в уменьшении размера файлов. А теперь давайте рассмотрим плагины для WordPress.
Плагины WordPress:
Следующие плагины можно установить на WordPress, и, когда вам потребуется загрузить изображения, произойдет их оптимизация.1. EWWW Image Optimizer
EWWW Image Optimizer - один из лучших плагинов для оптимизации. Он позволяет уменьшать размер изображений, а также выбирать файлы, для которых оптимизация производиться не будет. Это очень полезно, если ваш сайт имеет отношение к фотографии, и вы не хотите ухудшать качество определенных снимков.
2. WP Smush
Этот замечательный плагин от wpmudev установлен более 400 тысяч раз. Он позволяет сжимать изображения партиями или в момент загрузки на сайт. В бесплатной версии WP Smush позволяет обрабатывать до 50 изображений подряд. Плагин обрабатывает файлы в форматах JPEG, PNG и GIF.
3. Optimus
Optimus от KeyCDN помогает уменьшить изображения до 70%, но есть ограничение по размеру - 100 kB.- оптимизация исходных изображений;
- оптимизация во время загрузки.
4. TinyPNG
Выполните сжатие файлов в формате JPEG и PNG с помощью TinyPNG . Именно этим инструментом пользуюсь я, и он меня всем устраивает.
5. Short Pixel
Short Pixel сжимает не только изображения, но и PDF. Инструмент совместим с WooCommerce и обрабатывает GIF, PNG, JPG и PDF-файлы.
Эти плагины для WordPress должны ускорить работу сайта, уменьшив размер изображений.
Расширения для Joomla
Следующие расширения бесплатны, так что попробуйте и решите, что подходит именно вам.1. Imgen
Бесплатный плагин осуществляет динамическое изменение размера изображения и позволяет добавить водяной знак. Imgen также позволяет зашифровать путь к изображению, так что можно скрыть путь к исходному файлу.2. Image Recycle
Image Recycle - популярное расширение для Joomla, помогающее оптимизировать изображения и PDF-файлы. Можно настроить автоматическое сжатие новых изображений или уменьшить размер уже существующих. Также существует возможность задать уровень оптимизации для отдельных типов файлов..
Здравствуйте!
Сегодня мы подробно изучим, как оптимизировать картинки разных форматов при загрузке на блог. Ранее на моем блоге была статья о том, . В продолжение данной темы, мы поглубже вникнем в вопросы, связанные с оптимизацией изображений, рассмотрим различные плагины и программы и выберем наиболее подходящий вариант для вашего ресурса.
Что такое оптимизация изображений и для чего она нужна?
Кроме того, большое количество тяжелых картинок занимают лишнее место на , впоследствии увеличивая ваши ежемесячные расходы.
Конечно, при сжатии картинок стоит обратить внимание на их финальное качество отображения. О том, как это сделать мы поговорим в следующем разделе.
Кроме сжатия изображений, стоит также уделить внимание . Для этого необходимо указывать alt картинок (title можно оставлять пустым, либо дублировать alt). Общие правила использования:
- Alt состоит из 3-5 слов, но не более 250 символов;
- Использование ключевых запросов для продвижения;
- Не вставлять в один alt более одной ключевой фразы (не спамить);
- Текстовое описание картинки должно соответствовать изображению.
Если с сео-оптимизацией картинок непосредственно при загрузке на сайт все более-менее понятно, то вопрос сжатия изображений для WordPress-блога требует дополнительного рассмотрения. Так же, как и редактирование неоптимизированных картинок, ранее загруженных на сайт.
Программы для работы с изображениями
В идеале, чтобы по минимуму нагружать свой сайт, необходимо обрабатывать картинки до загрузки на сайт: редактировать размер, сжимать объем.
В среднем оптимизированная картинка для статьи блога весит не больше 50 Кб. Размер изображения по ширине составляет 400-800 px, но не больше контентной области сайта.
Стоит отметить, что WordPress во время добавления изображений автоматически создает 3 дополнительных размера вашей картинки. В итоге мы получаем Original, Large, Medium и Thumbnail size.
Различные размеры изображений используются для миниатюр к статьям, анонсов и т.д. Однако, если вы хотите, чтобы загружался только один вариант картинки, проставьте в полях Width/Height в данных настройках нули (Настройки – Медиафайлы).
Перейдем к рассмотрению способов сжатия изображений без потери качества для web.
Программа пакетной обработки картинок XnView
Такая программа, как Photoshop слишком массивна для наших целей и требует определенных профессиональных навыков для работы.
Есть множество других вариантов обрезки и сжатия картинок для загрузки на сайт, но у некоторых из них есть значительный недостаток. Они не позволяют обрабатывать большое число изображений сразу.
А вот программа XnView для этих целей как нельзя кстати. Она используется для работы с изображениями различных форматов от самых распространенных png, gif, img, tif, bmp, pdf, jpeg, до более специальных. В ней есть функции добавления текста и водяных знаков на изображение, изменения цвета, отражения, поворота, обрезки, добавления даты на снимок и многое другое. Среди прочих и изменение размера изображения, как одного, так и целого пакета.
Рассмотрим пакетную обработку картинок в XnView. Загружаем, устанавливаем и запускаем программу. Выбираем в правой панели папку с картинками, которые нужно обработать.
Выделяем все файлы, которые будем подгонять под нужный размер и объем. Нажимаем правую кнопку мыши и выбираем «Пакетная обработка».
Теперь в появившемся окне нам нужно обратить внимание на пункт «Папка» и «Формат».
В строке «Папка» выбираем куда сохраним обработанные картинки. Лучше сохранять в отдельно созданную для этого папку, чтобы можно было при неудовлетворительном результате сразу удалить все лишнее.
Далее в строке «Формат» выбираем для нашего случая jpg и нажимаем «Опции», где можно установить качество полученной картинки по шкале от 0 до 100. Это отобразится и на итоговом весе изображений. Оставляем пока 80.
Переходим на вкладку «Преобразования». Находим в списке «Изменить размер» и нажимаем «Добавить». Ниже появится поле для установки размера, выбираем из раскрывающегося списка справа вариант 640×480. Оставляем галочку «Сохранять пропорции» и убираем «Поменять высоту с шириной». И жмем «Выполнить».
Ждем, пока пройдет преобразование. После заходим в папку, куда мы сохраняли новые картинки и смотрим, что у нас получилось.
Какие мы видим изменения:
- все png файлы превратились в jpg;
- вес каждой картинки в пределах 55 Кб;
- размер картинок изменился: 640 по ширине (там, где картинки были больше) и пропорциональная высота).
Теперь посмотрим на качество измененных картинок. Вот так выглядит картинка без приближения (кликните на нее, чтоб посмотреть):
Качество достаточное для просмотра с экрана монитора. Если приблизить изображение, то будут видны изъяны.
Т.е. для моей статьи вполне достаточно такого качества картинки, но если на ней будут мелкие элементы, которые нужно рассмотреть, то следует выбирать качество изображения выше.
Таким образом мы получили папку из 29 файлов весом 1,2 Мб против изначальных 7 Мб. Но, как правило, разрыв в весе гораздо больше.
Среди бесплатных программ по сжатию картинок для сайта, также можно использовать:
- FILEminimizer Pictures – работает с JPG, BMP, GIF, TIFF, PNG, EMF;
- FileOptimizer – работает с огромным количеством форматов, сжимает без потери качества;
- Caesium – сжимает png, jpg, bmp.
Плагины WordPress для сжатия изображений
Плагины для оптимизации изображений для сайта на WordPress полезны тем, что с их помощью можно обработать ранее загруженные файлы. Кроме того, они, как правило, автоматически обрабатывают картинки, которые вы добавляете на сайт.
Таких плагинов существует очень много, но мы рассмотрим те, которые обновляются и имеют высокие рейтинги.
Первый их них, это EWWW Image Optimizer. Это плагин для автоматического сжатия изображений при загрузке на WordPress-блог файлов формата jpg, png, gif, pdf без потери качества (lossless). Функционирует плагин с помощью утилит jpegtran, optipng, pngout, и gifsicle для работы с различными типами файлов соответственно. Интерфейс данного плагина интуитивно понятный, но могут возникнуть сложности в настройке. Для того, чтобы разобраться чего не хватает для правильной работы откройте вкладку «Статус плагина» после установки.
Здесь видно, каких утилиты или библиотеки нужно добавить. Плагин достаточно эффективный при оптимизации большого количества изображений на сайте.
Следующий плагин — WP Smush.it. О нем упоминалось в статье про ускорение работы сайта. Добавлю, что этот плагин считается одним из лучших для автоматического сжатия, обрезки и оптимизации картинок для сайта на WordPress. Об это свидетельствует большое количество установок. Вот короткое видео от создателей:
Еще один плагин для работы с изображения – Imsanity. Он использует встроенные функции WordPress для масштабирования изображений. С его помощью возможна конвертация из bmp в jpg формат. При заливке чересчур больших картинок (лимиты вы указываете в настройках), например, сразу с фотоаппарата, плагин автоматически его заменяет на сервере ужатой копией. Т.е. 4 Мб будут преобразованы в 300-400 Кб. Хороший вариант для тех, кто часто оперирует подобным контентом.
На этом все на сегодня. Надеюсь, это статья была для вас полезной. Не забывайте оставлять комментарии к статье, делитесь своими способами работы с изображениями на блоге.
После изучения темы в интернете оказалось что в сентябре 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 полностью снял все претензии к изображениям.
Оптимизация изображений в Wordpress
Когда вашему WordPress сайту более 5 лет, изображения становятся настоящей головной болью. К примеру, наш магазин на 1500 товаров весит около 2 гигабайт! Как вы думаете, сколько процентов занимает мусор, который можно смело удалить?
Сжатие изображений - неотъемлемая часть общей оптимизации сайта. Можно выполнить все пункты Google PageSpeed Insights, но увидеть нечто подобное:
Google ругается на не оптимизированные изображения
Сразу возникает вопрос: почему они не оптимизированы, если я их обрабатывал в Photoshop? Ответ прост - оригиналы изображений, возможно, оптимизированы. А вот автоматически созданные миниатюры - нет. Это головная боль WordPress.
Поэтому, оптимизируем изображения вручную.
Шаг 1: Отключаем лишнее
Перед началом оптимизации нужно унифицировать размеры миниатюр. Говоря простым языком - уменьшить количество автоматически генерируемых изображений.
Создатели Wordpress и WooCommerce считают, чем больше различных миниатюр создается, тем это лучше для сайта.
Я с этим не согласен, поэтому для себя выделил три вида изображений : маленькая миниатюра (200х200 пикселей), средняя миниатюра (400х400 пикселей) и оригинал (1000х1000 пикселей).
Маленькие изображения используются в архивах, например, в категориях товаров или списке записей блога. Средние в карточке товара или в записях блога. Оригиналы используются редко, например при нажатии на миниатюру.
Размеры миниатюр индивидуальны для каждого сайта и, в основном, зависят от шаблона сайта. К примеру, для четырёх колонок с товарами, миниатюры размером 200х200 предостаточно:
Неправильно настроенный сайт WordPress генерирует множество ненужных миниатюр. Поэтому, перейдем к настройке.
- Миниатюры для блога настраиваются в меню Настройки › Медиафайлы:
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 для изображений. Данная функция называется “Производительность с изображениями”. К сожалению, у данного плагина есть и один большой недостаток - он очень грузит сайт.
Пожалуй это всё, если возникли вопросы, задавайте их в комментариях.
Одной из основных причин популярности WordPress является поистине огромный набор плагинов на все случаи жизни. На сегодняшний день существуют плагины, позволяющие сделать практически все, что угодно: вставить кнопки социальных сетей, управлять списками рассылки, создавать статические HTML файлы и т.д. Есть отдельная категория плагинов, предназначенных для оптимизации работы вашего блога, конкретно для увеличения скорости загрузки и производительности.
Особенно это актуально для страниц с большим количеством изображений — их просто необходимо оптимизировать. Чтобы сайт не загружался слишком долго.
- Hammy
. Hammy оптимизирует графическое содержимое вашей страницы. Плагин генерирует изображения различных размеров на основе заданных Вами параметров. Когда пользователь обращается к вашему сайту, Hammy автоматически отображает картинки, исходя из заданных настроек размера изображения (иногда минимально допустимого).
Это способствует тому, чтобы ваш сайт загружался быстрее. Особенно актуально для пользователей, заходящих с мобильных устройств. Hammy прост в настройке — он может работать в одном из трех доступных режимов.
- Lazy Load
. С помощью плагина Lazy Load (Ленивая загрузка) процесс загрузки страницы осуществляется следующим образом: изображения подгружаются только тогда, когда пользователь их видит (из видимой на экране части страницы).
Lazy Load – это один из самых простых в настройке плагинов. Просто установите его и активируйте.Он ускоряет загрузку сайта, при этом, не создавая лишнюю нагрузку на сервер.
- Imsanity
. Imsanity изменяет размер загружаемых изображений, если они больше, чем задано в настройках плагина. Единственный параметр, который нужно установить при настройке плагина – это размер и разрешение загружаемых изображений. Imsanity оптимизирует изображения непосредственно в процессе загрузки на сервер. Также возможна обработка картинок, загруженных до этого.
- . HTTP 1.0 позволяет устанавливать до двух соединений с одного домена. WP-PLS создает дополнительные поддомены, что позволяет скачивать из них файлы параллельно. Браузеры получают больше хостов для загрузки контента. Это позволяет скачивать одновременно больше файлов, и ваш сайт работает быстрее!
- CW Image Optimizer
. Хотите уменьшить размеры изображения без потери качества? Эта работа для плагина Image Optimizer. Хотя он не так прост в установке и настройке. Также CW Image Optimizer позволяет массовую обработку, если у вас на сайте есть много изображений, которые нужно оптимизировать.
- EWWW Image Optimizer
. Этот плагин также уменьшает размер изображения без потери качества. Он прост в использовании, — на странице плагина приведена подробная и понятная пошаговая инструкция по его установке. EWWW Image Optimizer также включает функцию групповой обработки изображений.
- PB Responsive Images
. PB Responsive Images интерактивно настраивает изображения в соответствии с разрешением монитора пользователя. Дополнительно никакие коды прописывать не нужно. Вы можете настроить размер картинок, и плагин автоматически будет редактировать синтаксис кода изображения. Это поможет оптимизировать страницу для пользователей, которые заходят на ваш сайт с мобильных устройств.
- WP Smush.it
. Плагин, который использует сервисы Smush.it Yahoo, чтобы оптимизировать ваши изображения и уменьшать их размер. Smush.it – довольно популярный плагин, он не нуждается в дополнительной настройке.
Просто установите и активируйте его. После чего Smush.it будет оптимизировать каждую загружаемую картинку автоматически. Также существует возможность обработки сразу нескольких изображений.
- Parallelize
. В соответствии с названием плагин позволяет осуществлять параллельную загрузку с одного ресурса. Это предоставляет браузеру сразу несколько доменов для скачивания файла. Таким образом, увеличивается скорость загрузки страницы.Parallelize довольно прост в настройке, однако, если вы не уверенны в каких-либо функциях, лучше внимательно ознакомиться с инструкцией.
Перевод статьи «9 WordPress Plugins to Improve Images Performance » был подготовлен дружной командой проекта .
Хорошо Плохо
