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


Содержание

Очередной блог фрилансера

коротко и полезно о веб-разработке

8 отличных инструментов для оптимизации изображений

Начну с извинений за долгое отсутствие, в связи с навалившейся нечеловеческой ленью и напряженной работой. Сегодня хочу представить вам новую рубрику в блоге — переводы, в которой я буду публиковать свои переводы интересных статей англоязычных блогов. И сегодня вашему вниманию представляется статья под названием «8 Excellent Tools for Optimizing Your Images», автор Jacob Gube.

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

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

1. Smash It!

Smash it с легокстью поможет оптимизировать ваши изображения. Разаботанный авторами Stoyan Stefanov and Nicole Sullivan smash it — это инструмент, доступный как расширение для Firefox, в виде закладки или как простое веб-приложение (хостинг на Yahoo!). Он понимает большинство графических форматов, а также автоматически преобразовывает GIF в PNG (потому что фактически они выглядят одинаково, с той лишь разницей, что PNG весит намного меньше).

2. RIOT

RIOT — означает Инструмент Радикальной Оптимизации Изображений ( Radical Image Optimization Tool) — оптимизатор изображений для пользователей Windows, который доступен в виде отдельного приложения или как расширение для IrfanView. Он поддерживает JPG, GIF PNG форматы, также имеется возможность вырезать метаданные картинки, для последующего уменьшения размера файла.

3. PngOut

Созданный программистом Ken Silverman, PNGOUT популярный, бесплатный и простой инструмент для оптимизации графики без потерь в качестве. PNGOUT может быть запущен из коммандной строки или диалогового окна «Выполнить» (Run) Windows. Он имеет большое количество настроек, благодаря чему вы легко сможете установить оптимальный способ сжатия ваших изображений. Он умеет обрабатывать большинство популряных графических форматов (таких как JPG, GIF, и PNG).

4. Online Image Optimizer

Online Image Optimizer — от Dynamic Drive это веб-приложение для дополнительного сжатия изображений. Вы можете либо предоставить ссылку на картинку, которую нужно оптимизировать, либо загрузить ее с локального компьютера. Кроме оптимизации, вы можете выбрать формат вашего оптимизированного изображения на выходе (по умолчанию тот же тип файла, что и при загрузке). Единственное ограничение в использовании Online Image Optimizer — он может работать с файлами не более 300 kB.

5. SuperGif

SuperGif — это бесплатная утилита для пользователей Windows и Мас OS, оптимизирующая GIF-изображения. Она обладает простым и интуитивно понятным интерфейсом, поддерживает drag-and-drop взаимодействие, может сжимать GIF-картинки на 50% больше, в некоторых случаях. Бесплатная версия приложения может сжимать одно изображение за раз, но она обладает всеми характеристиками что и коммерческая версия ($29.95) , кроме пакетной обработки.

6. PNGGauntlet

PNGGauntlet — это .NET GUI приложение для PNGOUT. Оно может быть использовано для конвертирования JPG, GIF, TGA, PCX, и BMP файлов в высоко оптимизированные PNG-файлы. PNGGauntlet подойдет тем, кто не любит работать в коммандной строке, но хотел бы воспользоваться отличным алгоритмом оптимизации PNGOUT. Если у вас возникнут трудности при использовании приложения, помощь можно получить на странице FAQ или на форуме.

7. PNGCrushrrr

PNGCrushrrr — это бесплатная (лицензия GPL) утилита для Mac OS для сжатия PNG-файлов в очень маленькие размеры. Имеет drag-and-drop интерфейс, с помощью которго вы можете перетащить один или несколько PNG-файлов, сжать их, и сравнить с оригиналом изображения. Для получения лучшего результата, разработчики приложения советуют использовать формат картинок PNG-24.

8. SuperPNG

SuperPNG — бесплатный плагин к PhotoShop, позволяющий сохранять картинки в формате PNG, со значительно меньшим размером, чем стандартная функция сохранения изображений в PhotoShop. Он также включает в себя некоторые дополнительные функции создания PNG, такие как поддержка 16-битного цвета, настраиваемый уровень сжатия, гамма-коррекция и сохранение метаданных. На странице PNG Samples можно увидеть примеры PNG-изображений, сделанных с помощью SuperPNG.

А как вы оптимизиурете изображения?

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

Рассказать друзьям

Понравилась статья? Лучший способ сказать спасибо — поделиться ссылкой в социальных сетях:

Лучшие бесплатные инструменты оптимизации и сжатия фотографий

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

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

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

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

TinyPNG

Что нам понравилось:

  • Легко использовать
  • Бесплатно
  • Сжатые файлы PNG сохраняют прозрачность

Что нас разочаровало:

  • Максимальный размер файла 5 МБ
  • Поддерживает только изображения PNG и JPEG

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

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

Загружайте каждое изображение по отдельности или оптом (по 20 одновременно с максимальным размером файла 5 МБ каждое). Вы можете обнаружить, что некоторые изображения будут уменьшены на 85 процентов и больше!

Compressor.io

Что нам понравилось:

  • Сжимает изображения без потери качества
  • Поддерживает больше форматов файлов
  • Быстрая обработка

Что нас разочаровало:

  • Ограниченные возможности
  • Не всегда хорошо сжимает

Compressor.io – это фантастический инструмент, который имеет некоторое преимущество перед TinyPNG, поскольку его можно использовать для оптимизации файлов GIF и SVG в дополнение к файлам PNG и JPEG.

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

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

Просто нажмите TRY IT ! ниже примера изображения, чтобы начать собственную загрузку.

Optimizilla

Что нам понравилось:

  • Бесплатное использование
  • Предварительный просмотр результатов
  • Обеспечивает более высокое сжатие

Что нас разочаровало:

  • Ограничено форматами PNG и JPEG
  • Более низкое качество, чем в других вариантах


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

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

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

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

Kraken.io

Что нам понравилось:

  • Предлагает плагин WordPress
  • Плагин бесплатный
  • Поддерживает множество форматов файлов

Что нас разочаровало:

  • Облачный сервис не бесплатный
  • Требуется регистрация
  • Бесплатная версия имеет мало функций

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

С помощью бесплатного инструмента вы можете загружать изображения (со своего компьютера, из ZIP-файла или из учетной записи Box / Google Drive / Dropbox) размером до 1 МБ для оптимизации одним из трёх передовых методов оптимизации: с потерями, без потерь или с настраиваемыми параметрами.

Бесплатная версия Kraken.io может быть всем, что вам нужно, но премиальные планы доступны всего за 5 долларов в месяц. Премиум-план позволит вам загружать больше изображений, предоставляя вам доступ к широкому спектру расширенных функций, таких как изменение размера изображения, доступ к API, лучшее использование плагина Kraken.io WordPress и многое другое.

ImageOptim

Что нам понравилось:

  • Быстрая оптимизация
  • Поддерживает SVG
  • Бесплатное использование

Что нас разочаровало:

  • Авто обновления без разрешения
  • Ограниченные возможности

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

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

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

WP Smush

Что нам понравилось:

  • Легко использовать
  • Массовое сжатие файлов
  • Конвертер форматов файлов

Что нас разочаровало:

  • Доступно только для WordPress
  • Более низкая производительность, чем у других вариантов
  • Нельзя настроить уровень сжатия

Если вы работаете с собственным сайтом на WordPress, вы можете объединить процесс оптимизации изображений и загрузки с помощью этого изящного плагина под названием ImageOptim. Он автоматически сжимает и оптимизирует каждое изображение, которое вы загружаете (или уже загрузили) на свой сайт, поэтому вам не придётся тратить время на предварительное ручное управление.

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

EWWW Image Optimizer

Что нам понравилось:

  • Легко настроить сжатие
  • Отличное качество сжатия
  • Возможна массовая оптимизация

Что нас разочаровало:

  • Не всегда надежный
  • Необходимо приобрести ключ API

