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

Content management

  • An extension to compress images in bulk on Airtable. Supports scheduling and webhooks.


  • A Bolt Extension to optimize your images located in your files directory. The extension also supports resizing images to a specific size.

  • Image Optimizer incorporates various compression tools and optimizes your images. This will lead to smaller images and ultimately makes your website faster.

  • A Contao CMS extension that speeds up your website by automatically optimising your JPEG and PNG image uploads with TinyPNG/TinyJPG.

  • Tiny Image is a Craft CMS plugin which provides a clean and easy to use interface for users to compress their images using the TinyPNG API.

  • This Drupal 7 and 8 module allows compression of images when they are uploaded and gives the opportunity to compress individual image styles.

  • This blog shares some code that shows how it’s possible to optimise image size on upload using the TingPNG.com API and the awesome ImageResizer plugin for Episerver.

  • Installable extension for ExpressionEngine CMS. Original images will be stored in a separate folder.

  • Compress PNG and JPG images on your website so they will use less bandwidth and load faster. The compression module uses the free API of TinyPNG and TinyJPG.

  • Free Joomla! plugin, which allows you to compress and resize images uploaded with the media manager and JCE automatically.

  • The blog article contains all the details of automatic image optimization in Kentico CMS using TinyPNG API.

  • Adds image compression to your ProcessWire CMS. The client allows manual and automatic image compression using the TinyPNG and TinyJPG API.

  • Image optimization for the popular SilverStripe framework and CMS. This module extends the Image class and integrates with the TinyPNG API.

  • Compress JPG and PNG images in your store to reduce page size, make your store faster and save a lot of disk space. You can setup CRON Job to automatically compress images.

  • Tinifier is a free Umbraco package and among the top 50 packages. It reduces the size of your JPEG and PNG images, supports Azure and speeds up page loading.

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

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

TinyPNG

TinyPng — бесплатный web сервис оптимизации изображений, который использует lossy компрессию для уменьшения PNG и JPEG файлов. В бесплатной версии есть ограничение 20 изображений. Каждое изображение не должно превышать 5 Мб.

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

Для разработчиков есть подключение по API для автоматической оптимизации изображений.

Optimizilla

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

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

Bulkresizephotos

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

Сервис уменьшает размер и/или объем изображений, и может конвертировать форматы изображений в JPEG, PNG или WEBP.

Saving to Google Cloud Storage

Before you can store an image in GCS you will need to generate an access token with a service account.

We still need to create a piece of example code for this language that generates an access code. In case you have a working example ready, please share your code!

Once you have generated the access token you can then save the optimised image directly to GCS by calling the method on an image source:

You need to provide the following options in order to save an image on Google Cloud Storage:

Specify to store to Google Cloud Storage.
The access token for authenticating to Google’s Cloud Platform. Find out how to generate these tokens with the example above.
The path at which you want to store the image including the bucket name. The path must be supplied in the following format: .

The following settings are optional:

(experimental)
You can add a header to control browser caching of the stored image, with for example: . The full list of directives can be found in the MDN web docs.

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

Оптимизация непосредственно изображения нужна для правильного «восприятия» элемента поисковыми системами и помощи пользователям. С этой целью используются HTML-элементы — атрибуты Alt и Title. Оптимизация картинок влияет на ранжирование изображений и может повышать посещаемость ресурса на 5-10%. Главное про эти атрибуты — в FAQ ниже.

FAQ по Title

Что такое тег Title?

Атрибут <img>, заголовок картинки, который описывает изображение.

Где он находится?

В теге изображения:

<img title=«используемый тайтл» src=»название-изображения.png» alt=»используемый атрибут альт»>

Тайтл виден для пользователя при наведении курсора.

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

Как правильно указывать атрибут Title?

  1. Оптимальный размер — до 250 символов. Технических ограничений нет, но учитывайте, что 2-3 строки тайтла будут мешать просмотру.
  2. Должен быть уникальным и не дублировать Title самой страницы, Alt-тег, подзаголовки Н1, Н2 и т.д.
  3. Хорошо, если всплывающая подсказка реально будет содержать интересную информацию, которую захочется читать пользователю: какие-либо тонкости, объяснения нюансов и т.д.

