Оптимизация изображений в gulp под google pagespeed insights

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

Перед публикацией картинки на сайте решите три вещи:

  • Физический размер изображения (длина и ширина),
  • Формат изображения (jpeg, png, webp или другие форматы),
  • Размер изображения (в Килобайтах).

С хорошо подобранными параметрами вы можете уменьшить размер картинки в 5-10 раз по сравнению с первоначальным.

Оптимизируйте длину и ширину изображения

Если вам нужно поместить изображение, которое займет 1/3 экрана, используйте картинку нужного размера, например, 500х300 Пикс.

Не публикуйте картинки бóльшего размера, чем это требуется.

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

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

Выберите подходящий формат изображения

Существует несколько форматов изображений, которые используются для публикации изображений в интернете. Самые популярные — JPEG и PNG.

JPEG — формат, который использует сжатие с потерями (lossy) и не поддерживает прозрачность. В зависимости от степени сжатия, эти картинки можно оптимизировать без потери качества изображения.

PNG — сжатие без потерь (lossless) и поддерживает прозрачность.

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

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

Оптимизируйте размер изображения в Килобайтах

Чем меньше размер изображения в Килобайтах, тем ниже качество картинки.

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

Для картинки размером 500х300 пикселей современные требования Гугл и других сервисов что-то около 30-50 Килобайт.

Reviews

http-equiv=»Content-Type» content=»text/html;charset=UTF-8″>lass=»plugin-reviews»>

It’s amazing and keeps the quality of the images in my online store even using the ultra compression. Fantastic.

Excelent

We run a high traffic website, (more than 1.5M monthly visitors) and imagify had been the most reliable option for us.

It helped reduce our images filesize to an average of 35% of the original. That’s a 65% save on disk usage, bandwidth and will all the benefits of faster loading when page size is reduced. Just our/uploads/ directory went from around 11Gb to 3.5GB

Not overly impressed.

It does the basic job of compressing images, but the process is painfully slow, even for a single file.

There is a very high rate of «Unknown Error Occurred» approximately 80%

One glitch is that with some highly optimized files the thumbnail in the Media Libary is grey and not visible. Thank God I put in verbose descriptions.

Much work to do to get it enterprise worthy.

Awesome

From what I’ve seen, this plugin has done what I got it for.

Преимущества оптимизации изображений

Зачем оптимизировать изображения на сайте? Существует множество преимуществ оптимизации изображений для повышения производительности. По данным HTTP Archive , по состоянию на декабрь 2017 года изображения составляют в среднем 54% от общего веса веб-страницы . Поэтому, когда дело доходит до оптимизации сайта на WordPress , изображения — это первое, с чего следует начинать. Это важнее, чем оптимизация скриптов и шрифтов. К тому же, процесс оптимизации изображений является одним из самых простым для реализации, но многие владельцы веб-сайтов игнорируют его.

Основные преимущества оптимизации изображений на сайте:

  • Это улучшит скорость загрузки страницы. Если ваша страница загружается слишком долго, посетители могут устать от ожидания и закрыть сайт. Для получения дополнительной информации об оптимизации времени загрузки страницы смотрите подробное руководство по оптимизации скорости сайта.
  • В сочетании с плагинами SEO для WordPress это улучшает SEO сайта на WordPress. Ваш сайт будет выше в результатах поиска. Большие файлы замедляют работу сайта, особенно на мобильных устройствах, а поисковые системы пессимизируют медленные сайты. Google также может сканировать и индексировать ваши изображения быстрее для поиска изображений в Google. Вы знаете, какой процент трафика вашего сайта приходится на поиск картинок Google? Вы можете использовать Google Analytics для проверки трафика поиска картинок Google.
  • Более быстрое создание резервных копий и восстановление из них.
  • Меньшие размеры файлов изображений используют меньше трафика. Особенно актуально для мобильных браузеров.
  • Требует меньше места на сервере (это зависит от того, сколько миниатюр вы оптимизируете)