Ещё один вариант для пользователей WordPress – EWWW Image Optimizer – сопоставимый плагин оптимизатора изображений. Он автоматически сжимает и оптимизирует любые файлы JPG, GIF или PNG, которые вы загружаете на свой сайт WordPress, и поставляется с возможностью оптимизации существующих изображений в медиатеке.

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

Сжатие (оптимизация) изображений: обзор 10 лучших платных и бесплатных инструментов 10/04/2020 13:01

Было протестировано несколько самых известных программ для оптимизации изображений. Сразу оговорюсь: речь идёт об алгоритмах значительного уменьшения размера файла, «с потерями» («lossy»). Сжатие джипега без потерь особого интереса не представляет, в виду того, что JPEG – сам по себе формат для хранения изображений «с потерями», а lossless-сжатие любыми средствами даёт максимальный выигрыш в пределах 3–5%. Здесь же мы говорим о программах, способных уменьшить размер файла в несколько раз.

Кстати, оптимизация загруженных участниками файлов давно внедрена в Артклубе Gallerix, она осуществляется автоматически в два этапа: первый – сразу при загрузке (lossless, используется Jpegtran) и второй – спустя некоторое время программой JpegMini.

Если ваш домашний архив никогда не оптимизировался и занимает сейчас, например, 100 Гб – вполне реально уменьшить эту цифру в 2–2,5 раза (до 45–50 Гб) без вторжения в качество картинки и в 3–4 раза (до 20–25 Гб) с небольшим, не очень заметным снижением качества.

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

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

Исходные файлы

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

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

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

Последний файл взят с сайта Unsplash.com, автор Karl Fredrickson. Выступает в качестве примера фото, полученного профессиональной камерой с дорогой оптикой.

Инструменты

JpegMini

JpegMini, платная программа. Есть версии за 20 и за 149 USD, а также дорогая серверная версия. Десктопные версии работают одинаково, младшая имеет два ограничения: в скорости обработки и в максимальном разрешении файла (28Мп), старшая ограничена размером файла (60Мп). Работает на Windows и Mac.

TinyJPG

Есть платная версия в виде плугина для Adobe Photoshop (50 USD) и бесплатная онлайн-версия с ограничениями на размер файла и количество загрузок в сутки (которое, впрочем, очень легко обходится). Плугин работает также на Windows и Mac. Первые 500 файлов в месяц через API бесплатно, далее 0,009 USD за файл.

Compressor.io


Известный онлайн-сервис. Ограничен только максимальный размер файла, 10Мб.

Kraken.io

Популярный на Западе профессиональный сервис с высокими тарифами и жёсткими квотами. Бесплатная онлайн-версия ограничена максимальным размером файла в 1 Мб и вряд ли может восприниматься как инструмент. Это не более, чем демо-версия – обычная любительская камера не в состоянии выдать файл меньше 2–3 Мб. Тарифы на использование API начинаются с 5 USD в месяц за входящий объём 500 MB.

ConvertImage.net

Комплекс онлайн-инструментов для обработки изображений, среди которых есть и Jpeg-компрессор. Полностью бесплатен.

Jpeg-Optimizer.com

Онлайн-сервис. Полностью бесплатен и без ограничений. Есть ручная настройка уровня компрессии.

Optimizilla.com

Бесплатный веб-сервис. Этот же движок встречается и на других доменах. Многоязычный интерфейс. Ручная установка уровня компрессии (настройка появляется после загрузки изображения). Не более 20 файлов за раз.

DynamicDrive.com

Набор бесплатных онлайн-инструментов для обработки изображений. Оптимизация с ограничением файла 2,8 Мб. Выдаёт несколько готовых изображений с разными уровнями компрессии на выбор.

ShortPixel.com

Некий новый сервис с обилием разных тарифных планов, есть подписка с месячной оплатой и пакетные тарифы (10 000 файлов за 9,99 USD). Работает по API или через веб-интерфейс (до 20 файлов за раз). Ограничение размера файла в бесплатной онлайн-версии – до 10Мб.

ACDSee Ultimate

ACDSee Ultimate 9, профессиональная программа для организации и обработки изображений для Windows. Сохранение с включением «Optimize Huffman codes» и «Color Component sampling», качество 70%. Программа платная, цена начинается с 40 USD за самую скромную версию, но похожие настройки есть во многих бесплатных программах. Это пример чистого сохранения с небольшой lossless-оптимизацией.

«Чистый» JPEG

Сохранение файла с качеством около 70% (9 из 12) из Adobe Photoshop CS6, разновидность формата «базовая». Здесь чистый JPEG с использованием только возможностей формата, «нижняя точка отсчёта», доступная бесплатно из любой программы, умеющей сохранять в формате JPG.

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

RIOT, бесплатная программа из параллельного мира. Существующая как в виде stand-alone приложения, так и в виде плугинов для других программ из параллельного мира: GIMP, IrfanView, XnView. К сожалению, распространяемый файл, мягко говоря, не проходит проверку антивирусами (но, не просто с подзрением на ошибку, а в формате «вся таблица Менделеева» см. результат проверки на VirusTotal ). Этим же грешит и GIMP.

ImageOptim, старенькая программа для Mac с очень скромными способностями, на уровне сжатия без потерь (как показывают сторонние тесты). Кроме того, при всём уважении, Mac у нас сегодня не «стоит в каждом доме», как хотел Стив.

EWWW I.O., полностью платный инструмент, работающий только через API (автоматический программный интерфейс). Оплачивается каждый загруженный файл. Т. е. это не продукт для массового потребителя, протестировать без регистрации и оплаты его нельзя, не будем мешать ему работать.

ImageOptimizer.net, в результатах Гугла – в первых рядах. Инструмент не работает, на любых настройках выдаёт исходный файл без изменений.

Результаты обработки

  • Там, где есть ручная настройка качества, выбиралось 70%.
  • Оценка итоговой картинки – субъективная, на анализе артефактов второго файла, по 10-бальной шкале, обзначенной такими делениями: ❱❱❱. Чем ближе картинка к оригиналу – тем выше оценка. 10 – картинка визуально неотличима от исходного файла, 5 – принято за отличие файла, сохранённого в формате JPG с качеством 70% без дополнительной оптимизации.
  • Для того, чтобы посмотреть полученный файл – кликните на цифру в таблице.
Исходный файл
ShortPixel.com 146 KB (24%) 92 KB (15%)
2 ❱❱
900 KB (17%) 1109 KB (20%)
TinyJPG Web 144 KB (23%) 123 KB (21%)
6 ❱❱❱❱❱❱
808 KB (15%)
TinyJPG Plugin 161 KB (26%) 123 KB (21%)
8 ❱❱❱❱❱❱❱❱
1100 KB (21%) 1177 KB (20%)
Compressor.io 207 KB (34%) 137 KB (23%)
9 ❱❱❱❱❱❱❱❱❱
1609 KB (31%) 2616 KB (46%)
Optimizilla 257 KB (42%) 147 KB (25%)
9 ❱❱❱❱❱❱❱❱❱
1427 KB (27%) 1867 KB (33%)
ConvertImage 166 KB (27%) 157 KB (26%)
4 ❱❱❱❱
1365 KB (26%) 1887 KB (33%)
ACDSee Ultimate 233 KB (38%) 157 KB (26%)
7 ❱❱❱❱❱❱❱
1667 KB (32%) 2839 KB (50%)
Jpeg-Optimizer 164 KB (27%) 165 KB (28%)
4 ❱❱❱❱
1263 KB (21%) 2124 KB (38%)
DynamicDrive 182 KB (30%) 168 KB (28%)
3 ❱❱❱
JpegMini 209 KB (34%) 225 KB (38%)
10 ❱❱❱❱❱❱❱❱❱❱
1494 KB (28%) 2580 KB (46%)
Kraken.io 199 KB (32%) 275 KB (46%)
10 ❱❱❱❱❱❱❱❱❱❱
JPEG 70% 309 KB (50%) 333 KB (56%)
5 ❱❱❱❱❱
2372 KB (45%) 3328 KB (59%)

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

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