FAQ по Alt

Что такое тег Alt?

Это атрибут атрибут тега <img> в HTML, который устанавливает альтернативный текст для изображений, «объясняет» его, но более кратко, чем это сделано в Title.

Где он находится?

В теге изображения:

<img title=»используемый тайтл» src=»название-изображения.png» alt=»используемый атрибут альт»>

Виден для пользователя до загрузки картинки. Картинка с прописанным тегом Alt:

Зачем нужен?

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

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

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

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


Чем и насколько важен для SEO?

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

Как правильно указывать атрибут Alt?

  1. Конкретизируйте. Одна из целей атрибута — текстовое объяснение картинки пользователям, которые ее не видят. Объясните им, что они должна понять по изображению.
  2. Сокращайте. Идеальный размер — до 125 символов.
  3. Используйте ключи, релевантные содержанию страницы и смыслу картинки.
  4. Не спамьте. Атрибут Alt — это не keywords, где можно через запятую написать пару ключей для поисковых роботов.
  5. Не используйте слова «картинка», «изображение», «фотография» и т.д. Сам тег предполагает, что это изображение, не нужно дополнительно это указывать.
  6. Если описать картинку кратко нельзя, используйте тег longdesc=»» — он позволяет делать более подробные описания и указывать адрес файла с аннотацией к изображению.
  7. Не забудьте про дополнительные элементы. Если форма обратной связи на сайте использует картинку для кнопки «отправить» — сделайте соответствующий атрибут. Аналогично со всеми картинками, которые используются для кнопок типа «Найти», «Зарегистрироваться», «Корзина» и так далее.

Что делать, если изображение не имеет смысла (как элементы дизайна)?

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

А можно пример?

Нужно!

Если на картинке реальный физический предмет — описать его проще всего.

Пример 1.

Слабо: <img src=»image.png» alt=»кошка»>

Нормально: <img src=»image.png» alt=»кошка потягивается»>

Хорошо: <img src=»image.png» alt=»кошка потягивается лежа»>

Это было просто. А что делать с изображениями, где нет конкретного предмета, который можно описать?

Пример 2.

Слабо: <img src=»image.png» alt=»moggie»>

Нормально: <img src=»image.png» alt=»анализ сайта moggie»>

Хорошо: <img src=»image.png» alt=»отчет по анализу сайта moggie»>

Технические хаки

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

Спрайты

Суть состоит в том, чтобы «склеить» максимальное количество картинок в одну и таким образом сократить количество обращений к серверу.

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

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

Алгоритм настройки:

  1. Для группировки подходят только однотипные картинки идентичного формата. Поэтому шаг 1 — разделить все изображения по типам: GIF, PNG8, PNG24, JPEG.
  2. Объединить несколько изображений, используя прозрачный фон.
  3. В CSS используем для сгруппированных элементов одно изображение. Для конкретного элемента выбираем из него нужную часть при помощи background-position — это свойство задает позицию фонового изображения относительно того элемента, для которого оно указано.

CDN

Суть: когда с сайта поступает одновременно много запросов на каждый элемент страницы, сервер может «лечь отдохнуть» из-за перегрузки. Сеть доставки (и дистрибуции) контента (CDN) — это способ, как уменьшить количество запросов на сервер.


Представим, как идет запрос с сайта на сервер. Сайт — это точка А, а сервер — точка В. Запрос идет напрямую.

При помощи CDN на пути от А к В появляется точка С — наше промежуточное звено, узел CDN для кэширования данных.

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

OptiPNG

 

OptiPNG is another free tool to optimize PNG files on your computer. OptiPNG is basically a command line tool, so it does not have an interface, hence you need to open up your system command line for using this free tool. Using OptiPNG, you can resize your PNG images without losing the original image quality. In addition, this command line tool even helps you in Metadata recovery. OptiPNG even comes with a PNG image integrity checkup feature which helps you to look for any damage or any other problem associated with a PNG file. The good part is that, this free command line PNG optimizer comes in a file size of only 100 KB, which is really very small as compared to other similar software.

Read more about OptiPNG or try it here.

Saving to Amazon S3