Добавьте описания изображений в атрибуты alt

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

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

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

  • Нежелательный вариант (нет текста в атрибуте alt):
  • Нежелательный вариант (слишком много ключевых слов):
  • Более эффективный вариант:
  • Рекомендуемый вариант:

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

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

Высота и ширина

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

В качестве примера рассмотрим довольно подробную статью от Serpstat про оптимизацию изображений. В статье используются картинки такого вида (скриншот из сервиса webspeedtest.cloudinary.com):

 

Браузер должен загрузить изображение огромного размера (2,7 мегабайта), а также с большей высотой и шириной, с которой оно будет использоваться на самой странице сайта:

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

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

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

Объём, или же размер изображения

Мной заботливо украдена таблица из , где наглядно показана корреляция объёма изображения от его размера (ширины и высоты):

Размер Пиксели Размер файла
100 x 100 10 000 39 КБ
200 x 200 40 000 156 КБ
300 x 300 90 000 351 КБ
500 x 500 250 000 977 КБ
800 x 800 640 000 2500 КБ

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

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

  1. Уменьшить ширину и высоту
  2. Сжать качество

Для сжатия качества я чаще всего использую сервис compressor.io, однако у него есть существенный недостаток — работает только с одним изображением. Для оптимизации нескольких картинок нужно искать другие сервисы. Тут на помощь можно звать сервис Google PageSpeed Insights, который после анализа любой страницы предлагает скачать архив с уже оптимизированными и сжатыми ресурсами:

Lazy Load

Одна из рекомендаций в моём арсенале — реализация Lazy Load.

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

5 ноября Google добавил рекомендации для Lazy Load, а вот тут собрана подробная инструкция по настройке изображений и видео (материал на английском языке).

BASE64 и CSS-спрайты

Для небольших вспомогательных изображений-элементов дизайна рекомендуется рассмотреть кодирование картинок в BASE64 или использование CSS-спрайтов. Это позволит убрать дополнительный запрос к серверу, а изображение будет корректно отображаться на странице (во всех современных браузерах). Таким образом можно «разгрузить» сервер лишними обращениями, что тоже ускорит время загрузки. Как показывает практика, изображения лидируют по количеству обращений к серверу, однако вместе с использованием base64 можно изменить этот стандарт. Ниже показан скриншот из сервиса webpagetest.org. С перекодированием изображений в base64 мне удалось на одном своём сайте сократить количество реквестов до 14, и это очень мало.

Подробнее о цели этой доработки можно прочитать в блоке «Оптимизация количества серверных реквестов».

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

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

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

Использование правильного формата

У любого файла есть свое расширение (буквы после точки в названии файла), указывающее на его формат. Наиболее популярными графическими форматами изображений являются JPEG, TIFF, PNG, GIF. Каждый их указанных форматов по-своему отображаются на интернет сайте и влияет на скорость загрузки страницы. Сразу отметем формат TIFF как наиболее громоздкий и тяжелый для загрузки сайта и остановим свой выбор на оставшихся.

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

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

Используйте оптимальный размер

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

Авторское фото

Современные цифровые фотоаппараты позволяют получать изображения огромного разрешения. Размер полученного файле может доходить до 10МБ и более. Естественно выкладывать картинки в таком качестве на свой блог очень неразумно. Если Вы желаете сохранить для истории Ваши шедевры можете воспользоваться различными облачными программами, например я пользуюсь сервисом для хранения фотографий Flickr.

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

Я немного отвлекся от темы своей статьи — как оптимизировать изображение для сайта, продолжим. У большинства блогов ширина контентной части (не включая колонки виджетов) составляет 500-800 пикселей. Например у моей  двухколоночной темы ширина контентной части составляет 700 пикселей. Из этого следует, что нет никакой необходимости добавлять более широкое изображение, это лишь замедлит загрузку страницы, а визуальной разницы Вы не увидите.

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

Присваиваем правильное имя файлу