При совсем чуть-чуть менее приемлемой картинке, оказалось, что Compressor.io жмёт лучше маленькие файлы, а Optimizilla.com – большие, но это очень условное заключение в рамках данного теста.

Принимая во внимание соотношение размер/качество, то что находится в таблице ниже девяток, но имеет меньшие оценки при большем размере файла – практического интереса не представляет. А выше «девяток» – всего два сервиса.

Интересен оказался самый свежий сервис – ShortPixel . Артефакты очень заметны, но если сжать картинку до такого размера средствами самого формата JPG – картинка получается заметно хуже. ShortPixel ориентирован в большей степени на работу через API и относительно недорог, но очень деструктивен по отношению к изображению.

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

Интересная особенность TinyJPG в виде плугина: после обработки, файл может оказаться как в 8–10 раз меньше исходного по размеру, так и в полтора-два раза больше.

Тестовую картинку №2 лучше всего сжал ShortPixel , но на большинстве файлов с большим числом мелких деталей, победителем выходит веб-версия TinyJPG . Файл получается меньше, а исходное изображение уродуется не так сильно. Однако, TinyJPG допускает файл не более 5 MB, а ShortPixel , даже в бесплатной версии, принимает файлы до 10 MB.

Ещё один важный фактор замера (кроме итогового размера файла) – удобство использования на потоке. Например, если вы озадачились оптимизацией домашнего архива в 100 Гб в первый раз – обработать его полностью при помощи онлайн-сервисов будет очень трудоёмко и долго, из-за ограничений и необходимости порционной загрузки этого объёма на сервер и обратно. При том, что, за скромные 20 USD, с JpegMini для этого потребуется одно движение мыши (буквально: нужно только перетянуть корневую папку с изображениями в окно программы).

Кстати, плугин TinyJPG для фотошопа – выполнен не в виде фильтра, а в виде канала экспорта, т.е. для создания в PS сценария автоматизации он не годится. Поправка: с сайта производителя можно скачать скрипты для автоматизации, которые работают в любой версии Фотошопа, а в Photoshop CC экспорт через плугин встаёт как операция для пакетной обработки. Плугин не имеет никаких ограничений – проверено на файле с разрешением 130Мп (время обработки – около 7 минут на достаточно мощном компьютере).

Вообще, для массовой обработки есть только два варианта – это использование API и JpegMini . За обработку через API платить придётся за каждый обработанный файл.

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

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

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

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

Оптимизируем векторные изображения

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

Векторные изображения имеют основный формат svg. Файл svg можно создать прямо в текстовом редакторе с помощью тега . Также разметку svg встраивайте в веб-страницу.

Уменьшить размер векторных файлов можно, оптимизировав их с помощью решения svgo. Он очищает файлы от бесполезной информации: комментариев и скрытых ненужных элементов. Файлы становятся меньше, но качество отрисовки остается на прежнем уровне.

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

Растровые изображения состоят из пикселей. Каждый пиксель содержит информацию о цвете и прозрачности в цветовой модели RGBA (red, green, blue, alpha — прозрачность). В браузере 256 оттенков на каждый канал цвета, который в пересчете занимает 8 битов. Каждый пиксель весит: 4 канала х 8 бит = 32 бита или 4 байта.

Легко рассчитать вес фотографий самостоятельно, зная размер в пикселях. Допустим, изображения имеет размер 50 х 50 пикселей. Это 2 500 пикселей.

1 пиксель = 4 байта.
2500 пикселей х 4 байта = 10 000 байтов
10 000 байтов / 1024 = 10 КБ

Пример расчета веса изображений для разных размеров:

Размер изображения Количество пикселей Вес файла, КБ
100 х 100 10 000 39
250 х 250 62 500 244
500 х 500 250 000 977
800 х 800 640 000 2500

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

Снижаем глубину цвета. Иногда широкая палитра для отображения цветов не нужна. Если каждый канал имеет 256 оттенков, то мы имеем более 2500 цветов. Ограничьтесь палитрой в 256 цветов всего, тогда на каждый канал будет приходиться 2 бита вместо 8, а пиксель будет весить 2 байта вместо 4. Мы уменьшили вес изображений на сайте в два раза.

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

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

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

Размер изображения больше всего лишь на 10 пикселей, но вес прибавляется существенно:

Фактический размер Отображаемый размер Лишний вес, пиксели
210 х 210 200 х 200 210х210 — 200х200 = 4100
510 х 510 500 х 500 510х510 — 500х500 = 10 100
910 х 910 900 х 900 910х910 — 900х900 = 18 100

Сжимаем данные


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

Прозрачность
ДА НЕТ
Анимация ДА GIF
НЕТ PNG JPEG

Используйте только подходящие форматы для изображений. Например, png не сжимается с потерей данных, поэтому он всегда будет весить много. Используйте формат png только для изображений, где важно показать мелкие детали. Для этого можно использовать разные инструменты.

Imagify сжимает все изображения на сайте. Доступны три режима: обычный, агрессивный и ультра. Используйте первый режим для щадящей оптимизации, второй для оптимального соотношения веса и качества изображений и третий — когда нужно сильно уменьшить размер с потерей качества.

Compressor сжимает картинки на 90% в формате lossy. Есть и второй режим — lossless, в котором сжимают без потери качества файлы png.

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

Jpegtran оптимизирует изображения в формате jpeg. Это утилита, которая входит в libjpeg. С ее помощью убираются метаданные из изображения. При сжатии указывайте значение самостоятельно. Подберите наилучшее соотношение методом подбора, попробовав значения от 5 до 95.

Optipng — инструмент сервиса Google Page Speed. С его помощью сжимайте картинки png без потери качества. Сжатие происходит разными способами. Основная идея — игнорирование ненужных функций. Например, полноцветности для черно-белых картинок.

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

Pngquant может сжимать изображения png с потерями качества. Инструмент конвертирует 32-битные файлы png в 8-битные.

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

Прописываем мета-данные

Название файла. Все картинки называйте понятными словами, используя латиницу. Если файлы уже были названы по-русски, переведите названия, используя сервис «Транслит». Избегайте спама в названии и нечитаемых символов.

Нет Да
  • дом_кп_лесное.jpeg
  • img792138.jpeg
  • kupit-dom-nedorogo.jpeg
  • dom-kp-lesnoe-front.jpeg
  • dom-kp-lesnoe-uchastok.jpeg
  • cottage-kp-lesnoe.jpeg

Поле Title. Когда пользователь наводит курсор на картинку, ему подсвечивается текст, прописанный в поле title. Прописывайте в это поле название фотографии. Пишите на русском.

Нет Да
  • Отдых Подмосковье
  • Фото378
  • Домик на базе отдыха цена
  • Въезд на базу отдыха «Лесные просторы»
  • Интерьер домика на базе отдыха «Соловьи»

Поле Alt. Указывайте описание файла. Если фотография не загрузится, пользователь увидит описание из Alt. Поля title и alt могут совпадать по описанию. Лучше их заполнить одинаково, чем оставить пустыми. Обязательно добавляйте в мета-теги ключевые слова, но избегайте переспама. Делайте описания естественными и информативными.