To save an image to S3, call the method on an image source:

You need to provide the following options in order to save an image on Amazon S3:

Specify to store to Amazon S3.
The path at which you want to store the image including the bucket name. The path must be supplied in the following format: .

The following settings are optional:

(experimental)
You can add a header to control browser caching of the stored image, with for example: . The full list of directives can be found in the MDN web docs.

The user that corresponds to your AWS access key ID must have the and permissions on the paths of the objects you intend to create.

Error handling

The Tinify API uses HTTP status codes to indicate success or failure. Any HTTP errors are converted into exceptions, which are thrown by the client library.

There are four distinct types of errors. The exception message will contain a more detailed description of the error condition.

There was a problem with your API key or with your API account. Your request could not be authorized. If your compression limit is reached, you can wait until the next calendar month or upgrade your subscription. After verifying your API key and your account status, you can retry the request.
The request could not be completed because of a problem with the submitted data. The exception message will contain more information. You should not retry the request.
The request could not be completed because of a temporary problem with the Tinify API. It is safe to retry the request after a few minutes. If you see this error repeatedly for a longer period of time, please contact us.
The request could not be sent because there was an issue connecting to the Tinify API. You should verify your network connection. It is safe to retry the request.

You can handle each type of error separately:

If you are writing code that uses an API key configured by your users, you may want to validate the API key before attempting to compress images. The validation makes a dummy request to check the network connection and verify the API key. An error is thrown if the dummy request fails.

Description

Speed up your website with our image optimizer and get lighter images without losing quality.

Imagify is the most advanced tool to optimize images. You can now use this power directly in WordPress. After enabling it, all your images including thumbnails will be automatically optimized when uploaded into WordPress. You can also use Imagify to convert WebP images for free.

WooCommerce and NextGen Gallery compatible.

Why use Imagify to optimize your images?

You already have lots of unoptimized images? Not a problem, you will love the Bulk Optimizer to optimize all your existing images in one click.

Imagify can directly resize your images, you won’t have to lose time anymore on resizing your images before uploading them.

Three level of compression are available:

  • Normal, a lossless compression algorithm. The image quality won’t be altered at all.
  • Aggressive, a lossy compression algorithm. Stronger compression with a tiny loss of quality most of the time this is not even noticeable at all.
  • Ultra, our strongest compression method using a lossy algorithm.

With the backup option, you can change your mind whenever you want by restoring your images to their original version or optimize them to another compression level.

HOW ABOUT WEBP IMAGES?

Now, for each image you optimize with the Imagify plugin, you will also get its WebP version (if you tick the option in the settings); in your Media library, this will result in the following image versions: – full-sized optimized image, – full-sized WebP image, – optimized thumbnails, – WebP thumbnails.

The optimization will also work for images included in your themes and plugins.

If you want, Imagify can also display WebP images on your front-end in two ways: – tag, – rewrite rules in the .htaccess file.

If you kept a backup copy of the original images, you have the possibility to create their WebP version separately (one by one or via the bulk optimization).

Is Imagify Free?

You can optimize for free 25MB of images (about 250 images) every month. Converting to WebP is free.

Need more? Have a look at our plans: https://imagify.io/pricing

What’s next?

Have a look at our upcoming features by following our development roadmap: https://trello.com/b/3Q8ZnSN6/imagify-roadmap

Who we are?

We are WP Media, the startup behind WP Rocket the best caching plugin for WordPress.

Our mission is to improve the web, we are making it faster with WP Rocket we want to make it lighter with Imagify.

Related Plugins

  • WP Rocket: Best caching plugin to speed-up your WordPress website.
  • Rocket Lazy Load: Best Lazy Load script to reduce the number of HTTP requests and improves the websites loading time.

Changelog

3.2.1

  • Fixed bug that caused the original version of images that started with a special character to not be compressed.
  • Updated WordPress compatibility.

3.2.0

  • Support for WP Retina 2x Pro.
  • More capability checks for extra security.
  • Less resource intensive AJAX requests.
  • Fixed CSS issues from Analytify plugin.
  • Removed legacy Enhanced Media Library compatibility.