Название загруженного на сайт файла имеет большое значение для SEO оптимизации. Если это безликое имя типа image1.jpg или парк2016.png, имейте в виду, что поисковая система не поймет о чем речь. Название файла должно правильно отражать суть изображения. Основные правила названия файла:

  • Значимое и информативное название
  • Написание в транслите (латинскими буквами) используйте сервис http://translit.net/
  • Минимальное количество слов
  • Между словами ставьте знак тире.

Пример написания названия файла:

  1. osnovnye-formaty-izobrazhenij
  2. pravilnoe-nazvanie-fajla
  3. samyj-luchshij-sajt

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

Правильное название файла

Теги Alt (альтернативный текст) и Title (подсказка)

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

  • Alt — отвечает за текст, отображающийся если у Вас отключена графика в браузере (должен включать ключевую фразу);
  • Title — текст, который отображается если навести курсор на картинку.

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

Как оптимизация изображений влияет на SEO сайта

Изображения являются одним из наиболее важных элементов страниц современных веб-сайтов.

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

Фотографии и различные изображения делают страницы сайтов более интересными и обеспечивают ряд преимуществ:

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

Но за все эти преимущества нужно заплатить.

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

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

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

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

Нередко такие картинки демонстрируются поисковиками рядом с контентом конкурирующих интернет-ресурсов.

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

Рекомендуемые статьи по данной теме:

  • Хобби как бизнес: +30 идей для запуска
  • Пример предложения о сотрудничестве: просто следуйте инструкциям!
  • Ключевые факторы успеха: будем умнее, чем Буратино

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

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

iLoveIMG

Сервис iLoveIMG – также представляет из себя целый комплекс по работе с изображениями и поддерживает уже привычные 3 формата – GIF, JPG и PNG. Есть массовая обработка до 15 изображений за раз (если работаете с сервисом без регистрации) и 30 изображений (если зарегистрируетесь). Загрузить файлы можно как с компьютера, так и из облачных хранилищ – Google диск или Dropbox. Есть возможность наложения водного знака на изображение, обрезка, преобразование в другие форматы и даже генератор мемов. Единственное неудобство в том, что нельзя делать сразу несколько операций с массивом изображений, приходится делать их поочередно, а это лишние телодвижения получаются. Скачать результаты обработки можно также на компьютер или в облачные хранилища.

____

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

7 приемов оптимизации изображений на странице

2. Атрибуты ALT и Title выполняют роль подсказки касательно содержания изображения как для поисковиков, так и для пользователей.

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

Title выводится при наведении курсора на изображение. Он должен максимально емко передавать смысл картинки и отличаться от атрибута ALT. Удостовериться, что для всех изображений на сайте прописаны атрибуты ALT и Title, можно с помощью сервисов Seo Screaming Frog, Netpeak Spider и других автоматизированных решений.

3. Адрес изображения должен быть взаимосвязанным с названием картинки и хорошо считываться пользователем. Такой URL позитивно влияет на ранжирование;

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

5. Анализ Sitemap станет дополнительным преимуществом для ранжирования. Вы сможете проверить, правильно ли проиндексированы изображения, а поисковые роботы — обнаружить даже те картинки, которые иначе остались бы вне их поля зрения (например, при использовании JavaScript). XML-файл для картинок можно создать отдельно, либо обновить существующую общую карту сайта.

6. Микроразметка не требует создания дополнительных файлов и реализуется с помощью тегов, прописанных в коде страницы. В этом помогут семантические словари Schema.org и OpenGraph

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

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

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

Как искать картинки в интернете для сайта?

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

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

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

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

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

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

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

Pixabay. Содержит фото, иллюстрации, векторную графику и видео, в том числе, в 4k разрешении с возможностью бесплатного использования и редактирования. Позволяет отсортировать изображения по фотографам, альбомной ориентации, категории, размеру и преобладающей цветовой гамме. Содержит более 800 000 картинок.

Способы угодить правилам

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