Шпаргалка

  • Вес изображений влияет на загрузку сайтов. Оптимизировав изображения, вы снизите вес и повысите быстродействие.
  • Векторную графикуиспользуйте для логотипов, значков, элементов, текстов и подобных картинок. Для сжатия применяйте инструмент svgo.
  • Растровые изображения — для иллюстраций. Растровая графика состоит из пикселей, каждый из которых весит 4 байта. Определяйте вес фотографии по формуле: длина х ширина х 4 байта.
  • Ограничьте палитру. В каждом пикселе закодировано 4 канала модели RGBA и используются более 2500 оттенков. Часто так много цветов не нужно, а ограничение палитры позволит уменьшить вес в два раза.
  • Применяйте дельта-кодирование. Человеческий глаз не различает похожие оттенки и цвета, поэтому применяйте дельта-кодирование для соседних пикселей и целых блоков, задавая дельту между пикселями.
  • Масштабируйте изображения, чтобы привести их к размеру, который нужен для отображения на сайте. Размещая на сайте фотографии большего размера, вы вынуждаете пользователей скачивать лишние данные. Я оптимизирую изображения даже на 10 пикселей больше, чем требуется. Проверяйте соответствие размеров в Инструментах разработчика Chrome.
  • Используйте подходящие форматы: gif — для анимации, png — для прозрачности и для отображения мелких деталей, jpeg — для остального. Для сжатия воспользуйтесь сервисами: gif — ezGIF, Gifsicle, для png — Compressor, Optipng, Pngquant, для jpeg — Imagify, Jpegtran, Compressjpeg.
  • Называйте файлы латиницей и понятным названием. В поле Title указывайте название картинки, в поле alt — описание. Title и Alt могут совпадать. Пишите понятные описания для людей, включайте ключевые слова, избегайте переспама.

Материал подготовила Светлана Сирвида-Льорентэ.

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

Полная инструкция по SEO-оптимизации изображений на сайте. Узнайте как правильно заполнять атрибуты Alt и Title у картинок для поисковой оптимизации сайта под Яндекс и Google. Почему SEO-оптимизированные изображения важны для повышения релевантности и представления сайта в поиске? Обо всем подробнее в данной статье.

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

Почему SEO-оптимизация изображений важна?

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

К слову, сервис Яндекс.Картинки является вторым сервисом Яндекса по посещаемости после web-поиска. Он содержит в себе около 10 миллиардов документов и ежедневно предоставляет более чем 5 миллионам пользователей доступ к проиндексированным графическим материалам.

SEO-оптимизация изображений — это достаточна простая для понимания работа, которая поможет вашему сайту:

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

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

Как Яндекс и Google индексируют картинки?

Изображение в HTML-коде любого документа выглядит подобным образом:

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

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

    Текст. Самым значимым сигналом для определения содержимого изображения является текст. Описание изображения и атрибуты очень важны, так как на основании их и ближайшего текста около картинки, микроразметки поисковый алгоритм понимает суть контента, и использует эти данные в дальнейшем для определения уникальности изображения и необходимости добавления его в выдачу. Искажения. Поисковые системы давно научились определять разного рода кропы, ресайзы, вращения, искажения и модификации изображений. Данные манипуляции не помогут Вам повысить уникальность картинок, поэтому следует использовать данные приемы только в целях дизайна. Пользовательская составляющая. При ранжировании изображений в выдаче учитываются пользовательские запросы и опыт взаимодействия с картинками. Алгоритм является самообучаемым и учитывает интерес пользователей, количество кликов и их поведение в отношении тех или иных документов. Другими словами, чем популярнее изображение, чем больше пользователей в сети им делятся и проявляют к нему интерес, тем выше вероятность что изображение не только попадет в выдачу, но и займет там более высокие позиции по соответствующим запросам. Время. Время обнаружения изображения поисковым роботом не является решающим сигналом в определении оригинальности. Данный показатель учитывается, но является гораздо более слабым по отношению к тексту и пользовательским интересам. Соответствие текста и изображения. Поисковые системы определяют содержание изображения на основе текста, далее сравнивают текст вашего изображения с текстом всех дублирующихся изображений в сети до определенной степени схожести. Далее на основе всех текстовых данных всех дубликатов определяются наиболее релевантные слова для конкретного изображения, и опираясь на наибольшее текстовое соответствие выборке определяется релевантный вариант ключевого запроса, наиболее часто встречающийся во всех дубликатах. Наибольшее соответствие этому запросу повышает вероятность попадания именно вашего изображения в выдачу. Качество, размер. Вполне логично, что поисковые системы добавляют в выдачу наиболее качественные изображения с наибольшим размером. Однако, чтобы не создавать избыточной потери трафика для пользователей учитываются изображения в среднем до 4-6 мб. Водяной знак. Наличие water mark не влияет на оценку изображения. Поисковые системы с высокой степенью точности умеют определять дубликаты даже при наличии водяных знаков.

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

Если вам интересно подробнее узнать о алгоритме работы поискового робота картинок Яндекс, советуем вам посмотреть данное видео:

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

Чек-лист: 10 пунктов SEO-оптимизации изображений

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

1. Формат изображений

Поисковая система Google поддерживает индексацию следующих форматов графики: JPEG, PNG, BMP, GIF, WebP и SVG. Яндекс индексирует JPEG, PNG и GIF. Соответствующие форматы представлены в фильтре на странице выдачи Картинок.

Также стоит помнить, что поисковые системы могут медленно индексировать, либо игнорировать маленькие изображения до 150 px ширина/высота, фоновые изображения встроенные с помощью css, либо изображения, выводимые на сайт с помощью скриптов (лайтбоксы, слайдеры). В большей степени это касается Яндекса. Поисковая система может воспринимать данные изображения как элемент дизайна.

В web-е появляются новые поддерживаемые форматы, которые позволяют создавать более сжатые изображения без визуальной потери качества. Сюда относятся, например, JPEG-XR, FLIF, WebP и другие. На сегодняшний день не все браузеры поддерживают данные форматы, поэтому лучше всего свой выбор остановить на всем известной четверке:

    JPG; PNG; GIF;SVGдля элементов дизайна.

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

2. Качество изображения

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


Одинаковые изображения разного качества при увеличении

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

3. Размер и вес изображений

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

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

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

На информационных сайтах необходимо использовать то разрешение изображения, в котором оно будет представлено на сайте. Для дисплеев с ретиной или 4k разрешением при необходимости добавляйте изображения в размере 2x и настройте отображение разных вариантов картинки в зависимости от типа дисплея пользователя .

4. Содержание изображения

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

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

Изображение по запросу «факторы ранжирования Яндекс» в Google Картинках

В Яндексе изображение ведет непосредственно на страницу сайта и использует описание изображение из атрибута Alt.

Изображение по запросу «200 факторов ранжирования Яндекс» в Яндекс Картинках

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

5. Название изображения

Поисковые системы могут учитывать названия изображений в определении их релевантности. Поэтому старайтесь не использовать в именах файлов спецсимволы и случайно сгенерированные буквы наподобие Zsndfsl_wetw.jpg или 23485792345.png. Также не стоит использовать в названиях графики кириллицу и пробелы. Называйте изображения латинскими буквами с использованием дефисов или нижних подчеркиваний, например, iphone.jpg или lamborgini-diablo.png. Если в название необходимо добавить русское слово, используйте транслитерацию, например, kupalnik.jpg.

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

Правильное название изображения с использование транслита

Человекопонятные названия файлов удобны для пользователей, если они захотят поделиться ссылкой на ваше изображение или сохранить его локально на свой компьютер. При этом если вы описываете конкретные товарные модели в интервент-магазине, лучше указывать артикул или модель изображения, например, iphone-x.jpg или puhovik-wm180501.jpg .

6. Атрибуты изображений Alt и Title

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

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

Правильное заполнение атрибута Alt может повысить релевантность страниц, а также самих изображений в выдаче Картинок. Атрибут является одним из самых сильных сигналов для поисковых систем в определении содержимого изображения. Alt должен содержать в себе точную и короткую информацию о изображении. Старайтесь делать альтернативный описание не более 50-60 символов.

Атрибут title — заголовок изображения. Он отображается как всплывающая подсказка при наведении курсора на картинку. Данный атрибут в отличие от Alt является необязательным в изображении. Его использование может дать пользователю дополнительную информацию о графическом контенте. Если в HTML-коде страницы изображение заключено в тег , т.е. является ссылкой, использовать атрибут title необходимо в теге .