3.1.0

  • Remaining free compressions shown in settings page.
  • Easier way to upgrade a free account.
  • WPML and WPML Media compatibility in collaboration with the authors of WPML. Make sure to upgrade WPML to version 4.1.
  • Added a notice to the Bulk Optimization page for free accounts with not enough available free compressions.
  • Added a new hook after compression of an image useful for CDN cache flushing.

3.0.1

  • Fixed bug that caused an error when registering a new account.
  • No longer use create_function, which is deprecated in PHP 7.2. The plugin no longer supports PHP 5.2.
  • Rephrased incompatible plugins notice to avoid confusion.

3.0.0

  • Compress new images in the background to speed up your workflow.
  • Turbo-charged Bulk Optimization page with simultaneous image compression.
  • Improved memory usage for installations with extreme media libraries.
  • Detection of incompatible plugins.
  • Fallback to fopen whenever the curl_exec function is disabled.
  • Additional notices for WP Offload S3 users.
  • Several minor fixes and tweaks.

2.2.5

  • Fixed bug in the Bulk Optimization page that sometimes caused it to stop.
  • Fixed a problem that would prevent dashboard widget from loading.
  • Tweaked styling of the dashboard widget for the latest version of WordPress.
  • Fixed a warning in the media library when certain plugins are used.

2.2.4

  • Fixed bug with drop-down menu in the Media Library.
  • Compression limit notice now links directly to your API dashboard.
  • Tweaked styling of the dashboard widget.

2.2.2

  • Improved robustness in case an unexpected network error occurs.
  • Fixed false positive warning with Sucuri scanner.
  • Fixed compression issue for fopen users.

2.2.1

  • Fixed an error that was introduced in v2.2.0 where all custom image sizes did not show up.
  • Added support for image sizes with unspecified height or width.

2.1.0

  • Compression of retina images generated by WP Retina 2x.
  • Solved a bug which caused the API key to be cleared on the settings page.
  • Fixed an error that occurred with some PHP 7 installations.
  • Fixed an fopen error when preserving metadata.

2.0.2

  • Faster Bulk Optimization page with reduced memory usage (thanks to @esmus).
  • Fixed XML-RPC error (thanks @ironmanixs, @gingerdog, @quicoto and @isaumya).

2.0.0

  • Completely new Bulk Optimization page.
  • Better detection of image sizes with duplicate filenames.
  • Simplified account activation and API key creation.
  • Fix to the bottom drop-down menu in the Media Library.
  • Use the latest PHP client library for connecting to TinyJPG and TinyPNG.
  • Added fallback to fopen for older systems running PHP 5.2.

1.7.1

  • Preserve GPS locations and creation dates in the original JPEG images.
  • Option to preserve copyright information in your original PNG images.
  • Improved detection of unsupported file types.

1.7.0

  • Option to preserve copyright information in your original JPEG images.
  • Added proxy support for cURL.
  • Support for translate.wordpress.org plugin translations.

1.6.0

  • Improved compression status in the Media Library with new details window.
  • Show total compression savings on the Media Settings page.
  • Moved Compress All Images from the Tools to the Media menu.

1.5.0

  • Resize original images by specifying a maximum width and/or height.
  • Support for the mobile WordPress app (thanks to David Goodwin).

1.4.0

  • Indication of the number of images you can compress for free each month.
  • Link to the Media Settings page from the plugin listing.
  • Clarification that original images will be overwritten when compressed.

1.3.0

  • Added option to bulk compress your whole media library in one go.
  • Better indication of image sizes that have been compressed.
  • Detection of image sizes modified after compression by other plugins.

1.2.0

  • Show if you entered a valid API key.
  • Display connection status and number of compressions this month.
  • Show a notice to administrators when the free compression limit is reached.
  • The plugin now works when php’s parse_ini_file is disabled on your host.
  • Avoid warnings when no image thumbnail sizes have been selected.

1.1.0

  • The API key can now be set with the TINY_API_KEY constant in wp-config.php. This will work for normal and multisite WordPress installations.
  • Enable or disable compression of the original uploaded image.
  • Improved display of original sizes and compressed sizes showing the total compression size in the Media Library list view.

С этим читают