Третий пункт неоднозначный 50/50, тут решение предлагает сам PageSpeed Insights, он предоставляет уже сжатый вариант собственного приготовления. Смотрите на скриншот ниже, будет все понятнее. Если у вас что-то не в порядке, то гугл сам предоставит все оптимизированное содержимое, только пользуйтесь. Что качается JS и CSS, то там все в порядке, но об этом позже, а вот картинки, придется посмотреть и проверить. Нажимайте на ссылку  “изображения, ресурсы JavaScript и CSS” и к вам на компьютер автоматом будут загружены все неудовлетворяющие файлы, уже в исправленном формате, запакованные в архив. Далее открываем, и там три папки и один html документ. С директориями CSS и js разберемся попозже, в других постах, нас сейчас интересует image, открываем ее (предварительно распаковать архив), и видим там уже оптимизированные картинки. Я не буду приводить скриншот, там вы ничего нового не увидите. Но без подсказки разобраться будет трудно, и наш друг google даже сделал нам специальный файл с путями расположения всех интересующих нас изображений. Открываем “MANIFEST”, хоть через сам браузер, в нем все пути где лежат “не очень хорошие объекты”. Как видно из снимка, то все расписано очень подробно

Если вас устраивает качество, то смело заменяйте оригиналы на скаченное из PageSpeed Insights, тем более адреса у вас есть.

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

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

Описание

Image Optimizer by 10webUser Manual

Do you have a lot of high resolution images on your website? Images on your website can significantly increase your page load time and be frustrating for your site visitors. The optimization of images will accelerate your website, as well as help you save bandwidth and storage space on your website.

Image Optimizer WordPress plugin enables you to resize, compress and optimize PNG, JPG, GIF and PDF (paid version only) files while maintaining image quality. Lossless, Lossy and Maximum Lossy (paid version only) Compression methods are available to choose from. Lossless Compression allows you to resize images without notably impacting image quality. With Lossy Compression method you’ll be able to compress images with minimal loss of quality. Overall, the image compression plugin will enable you to resize the image files up to 80%, depending on image and compression type.

The image optimizer plugin can optimize the new images you upload, but you can also optimize existing images on your website. The WordPress plugin comes with a bulk optimization option, which allows to optimize multiple images at once with a single click. The number of images you can optimize in bulk is limited in the free version of the plugin.

Choose from 3 modes of compression available in the easy mode, including conservative, balanced, extreme. You can also choose to optimize images from the Advanced mode of the plugin.

The advanced setting of the plugin allow you to convert your images to the file format that works best for you, optimize the image sizes that you want, including thumbnails.

The plugin provides statistics, so you can always know how many images were optimized, when the last optimization occurred and how much space you’ve saved in the result.

Sign up to 10Web to add features:

Description

reSmush.it Image Optimizer allow to use free Image optimization based on reSmush.it API. reSmush.it provides image size reduction based on several advanced algorithms. The API accept JPG, PNG and GIF files up to 5MB.

This plugin includes a bulk operation to optimize all your pictures in 2 clicks ! Change your image optimization level to fit your needs !
This service is used by more than 400,000 websites on different CMS (WordPress, Drupal, Joomla, Magento, Prestashop…).

The plugin includes an option to exclude some pictures of the optimizer.

Since Aug. 2016, reSmush.it allows to optimize pictures up to 5MB, for free !

This plugin has initially been developped by Maecia Agency, Paris.

В каком формате лучше сохранять изображения для сайта?

На сегодняшний день на сайтах используются два основных формата изображений, это JPEG (JPG) и PNG.
Основное отличие формата PNG заключается в том, что он поддерживает прозрачный фон. Таким образом, если вы делаете логотип, или какую-то иконку с прозрачным фоном, то вы однозначно сохраняете ее в формате PNG.

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

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

Оцените статью
Рейтинг автора
5
Материал подготовил
Андрей Измаилов
Наш эксперт
Написано статей
116
Добавить комментарий