7. Sitemap.xml и robots.txt для изображений

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

В дополнение к основной карте сайта Google рекомендует добавлять карту изображений sitemap-image.xml. Ее синтаксис выглядит подобным образом:

xml карта изображений Google

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

Если вы планируете создать sitemap-image.xml, то укажите два разных пути к карте сайта для разных User-agent Яндекс и Google. В файле robots.txt пропишите для User-agent: Yandex ссылку на основную карту сайта, а для User-agent: Googlebot ссылку на карту сайта, которая будет содержать в себе ссылки на основную карту сайта со страницами и карту сайта с изображениями.

User-agent: Googlebot
Sitemap: https://naked-seo.ru/sitemap-google.xml
User-agent: Yandex
Sitemap: https://naked-seo.ru/sitemap.xml

8. Микроразметка

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

Документация по внедрению микроразметки http://schema.org/ImageObject

9. Уникальность

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

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

Проверить уникальность картинки вы можете с помощью сервисов Яндекса и Google «поиск по картинке», либо с помощью сервиса Tineye.

10. Контекст использования

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

Инструменты для оптимизации изображений

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

1. TinyPNG. Простой и бесплатный инструмент, который позволяет оптимизировать изображения в форматах jpg и png без потери качества. Сжатие уменьшает размер изображения до 90%. На TinyPNG можно одновременно загрузить до 20 изображений, максимальный вес которых может быть не более 5 мб. Для более расширенных возможностей предусмотрена платная версия.

2. Compressor. Схожий сервис с высокой степенью сжатия изображений, который поддерживает 4 графических формата: JPEG, PNG, GIF, SVG. Позволяет сжимать анимацию и SVG типом компрессии Lossy, jpg и png типом компрессии losseless, экономя до 90% места в ваших медиапапках.

3. Jpegmini. JPEGmini-это технология оптимизации фотографий, которая уменьшает размер файла фотографий JPEG до 5 раз, сохраняя при этом разрешение и качество исходных фотографий. Сервис позволяет сжимать только JPEG изображения.

4. ImageOptim. Онлайн-сервис и локальная утилита для работы на MacOS. ImageOptim поддерживает 4 самых популярных web-формата изображений: JPEG, SVG , GIF и PNG. Помимо сжатия самих изображений сервис удаляет мета-данные о изображениях: координаты GPS, серийный номер камеры, авторов и т.д. Эти данные порой добавляют графике излишний вес.

5. Kraken.io. Это надежный, сверхбыстрый оптимизатор изображений и компрессор с лучшими в своем классе алгоритмами, который поддерживает пакетную обработку фотографий, в том числе, по url-адресу сайта, но только на платной версии. В бесплатной версии доступно сжатие JPEG, SVG , GIF и PNG форматов с возможной детализацией параметров.

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

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

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

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

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

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

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

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

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

Выводы

Итого, для эффективной SEO-оптимизации изображений необходимо:

  1. Использовать индексируемые поисковыми системами форматы фалов;
  2. Размещать на сайте сжатые изображения без визуальной потери качества в соответствие с тем разрешением, в котором они представлены на сайте;
  3. Добавлять на сайт уникальные или переработанные графические материалы;
  4. Прорабатывать атрибуты, описания и текст вокруг изображений;
  5. Называть файлы в соответствие с содержимым картинок;
  6. Добавить sitemap-image.xml на сайт для Google;
  7. Внедрить на сайт микроразметку SchemaOrg;
  8. Открывать для индексации медиафайлы в robots.txt;
  9. Использовать бесплатные стоки картинок и инструменты по их оптимизации.


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

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

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

Оптимизация изображений — обзор качественных инструментов для оптимизации

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

Оптимизация изображений (сжатие изображений), как важный фактор влияющий на ускорение загрузки сайта и на SEO сайта в целом.

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

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

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

Чтобы проверить веб-страницу и получить предложения, как ускорить ее открытие, зайдите на PageSpeed Insights от компании Google или YSlow от Yahoo. Также обязательно изучите перечень оптимизации изображений Google.

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

Готовы оптимизировать Ваши изображения?

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

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

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

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

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

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

Формат JPG наиболее распространенный формат, он отлично подходит для фотографий м многоцветных изображений.

Именно в формате JPG (JPEG), изображения имеют меньший вес.

Если Ваше изображение в другом формате, попробуйте конвертировать его в формат JPG (JPEG), после этого сравните качество и вес изображений, оригинала и копии в формате JPG (JPEG). В программе Paint, Вы легко можете конвертировать изображения в нужный формат, используя инструмент «Сохранить как».

Список онлайн сервисов и программ для оптимизации изображений:

PunyPNG . PunyPNG это бесплатный онлайн-инструмент, который поддерживает JPG, GIF и PNG. Можно оптимизировать до 20 файлов, макс 500 Кб каждый. Цена: бесплатно. Есть Pro планы начинаются от $ 3 в месяц.

Trimage . Trimage является кросс-платформенный инструмент для оптимизации PNG и JPG файлы. Trimage использует OptiPNG, Pngcrush, AdvanceCOMP и Jpegoptim, в зависимости от типа файла. Все сжатия изображений доступны на самом высоком уровне без потерь. Доступно для Linux и других систем Unix. Цена: бесплатно.

ImageOptim . ImageOptim представляет собой приложение для Mac, которое позволяет оптимизировать изображения PNG, JPG, GIF. Для этого, ImageOptim объединяет несколько инструментов, в том числе PNGOUT, Pngcrush, Zopfli, JpegOptim и Gifsicle. ImageOptim находит лучшие параметры оптимизации и удаляет ненужные комментарии и цветовые профили. Цена: бесплатно.

Kraken.io . Kraken был создан с целью быть единым и простым в использовании инструментом для оптимизации изображений. Он предлагает несколько методов для изменения размера и обрезки изображений, есть варианты без потерь и с потерями, и имеет WordPress плагин. Цена: Базовый Веб-интерфейс является бесплатным. Бесплатный веб-интерфейс имеет ограничение на Размер файла-1 Мб. Оптимизированные изображения доступны для загрузки в течение всего 12 часов. Pro планы начинаются от $ 9 в месяц. Пользователи PRO могут получить доступ к их изображениям в любое время с помощью Kraken облака.

RIOT . RIOT это бесплатная программа оптимизации изображения для Windows, для визуальной настройки параметров сжатия, сохраняя при этом минимальный размер файла. Сравнение исходного изображение рядом с оптимизированным изображением в режиме реального времени и сразу увидите полученный размер файла. К Вашим услугам пакетная поддержка нескольких файлов, инструмент настройки изображения, снижения цветности, и многое другое. Цена:бесплатно.

PNGOptimizer . PNGOptimizer это небольшая программа для Windows, которая очищает и уменьшает файлы PNG. Она также преобразует в другие форматы без потерь изображения (BMP, GIF, TGA) в PNG. PNGOptimizer имеет простой интерфейс «перетащил и бросил» и создает скриншоты PNG. Цена: бесплатно.

Нажмите Upload image (s), выберите на Вашем компьютере нужное изображение, ползунком выберите процент компрессии и нажмите Compress now. Если результат устраивает, скачайте на компьютер.

CompressNow . Compressnow это бесплатный онлайн-инструмент, который поддерживает GIF, JPG, PNG. Просто загрузите изображение до 9 МБ, выберите уровень сжатия, и посмотрите результат. Цена: бесплатно.

FILEminimizer Pictures . FILEminimizer Pictures это бесплатное программное обеспечение, для уменьшения размера Ваших изображений, фотографий до 98 процентов. Оптимизирует изображения и фотографии JPG, BMP, GIF, TIFF, PNG, EMF. Можно оптимизировать целые цифровые фотоальбомы. Выберите один из четырех различных уровней сжатия. FILEminimizer также поставляется в Premium Suite, который интегрируется с Microsoft Office, Microsoft Outlook, и Lotus Notes. Цена: бесплатно.

Image Optimizer . Image Optimizer представляет собой бесплатный инструмент, который доступен на сайте или можно скачать, как программу. Измените размеры изображения, качество или размер файла. Выберите изображение или оптимизируйте изображения
пакетом. Цена: бесплатно.

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

TinyPNG . TinyPNG представляет собой интернет-инструмент, который предоставляет сжатие с потерями, чтобы уменьшить размер Ваших файлов PNG. Путем выборочного уменьшения количества цветов в изображении, меньше байтов требуется для хранения данных. TinyPNG также предлагает плагин для Photoshop, для ОС Windows и Mac. Цена: бесплатно. До 20 изображений, не более 5 MB, каждый файл.
Перетащили и бросили.

Optimizejpeg. Optimizejpeg — это онлайн сервис для оптимизации изображений. Если Вам нужно уменьшить вес файла в форматах PNG/JPEG/GIF, этот сервис Вам должен понравиться. Здесь Вы можете оптимизировать изображения загрузив их с компьютера или по URL из интернета. Просто добавьте Ваш файл, выберите уровень компрессии в процентах, нажмите кнопку Compress и через несколько секунд Ваш сжатый файл будет готов. Базовые опции бесплатно, есть опции PRO. В сервис интегрирован редактор изображений (Image Editor) в котором имеется много инструментов для редактирования. Открыть этот Image Editor, можно нажав на палитру под кнопкой Compress, на страницах PNG Compressor и GIF Compressor. Есть инструмент для обрезки с аудио файлов, создавайте рингтоны, мелодии с плавными переходами и др. Есть инструменты для работы с видео на соответствующей странице.

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

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

Поддерживаемые форматы: JPG, PNG, GIF, PDF, WebP

Есть плагин для WordPress.

ShortPixel сейчас входит в пакет Briefcase от компании AppSumo — это программы и сервисы для бизнеса с огромной скидкой на ежемесячную подписку. Более 30 инструментов в пакете, розничная цена всех лицензий более $1000 ежемесячно, но в пакете Briefcase, цена всего $49. Получить больше информации можно здесь.

В заключении

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

Плагин кэширования WP Fastest Cache на русском языке, пошаговая инструкция.

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

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

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

Онлайн сервисы для оптимизации картинок:

Онлайн сервис для оптимизации файлов JPG. Довольно простой и понятный веб интерфейс и скудные настройки. Можно выбрать уровень сжатия от 0 до 99, а так же ширину оптимизированного изображения. Например из исходника фотографии бешеннего размера вам нужно маленькую картинку, выбираем нужный размер и оптимизируем фотографию.

Довольно интересный сервис для оптимизации изображений. Есть возможность загрузки фото по URL и больше никаких настроек нет, а это и не нужно, финальный результат вас приятно удивит — ваше изображение «подается» сразу в 9 вариантах: Оригинал, три миниатюры от 64px до 125px, и пять вариантов степени сжатия изображения — от 90% до 10%. Вы сами можете выбрать подходящий себе вариант и тут же посмотреть сколько «весит» ваша картина.

Очень приятный и милый сервис для оптимизации файлов PNG. Няшная панда будет радоваться, когда вы загрузите файлы на сервис, кстати, сервис может принять до 20 файлов за раз, что тоже довольно приятно при большом количестве картинок. Так же есть плагин TinyPNG к Photoshop.

Smush.it (Сервис закрылся)

Честно сказать — ни о чем. Возможность загрузки изображение по URL и до 10 файлов за раз. Обычный сервис, обычный сжиматель картинок, обычный аутсайдер среди всех сервисов по оптимизации изображений. Почему? Все выводы и анализ в конце статьи.

Интересный и полезный оптимизатор для картинок. Во-первых: загрузка изображений по URL. Во-вторых: выбор конвертации файла в конечном виде. Например, вы загружаете JPG но на выходе вам нужен PNG или GIF — просто выбираем из выпадающего меню. В-третьих: визуальный выбор качества сжатия картинки. Но из минусов — очень плохо, но все таки сжимает GIF. Очень хороший сервис.

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

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

Довольно интересный и полезный сервис.

Все возможности этого сервиса:


  • Сжать изображение
  • Обрезать изображение
  • Повернуть на 90 или на 180 градусов куда угодно
  • Добавить четкости
  • Добавить цвет фона в прозрачных GIF или PNG
  • Увеличить Экспозицию, Контраст или насыщенность фотографии
  • Добавить рамку к фото

Довольно многофункциональный сервис. И очень быстрый.

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

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

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

Оптимизаторы картинок с мультизагрузкой файлов: Kraken, TinyPNG и Smush.it

Анализ сжатия картинок всех представленных сервисов:

Если вам нужен сервис для сверх высокой степени сжатия без потери качества, воспользуйтесь Online Image Optimizer по JPG, Jpeg Reducer по PNG, Compressnow по GIF.

Лидером анализа оказались два сервиса: Online Image Optimizer и Jpeg Reducer

Анализ проводился на 75% степени сжатия изображений, 10 файлов с разрешением fullHD для JPG, 10 файлов PNG, и 10 файлов gif, различной цветовой гаммой и различными весами файлов. Лимиты на вес файла в рейтинге не участвовали.

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

13 приёмов оптимизации изображений: как выйти в топ поиска по картинкам

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

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

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

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

1. Используйте качественные и релевантные изображения

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

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

Размещайте изображения рядом с текстом, который они иллюстрируют.

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

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

У изображения должна быть цель

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

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

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

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

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

2. Используйте оригинальные изображения по возможности

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

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

Как проверить картинку на оригинальность

  • С помощью сервиса TinyEye.

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

Если же картинка уже используется на каких-либо сайтах, то TinyEye покажет список этих сайтов.

  • Проверить, есть ли изображение в индексе поисковых систем.

Например, загрузите фотографию в «Яндекс.Картинках». Если в индексе поисковика ее нет, то вы увидите такое:

Если картинка есть в индексе, то «Яндекс» это покажет.

Не используйте изображения, защищенные авторским правом

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

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

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

В «Google Картинках» вбейте поисковый запрос, а затем выберите «Инструменты» → «Право на использование» → «С лицензией на использование» (или «С лицензией на использование и изменение»).

О поиске бесплатных картинок можно почитать в справке Google.

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

Картинки с фотостоков можно улучшить

Картинку можно сделать более интересной и привлекательной с помощью несложной обработки и оформления.

Например, вот такая картинка:

. обретает новую жизнь в блоге Максима Ильяхова с его фирменной оранжевой рамкой.

Для такого оформления необязательно быть мастером «Фотошопа». Достаточно онлайн-сервисов, таких как Canva или Crello.

3. Названия файлов важны: замените «DSC1234.jpg» на понятное название

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

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

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


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

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

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

Оптимизация фото для интернет-магазина

Если у вас интернет-магазин и вы размещаете много фотографий товаров, можно пойти еще дальше.

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

Подумайте о том, как пользователи ищут товары на вашем сайте. Какие шаблоны названий они используют при поиске? Люди, которые ищут «эйр максы», могут вбивать поисковый запрос по-разному:

«кроссовки Nike air max мужские»;

  • «мужские кроссовки air max Nike»;
  • «мужские Nike air max»;
  • «найки эйр макс»;
  • и так далее.
  • Посмотрите, какие паттерны преобладают (просто проверьте это в аналитике). Возьмите тот шаблон, который встречается чаще всего, и используйте его как основу при создании названий для картинок.

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

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

    4. Выберите правильный формат изображения

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

    Нет правильного или идеального формата для изображений. Все зависит от типа картинки и как вы планируете ее использовать.Чаще всего используются такие форматы: JPEG, PNG, GIF. Их поддерживают все браузеры и поисковые системы. Реже — SVG и WebP.

    Вот несколько рекомендаций:

    • Для интернет-магазинов оптимальный вариант — JPEG. Этот формат дает лучшее качество при наименьшем размере файла. Также рекомендуется использовать JPEG для больших фотографий или иллюстраций.
    • PNG используйте, если нужно сохранить прозрачность фона. Остальные форматы не поддерживают эту возможность. Иногда PNG выигрывает у JPEG и по весу файла.
    • Для логотипов и иконок используйте векторный SVG. С помощью CSS или JavaScript вы можете управлять картинками в формате SVG. Например, менять их размер без потери качества.

    Вместо JPEG и PNG можно использовать малоизвестный формат WebP. Этот формат сохраняет высокое качество при еще меньших размерах файла. Конвертировать фотографию в WebP можно с помощью Squoosh. Правда, есть нюанс — формат WebP не поддерживается браузером Safari.

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

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

    Можно пойти двумя путями:

    1. Уменьшить вес файлов изображений на сайте.
    2. Оптимизировать способ отображения картинки — показывать превью.

    Насколько большими должны быть файлы изображений

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

    Как уменьшить вес изображений

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

    Вес изображения можно уменьшить при экспорте картинки в «Фотошопе» («Файл» → «Экспортировать» → «Сохранить для Web»), просто снизив качество.

    Что здесь можно сделать:

    • Выбрать JPEG-формат.
    • Немного снизить качество (до 60-80%).
    • Изменить размеры изображения.

    Для примера, картинка в формате PNG-8 и размером 3000 х 3000 пикселей занимает 2,18 МБ.

    Сохраняем ее в JPEG, снижаем качество до 80%, а также уменьшаем размеры до 1500 х 1500 пикселей. Вес после оптимизации — 250,2 КБ.

    Сервисы для сжатия картинок

    Если вы не мастер «Фотошопа» (и не купили лицензионную версию), можно воспользоваться одним из сервисов для сжатия картинок.

    JpegMini — позволяет уменьшать вес картинок до 80%.

    ImageOptim — десктопная программа для Mac. Позволяет оптимизировать картинки без потери качества. Программа удаляет из файла картинки метаданные: местоположение GPS, серийный номер камеры, данные о снимке и так далее. Работает с форматами JPEG, SVG , GIF и PNG.

    Compressor — бесплатный онлайн-сервис. Может сжимать до 90%. Правда, в сервис нельзя загружать картинки весом более 10 МБ.

    TinyPNG и TinyJPG — онлайн-сервисы для сжатия PNG и JPEG-изображений. Бесплатно можно одновременно загружать до 20 файлов весом до 5 МБ каждый. Степень сжатия — более 70%.

    Compressjpeg — сервис для пакетной загрузки и оптимизации изображений (до 20 файлов одновременно).

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

    После оптимизации изображений проверьте скорость загрузки страницы с помощью Google PageSpeed Insights.

    Повышаем скорость загрузки за счет превью

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


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

    Помните: каждая лишняя секунда загрузки обходится вам потерями трафика.

    6. Загружайте на сайт изображения точно по размеру

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

    К примеру, вы загрузили картинку в размере 2500 х 1500 пикселей, а на странице она должна отображаться в размере 250 х 150 пикселей. Несмотря на то, что фактически показывается картинка небольшого размера, для ее отображения большое изображение должно загрузиться полностью. Если таких картинок на странице несколько — это может существенно повлиять на скорость загрузки.

    Что с этим делать?

    Создавайте изображения в том размере, в котором они должны отображаться на сайте. Размер можно изменить в «Фотошопе». Выберите «Изображение» → «Размер изображения».

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

    Посмотрите, как много лишнего «веса» картинки мы можем убрать таким способом.

    Если не можете использовать «Фотошоп», можно воспользоваться онлайн-редакторами (например, PIXLR) или сервисами по обработке картинок. Например, ресайз картинок от Slide.ly позволяет подогнать иллюстрацию под форматы соцсетей или произвольный размер.

    Пример

    В карточках новостей картинки отображаются в уменьшенном виде. Смотрим код — изображение меньшего размера:

    На странице новости отображается полноразмерная картинка большего разрешения:

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

    7. Используйте адаптивные картинки

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

    Например, вы разместили фото в разрешении 800 х 400 пикселей:

    • Один пользователь зайдет на сайт со смартфона, и фотография будет смотреться нормально.
    • Другой пользователь использует iMac с retina-дисплеем. На таком дисплее картинка будет отображаться с существенной визуальной потерей качества.

    Что можно сделать: загрузите несколько вариантов исходного изображения (в разных размерах) и показывайте для экранов с разным разрешением картинки соответствующих размеров.

    Используйте для этого атрибут srcset. С его помощью можно указать в элементе несколько версий одного изображения для экранов разных размеров.

    Вот так выглядит HTML-код:

    А так это реализовано у «Лайфхакера», например:

    8. Заполните атрибуты title и alt

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

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

    Вот так выглядит код, в котором заданы атрибуты title и alt:

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

    Если браузер по какой-то причине не может загрузить или отрисовать картинку — он покажет текст, который указан в этом атрибуте.

    Нужно обязательно добавлять альтернативное описание картинки:

    • Если картинка не загрузится, браузер покажет описание и пользователь сможет хотя бы понять, что он должен был увидеть.
    • Полезно для ранжирования. Используйте ключевые слова в атрибутах. Это поможет поисковым роботам понять, что изображено на картинке, и затем предлагать ее в ответ на релевантный запрос пользователей в поиске по картинкам.
    • Альтернативное описание может служить как анкор для внутренней ссылки, если изображение — это ссылка на другую страницу сайта.

    Вот несколько простых правил для атрибутов alt:

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

    Хороший пример того, как правильно заполнять атрибут alt, приводит Google в справке для вебмастеров:

    9. Создайте Sitemap-файл для изображений

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

    Это поможет поисковым роботам найти те изображения, которые иначе они бы не обнаружили (например, если изображения загружаются с помощью JavaScript).

    Для картинок можно создать отдельный XML-файл или обновить существующую карту сайта.

    В Sitemap-файле для изображений (в отличие от обычных XML-файлов) можно указывать URL с других доменов. Это позволяет использовать CDN (Content Delivery Network — сеть доставки контента) для размещения графических файлов.

    С помощью такого синтаксиса можно указать до 1000 изображений для одной страницы.

    Подробнее о Sitemap-файлах для изображений: справка Google, справка «Яндекса».

    Для сайтов на WordPress есть специальный плагин Google XML Sitemap for Images, который автоматически создает Sitemap-файл для всех изображений, которые вы загружаете на сайт.

    10. Добавьте подписи к изображениям

    Подпись — это текст, сопровождающий изображение на странице. Например, так:

    Почему важно добавлять подписи? Потому что люди обращают на них внимание при быстром сканировании страницы.

    Подписи под изображениями читаются в среднем на 300% чаще, чем основной текст, поэтому отсутствие их или неправильное использование означает упущение возможности привлечь огромное количество потенциальных читателей (KissMetrics, 2012).

    Что можно сделать в подписи:


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

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

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

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

    11. Используйте микроразметку Open Graph и Twitter Card

    Микроразметки Open Graph и Twitter Cards нужны для того, чтобы настроить внешний вид поста в социальных сетях при репосте статьи с сайта.

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

    И когда пользователи захотят поделиться статьей у себя в соцсетях:

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

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

    Open Graph

    Разметка Open Graph — разработка Facebook. Кроме Facebook, ее также используют несколько других соцсетей: ВКонтакте, Google+, Twitter, LinkedIn, Pinterest.

    Вот как выглядит пост в Фейсбуке, если мы размещаем ссылку на статью с разметкой Open Graph:

    А так — если на странице нет микроразметки:

    Код микроразметки Open Graph для изображений выглядит так:

    Подробнее о микроразметке можно почитать в справке «Яндекса», а также в официальном руководстве.

    Twitter Cards

    Twitter Cards отвечает за внешний вид постов в Twitter. Если этой разметки нет, Twitter использует Open Graph.

    Так выглядит код с разметкой Twitter Cards:

    Подробнее о микроразметке Twitter Cards — в руководстве Twitter.

    Как добавить

    Для сайтов на WordPress микроразметку можно добавлять автоматически с помощью плагинов Yoast SEO или All In One Seo Pack.

    Также есть плагины и для других CMS:

    • Open Graph Meta — для OpenCart;
    • Open Graph и Twitter Cards для Битрикс.

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

    12. Структурированные данные Schema.org — для лучшего отображения в поиске

    Еще один вид микроразметки, который стоит использовать — Schema.org. С ее помощью вы можете точно указать поисковым системам, какой тип контента представлен на странице.

    В основном Schema.org влияет на внешний вид сниппетов в поисковой выдаче, но также может учитываться и в поиске по картинкам.

    Например, в «Google Картинках» изображения из карточек товаров (размеченных с помощью Schema.org) будут отображаться со специальным значком «Продукт»:

    В Google Картинках поддерживаются структурированные данные для нескольких типов контента:

    • товары,
    • видео,
    • рецепты.

    Пример кода разметки для товара:

    Подробнее о разметке можно почитать в справочных материалах Google:

    13. Размещайте изображения на своем хостинге

    Иногда изображения размещают на сторонних ресурсах (например, на хостингах для картинок Imgur, FactPic или других). Это делают для экономии места на собственном хостинге.

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

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

    Сети доставки контента (CDN)

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

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

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

    Несколько слов от поисковых систем

    • Использовать только те изображения, которые вписываются в контекст страницы и дополняют остальное содержание по смыслу.
    • Не использовать неоригинальные изображения.
    • Размещать картинки рядом с релевантным текстом.
    • Заполнять атрибуты alt.
    • Уделять внимание качеству и содержанию страниц. Google учитывает качество информации с сайта при ранжировании картинок. А также может использовать фрагменты текста страницы в описаниях к изображению в Google Картинках.
    • Прорабатывать структуру URL для изображений, так как кроме названий файлов картинок Google также учитывает пути в URL.
    • Оптимизировать сайт под просмотр с мобильных устройств.
    • Размещать качественные изображения.
    • Уделять внимание качеству сайта в целом.
    • Всегда прописывать атрибуты title и alt.
    • Прилегающий к изображениям текст должен быть релевантным картинке.

    Чек-лист: обязательные условия оптимизации картинок

    1. Размещайте только релевантные изображения. Они должны дополнять основной контент страницы или объяснять что-то быстрее и лучше, чем текст.
    2. Используйте оригинальные изображения или изображения с открытой лицензией. В России уже есть случаи, когда за использование чужих фотографий приходится выплачивать штрафы.
    3. Давайте файлам изображений понятные названия.
    4. Выбирайте оптимальный формат. Для большинства случаев подойдет JPEG.
    5. Сжимайте картинки, если визуально не будет заметно потерь качества.
    6. Загружайте изображения в тех размерах, в которых они будут отображаться на сайте.
    7. Для разных экранов — разные версии одного изображения.
    8. Обязательно прописывайте title и alt.
    9. Добавьте список изображений в Sitemap-файл.
    10. Подписывайте изображения, если это полезно для пользователей.
    11. Позаботьтесь о внешнем виде постов в соцсетях с ссылками на ваши статьи. Тут вам помогут OpenGraph и Twitter Cards.
    12. Используйте Schema.org.
    13. Лучше размещать медиаконтент на своем хостинге. Если его слишком много — используйте CDN.

    Материал опубликован пользователем.
    Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

    спасибо, хороший полный материал!

    Отличная подробная статья, спасибо!

    Для подписи картинки можно использовать тег figure и figcaption

    Спасибо за статью. У вас ссылка «Google Картинки» слово картинок ведет на Яндекс Картинки

    Вопрос про title и alt: как быть со спамом слов? Например интернет-магазин продаёт телевизоры. На странице товара 20 изображений модели телевизора и все они будут иметь +- одинаковые title и alt — слово телевизор + его модель + ещё что-то. Робот поисковой системы анализирует код и видит большое количество повторений слов. Как правильно прописывать title и alt если они +- одинаковые. Особенно актуально для шаблона, если на сайте тысячи товаров и десятки тысяч изображений.

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

    Отличная статья, жаль, что она скопирована. Хоть что то бы новое добавил.

    Введите любой значемый кусочек в яндекс или гугл и увидите, я этот текст уже читал в 2х источниках

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

    к сожалению у меня на сайте по турам в Непал и Индию atmatravel.ru, сделанный на ukit название файла переводит в машинный код(((

    Почему крупные сайты не используют понятное название картинок? К примеру озон или элдорадо?

    «1. Используйте качественные и релевантные изображения»
    «2. Используйте оригинальные изображения по возможности»

    — Петрович, тут это агентство, которому мы платим деньги, просят нас пойти и сфоткать/потратиться на качественные фотографии наших листогибочных станков с ЧПУ управлением. Что им ответить?
    — Всмысле от поставщика фотографии скинуть, разве их уже нет на сайте?
    — Нет, они просят нас сделать УНИКАЛЬНЫЕ ФОТОГРАФИИ, всех станков, что-то про гугел пишут и про оригинальность фотографии.
    — Шли на йух. Им надо пусть и фоткают, я им за, что 30к плачу? За SEO плати, за директы/адвордсы плати, УТП им придумывай, в живосайте отвечай, как будто это я на них работаю, а не они на меня!

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

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

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

    Bulk Resize Photos

    Этот сайт позволяет загрузить сразу много изображений и в один клик изменить их размеры. Для удобства пользователей имеется несколько шаблонов, позволяющих сделать картинки одинаковой ширины или длины. Существует также возможность изменения формата файла (JPG, PNG) и уровня компрессии.

    BIRME

    Аббревиатура BIRME расшифровывается как Batch Image Resizing Made Easy. Это действительно очень простой и чрезвычайно быстрый онлайновый ресайзер картинок. Он позволяет изменять размеры изображений с сохранением пропорций и без, сжимать файлы с заданным уровнем компрессии и добавлять к картинкам простую рамку.

    Resize Pic Online

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

    PicGhost

    С помощью этого сервиса вы сможете не только изменить размер изображений, но и нанести на них свой водяной знак. Может пригодиться, если вы опасаетесь несанкционированного использования выложенных вами в Cеть фотографий. Кроме загрузки файлов с жёсткого диска (до 40 штук одновременно), PicGhost может обработать фотографии, хранящиеся в Facebook или Flickr.

    TinyPNG

    TinyPNG предназначен только для одной операции — оптимизации изображений, но справляется с ней, вероятно, лучше всех в интернете. Несмотря на название, он может обрабатывать не только PNG-файлы, но и JPG. От вас требуется только загрузить файлы, а далее сервис самостоятельно вычислит оптимальный уровень компрессии и выполнит сжатие. Обработанные изображения можно загрузить в виде одного архива или сохранить прямо в облачное хранилище Dropbox.

    Optimizilla

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

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

    Блог компании ArtisMedia

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

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

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

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

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

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

    Лучший автоматический оптимизатор JPEG файлов сжимает изображения на 40-60%.

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

    Изменяет размер, сжимает и оптимизирует изображения.

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

    Сжимает изображения и ускоряет их загрузку без потери качества.

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

    Уменьшает размер фотографий и изображений сохраняя качество.

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

    Цукерберг рекомендует:  Вакансии BandAssist
    Понравилась статья? Поделиться с друзьями:
    Все языки программирования для начинающих