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

TinyPNG

Онлайн сервис TinyPNG служит для оптимизации (сжатия) изображений в форматах PNG и JPG. Сервис имеет две идентичные страницы по разным адресам: tinypng.com и tinyjpg.com.

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

Особенности онлайн сервиса TinyPNG:

• Поддержка форматов JPG и PNG
• Загрузка на сервис до 20 изображений
• Размер одного файла не более 5 MB

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

При помощи ссылки «download» загрузите на компьютер готовое изображение. Обработанные изображения можно сохранить в облачное хранилище Dropbox (кнопка «Save to Dropbox»), или скачать на компьютер сразу все изображения (кнопка «Download all»). Сохраненные файлы имеют оригинальное название.

Я использую этот сервис для оптимизации изображений, которые я добавляю на свой сайт. Вначале я обрабатываю картинки в программе Photoshop: изменяю размер (соотношение сторон) изображений, оптимизирую для web, сохраняю файлы в форматах «.jpeg» и «.png».

Далее я дополнительно сжимаю изображения на сервисе TinyPNG (TinyJPG), затем скачиваю на компьютер изображения наиболее меньшего размера в форматах JPEG или PNG.

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

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

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

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

Для чего нужна оптимизация изображений

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

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

Поговорив немного о теории, давайте перейдем к практике.

Final thoughts on the best online image optimizer tools

According to our results, Kraken offers the highest compression for JPG images, while Compressor.io won out when it comes to PNG files. You can view a summary of our results one more time below:

Last but not least, if you’re a website owner and simply want an efficient tool to optimize all images on that website, give Optimole a look. It’s our set-it-and-forget-it image optimizer that works on complete autopilot.

Do you have any questions about the best way to use these online image optimizer tools? Let us know in the comments and we’ll try to help!

These 7 image optimizer #tools let you compress images from your web browser

Улучшенный JPEG

Каково текущее состояние с форматами JPEG в интернете?

tl;dr: поддержка в браузерах сильно отличается. Если использовать современные разработки, то часто придётся выдавать разным браузерам разные форматы.Различные современные форматы (и оптимизаторы) показывают качество сжатия при целевом размере файла 26 КБ. Качество сравнивается инструментами SSIM (структурное сходство) и Butteraugli, которые мы более подробно рассмотрим позже.

• JPEG 2000 (2000) — улучшение сжатия за счёт замены дискретного косинусного преобразования на вейвлеты. Поддержка в браузерах: десктопный Safari и iOS.
• JPEG XR (2009) — альтернатива JPEG и JPEG 2000, поддерживающая HDR и широкие цветовые гаммы. Создаёт файлы меньшего размера, чем JPEG, со слегка с меньшей скоростью кодирования/декодирования. Поддержка в браузерах: Edge, IE.
• WebP (2010) — основанный на прогнозировании блоков формат от Google поддерживает сжатие с потерями и без потерь. Обеспечивает лучшее сжатие, чем JPEG, и поддерживает прозрачность, как PNG. Не хватает настройки цветовой субдискретизации и прогрессивной загрузки. Скорость декодирования ниже, чем у JPEG. Поддержка в браузерах: Chrome, Opera. Экспериментальная поддержка в Safari и Firefox.
• FLIF (2015) — формат сжатия без потерь, превосходящий PNG, WebP без потерь, BPG без потерь и JPEG 2000 без потерь по коэффициенту сжатия. Поддержка в браузерах: нет, но есть JS-декодер.
• HEIF и BPG. С точки зрения сжатия они одинаковы, но поставляются в разных обёртках:
• BPG (2015) — замена JPEG более эффективным сжатием на основе HEVC (High Efficiency Video Coding). Кажется, обеспечивает меньший размер файлов по сравнению с MozJPEG и WebP. Вряд ли получит широкую поддержку из-за проблем с лицензированием. Поддержка в браузерах: нет, но есть JS-декодер.
• HEIF (2015) — формат для изображений и последовательностей изображений, закодированных HEVC с межкадровым предсказанием. Apple анонсировала на WWDC, что будет изучать переход c JPEG на HEIF в операционной системе iOS, что даст уменьшение размера файлов до двух раз. Поддержка в браузерах: нет на момент написания статьи. Должна появиться в десктопном Safari и iOS 11.

одинподдержка в браузерах сильно отличаетсяуказать content-type

Изменение масштабов изображений

WordPress, начиная с версии 4.4, поддерживает адаптивные изображения (не уменьшенные с помощью CSS). Движок автоматически создает несколько копий изображения разного размера, загружая их в медиа-библиотеку. Используя атрибут srcset, браузеры теперь могут выбирать для загрузки файл наиболее подходящего размера, исходя из характеристик экрана устройства пользователя.

Пример кода отзывчивых изображений srcset

Медиа-библиотека WordPress создает миниатюры на основе ваших установок. Но при этом она сохраняет оригинальные изображения без изменений. Чтобы изменить размер изображений, не сохраняя оригинальные, можно воспользоваться бесплатным плагином Imsanity.

Настройка медиафайлов в WordPress

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

Форматы изображений и их влияние на SEO

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

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

Давайте рассмотрим самые популярные форматы и проанализируем их особенности:

• JPEG — самый широко используемый тип файла, благодаря сжатию позволяет сохранять компромисс между качеством и размером.
• PNG — сохраняет лучшее качество, но весит больше. Принято использовать JPEG для фотографий и PNG — для всего остального, включая инфографики и элементы дизайна.
• BMP — формат, также позволяет передавать высокое качество изображений. Такие файлы нельзя сжать, как JPEG и PNG.
• WebP — относительно новый формат, многообещающий в плане компрессии. Благодаря существенному уменьшению размера можно достигнуть впечатляющего улучшения скорости: например, после перехода на WebP для миниатюр YouTube ускорил загрузку в 10 раз. Но пока что не все браузеры поддерживают этот тип изображений. Возможное решение этой проблемы — плагины типа EWWW Image Optimizer, которые отображают WebP, если формат поддерживается браузером, и адаптируют изображения под другие форматы при необходимости.
• SVG — формат используется для логотипов и значков (самых мелких визуальных элементов на сайте). Это универсальный формат, но с ним могут быть определенные проблемы, например, в стилях шрифтов. Рекомендуют не использовать встраиваемые SVG (когда код изображения вставляется напрямую в HTML), чтобы Google было легче их индексировать. 
• GIF — тип контента, который может добавить привлекательности веб-странице, увеличить трафик и популярность контента в соцсетях. Поисковики сканируют файлы GIF так же, как другие графические файлы. Недостаток формата очевиден — обычно GIF весят очень много.

Важность сжатия изображений

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

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

На примере Optimizilla мы видим, как сервис для сжатия картинок позволяет настраивать качество и просматривать результат: 

Чем можно воспользоваться для того, чтобы оптимизировать (сжать) изображение

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

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

• Compressor.
  Простой и функциональный инструмент, работать с которым можно в режиме онлайн. Разобраться с его работой очень просто – необходимо только выбрать тип сжатия и картинку, и результате получить оптимизированное изображение с максимальным сжатием до 90%.
• ezGif.
  Сервис для работы с гифками, которые обрезать, оптимизировать, изменять параметры, делать их самостоятельно из видео, наносить надписи (ватермарки) и многое другое.
• Compresser Jpeg.
  Простой сервис с поддержкой русского языка и возможностью пакетной оптимизации изображений, но работает только с фалами jpeg и jpg.
• Imagify.
  Инструмент, при помощи которого можно оптимизировать все изображения сайта сразу. Его особенность – возможность интеграции с сайтами на WordPress.
• Tiny JPG/PNG.
  Этот сервис может одновременно сжимать до 20 картинок одновременно и очень быстро.

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

Как уменьшить вес картинки

Существует два способа:

1. Специализированный софт;
2. Онлайн сервисы.

Специализированный софт

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

Paint

Приложение встроено разработчиками в ОС Windows. Поэтому не нужно скачивать дополнительное ПО. Это простой и надежный инструмент. Если вы не занимаетесь профессиональной обработкой графических файлов, хватит возможностей Pain. Чтобы запустить программу, нажмите «Win+R», пропишите команду:
Рассмотрим его работу на примере фотографии размера 1,3 мегабайт.
Уменьшаем ширину и высоту Перейдите:
Уменьшите ширину и высоту. Посмотрите, как будет выглядеть изображение. В моем примере это:
Сохраните его.
Удаление лишних деталей Часто на фото есть ненужные (неинформативные элементы). Особенно по краям. Удалите их. Перейдите:
Выделите часть фото, которая останется. Все что за рамкой удалится.
Далее:
Сохраните готовый результат. Размер файла был 1,3 мегабайт. Стал 198,9 килобайт. При этом качество не изменилось.
Программа сохраняет изображение сжимая его в качестве на десять-двадцать процентов. Это незаметно для человеческого глаза.

FastStone Image Viewer

Вы задумывались, как уменьшить вес фото без изменения размера. Поможет FastStone. Программа бесплатна. Скачайте ее по адресу: https://www.faststone.org/FSIVDownload.htm. Откройте фото, выберите:
Перейдите:
Откроется окно, где посмотрите размер файла. Передвигая ползунок в пункте «Качество», не меняя размера установите значение не менее 60. Это зависит от фото. Посмотрите на скриншоте. Вес уменьшился с 1,3 мегабайта до 751 килобайт.
Меняем размер Перейдите:
Укажите ширину и высоту в пикселях.
Например, при установке значений 800Х500 получилось уменьшить вес картинки без потери качества до 152 килобайт.

IrfanView

Загрузите программу по адресу: https://www.irfanview.com/. После установки откройте файл в приложении, выберите:
Укажите степень сжатия. Рекомендую устанавливать не меньше 60. Остальные настройки не трогайте. Сохраните файл. Фото без изменения размера стало весить 553 килобайт.
Изменяем разрешение Перейдите:
Измените значения:
При установке 800Х500 размер без потери качества стал 52,8 килобайт

Как уменьшить вес картинки без потери качества в Фотошопе

Это программа для профессиональной работы с изображением. В нем качество сжатия будет наилучшее. Откройте файл фото в программе. Перейдите:
Переместите влево ползунок в пункте «Качество». Посмотрите, чтобы на изображении не было видимых отличий. Измените ширину и высоту фото в пикселях.
Изменив разрешение до 800Х500 вес картинки стал 66,12 без потери качества.

Уменьшаем вес картинки без потери качества онлайн

Не хотите устанавливать на ПК дополнительное ПО. Воспользуйтесь онлайн сервисами. Их преимущество: получение максимального сжатия без ухудшения качества, простота в использовании. Для работы нужен доступ в интернет. Рассмотрим лучшие площадки.

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

Все онлайн сервисы функционируют по принципу:

1. Загрузка изображений на площадку при помощи формы;
2. Установка нужных параметров.

Рассмотрим лучшие из них.

Optimizilla

Доступен по адресу: https://imagecompressor.com/ru/. Загрузите фото или перетащите его мышкой на форму:
Через 1-2 секунды произойдет его сжатие. В меню справа отрегулируйте качество перемещением ползунка. Сравните изображения.

Compressjpeg

Доступен по адресу: https://compressjpeg.com/ru/. Работает аналогично рассмотренному выше. Особенность — поддержка мультизагрузки. Добавьте для обработки одновременно двадцать файлов. Нажмите «Настройки», чтобы отрегулировать его вручную.
Готовый результат скачайте в архиве.

TinyJPG

Доступен по адресу: https://tinyjpg.com/. Загрузите файл на сервис. Работает с PNG форматом. После обработки нажмите «Download».

ImageOptim

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

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

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

Optimizilla

Особенности сервиса Optimizilla com:

• Загрузка до 20 изображений
• Хранение сжатого файла на сервисе в течение 1 часа

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

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

Как конвертировать изображения в WebP?

XnConvert

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

• Метаданные: редактирование
• Преобразования: поворот, обрезание, изменение размера
• Регулировки: яркость, контраст, насыщенность
• Фильтры: размытие, рельеф, резкость
• Эффекты: маски, водяные знаки, виньетирование (частичное затемнение)

Imageminimagemin-webp

Плагин WebP для Gulpзагрузчик WebP для WebPack

cwebp

jpeg-recompress

svgo

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

Другие приложения для обработки и редактирования WebP

• Leptonica — целый веб-сайт свободных приложений для обработки и анализа изображений.
• Sketch поддерживает сохранение в WebP.
• GIMP — бесплатная альтернатива Photoshop с открытым исходным кодом.
• ImageMagick — создание, компоновка, преобразование и редактирование растровой графики. Бесплатный, работает из командной строки.
• Pixelmator — коммерческий редактор изображений для Mac.
• Photoshop WebP Plugin — бесплатный плагин от Google. Импорт и экспорт изображений в Photoshop.

«Создание изображений WebP с помощью Android Studio»

Эксперимент: оптимизация изображений

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

Несжатые файлы JPG

Мы загрузили шесть несжатых файлов JPG на наш тестовый сайт. Размер каждого из них превышал 1 Мб. Общее время загрузки составило 1,55 секунды, а общий размер страницы -14,7 Мб.

Тест скорости передачи данных несжатых файлов JPG

Сжатые файлы JPG

Затем мы сжали файлы JPG с помощью WordPress-плагина Imagify, используя «агрессивные» установки. Взгляните на новые сжатые файлы JPG, которые все еще выглядят прекрасно. После этого мы провели пять тестов, используя Pingdom, и выбрали среднее значение. В результате общее время загрузки сократилось до 476 мс, а размер страницы уменьшился до 2,9 Мб. Общее время загрузки уменьшилось на 54,88%, а размер страницы — на 80,27%.

Тест на скорость передачи данных сжатых файлов JPG

Не существует никакой другой оптимизации сайта, которая позволила бы сократить время загрузки более чем на 50%

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

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

На самом деле это очень важный пункт, хоть он и на четвертой позиции. Все свои картинки вы изначално должны уменьшать. Не нужно «с дуру» загружать изображения с камеры Айфона, которые весят по 2 мегабайта. Представляете сколько усилий нужно, чтобы открыть все ваши картинки на одной странице, а если их десятки…Выводы напрашиваются сами собой. Так как же все-таки оптимизировать картинки, уменьшив их вес? Ответ просто. Используйте Фотошоп. Он для меня является настольной программой, которая всегда должна быть под рукой у каждого блоггера. Если вам не нужен весь функционал программы, дистрибутив которой весит порядка 700 мегабайт, можете воспользоваться «укороченной версией», именуемой portable.

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

Нажимаем Ок. Следующим шагом нам необходимо будет сохранить картинку для Web. Идем в файл и выбираем соответствующий пункт.

Далее мы должны выбрать формат для сохранения нашего изображения. Я рекомендую пользоваться либо png, либо jpeg. Если вы делаете скриншоты своих действий, то лучше будет сохранять в последнем варианте, так как картинка будет весить минимально при заданных значениях. Качество делайте около 40. В итоге у вас получится что-то наподобие вот этого:

При этом вес картинки будет очень маленьким, то что нам и нужно.

С этим моментом разобрались. Двигаемся дальше.

Не зацикливайтесь на seo по картинкам

Так как большинство вебмастеров понимает пользу ранжирования сайта по картинкам, то начинают максимально к каждой добавлять ключевые слова, которые не всегда могут правильно характеризовать само изображение. Что я имею ввиду? Допустим, вы публикуете медиафайл, на котором изображено заднее стекло автомобиля и ваш ключевой запрос к этой странице автосервис в Минске, к примеру. Так вот НЕ НУЖНО в мета тегах указывать «автосервис в Минске», а укажите такое – «замена задних стекол в Минске» это будет логично и грамотно. Поисковики не дураки и умеют распознавать накрутку от естественности. Так, что будьте более естественными при оптимизаций изображений на сайте.

Оптимизация изображений при помощи специальных программ

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

Данная программа очень простая, с минимумом настроек. Однако она не плохо справляется с процессом оптимизации.

1. 1.Для открытия изображения мы можем воспользоваться либо кнопкой «Open», либо же просто взять нужное нам изображение и перетащить его в окно программы.

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

3. 3.В левой части экрана мы видим оригинал нашего изображения, а также его вес. В правой части отображается уже оптимизированное изображение и его вес.
4. 4.В нижней части окна вы можете выбирать между тремя форматами: jpeg, png и gif.

5. 5.При помощи ползунка Quality вы можете изменять в процентах качество изображения. При этом результат вы будете видеть в правой части окна. Я обычно ставлю около 50%.

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

7. 7.После того, как вы выставили все необходимые параметры, кликаем на кнопку «Save». Программа предлагает нам заменить оригинальный файл. Если вас устраивает такой вариант, то выбираете «Yes» и изображение заменяется на уже оптимизированное, что так же очень удобно.

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

TinyPNG

Онлайн сервис TinyPNG служит для оптимизации (сжатия) изображений в форматах PNG и JPG. Сервис имеет две идентичные страницы по разным адресам: tinypng.com и tinyjpg.com.

Откройте страницу TinyPNG, перетащите в специальную форму изображения в форматах «.pnf» и «.jpg» (можно загрузить файлы обеих форматов одновременно) со своего компьютера.

Особенности онлайн сервиса TinyPNG:

• Поддержка форматов JPG и PNG.
• Загрузка на сервис до 20 изображений.
• Размер одного файла не более 5 MB.

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

При помощи ссылки «download» загрузите на компьютер готовое изображение. Обработанные изображения можно сохранить в облачное хранилище Dropbox (кнопка «Save to Dropbox»), или скачать на компьютер сразу все изображения (кнопка «Download all»). Сохраненные файлы имеют оригинальное название.

Я использую этот сервис для оптимизации изображений, которые я добавляю на свой сайт. Вначале я обрабатываю картинки в программе Photoshop: изменяю размер (соотношение сторон) изображений, оптимизирую для web, сохраняю файлы в форматах «.jpeg» и «.png».

Далее я дополнительно сжимаю изображения на сервисе TinyPNG (TinyJPG), затем скачиваю на компьютер изображения наиболее меньшего размера в форматах JPEG или PNG.

Важность уникальных изображений

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

Стоковые изображения

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

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

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

Инструменты для редактирования картинок

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

Также можно уникализировать стоковые изображения:

• Зеркально отразить. Одна из самых простых техник — зеркальное отражение картинки, но в большинстве случаев поисковик понимает, что это неуникальный контент. 
• Обрезать. Можно изменить композицию изображения, обрезав его. 
• Настроить уровень яркости и контрастности. Это можно сделать с помощью инструментов, которые автоматически определят нужный уровень, или настроить вручную в профессиональных программах вроде Photoshop.
• Добавить фильтры и эффекты. Множество инструментов предлагают фильтры и эффекты, которые помогут придать изображению другой вид.
• Удалить элементы. Можно удалить отдельные объекты с картинки или фото.

Защита от копирования

Если вы создали оригинальные иллюстрации и фотографии, вам стоит защитить их от неавторизованного использования. Чтобы предотвратить копирование картинок, нужно использовать специальные метаданные. Общепринятый стандарт для добавления данных о копирайте — IPTC Photo Standard.

Google предложил возможность добавлять сведения об авторстве в 2018-м и расширил количество полей для заполнения в 2020-м. С помощью PTC Photo Standard можно указать:

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

Google собирает эту информацию и показывает ее в результатах поиска. Например:

Картинки в поиске можно фильтровать по правам использования на те, которые имеют коммерческую лицензию (то есть использование которых можно купить), и те, которые можно использовать бесплатно, но не в коммерческих целях (лицензия Creative Commons)

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

Метаданные — самый лучший способ защитить контент от копирования. Опрос, проведенный Imatag в 2018 году, показал, что заполнение метаданных об авторском праве — самый популярный среди фотографов метод защиты своих работ. Но и он не дает 100-процентной гарантии — 48% опрошенных указали, что их работы были сворованы несмотря на метаданные.

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

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

Немного теории: позиции сайта/скорость/восприятие

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

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

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

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

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

Итак, мы исходя из рекомендаций PageSpeed Insights, Webpagetest, GTmetrix определили, что эти сервисы считают наиболее приемлемую степень сжатия исходного несжатого изображения равной 80%. Но тут есть несколько очень важных «но». Если вы работаете с изображениями, на которых много мелкой цветовой детализации, то степень сжатия лучше установить в 90%. А вот если изображения малоконтрастные и детализация неважна, то степень сжатия может быть установлена в пределах 70-60%. Все зависит от того, какую именно роль играют изображения в вашем материале.

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

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

Теория и практика: когда точно нужна оптимизация изображений

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

• Протестируйте 10-20 страниц вашего ресурса с помощью GTmetrix, найдите среднее значение «optimize images», чем оно меньше, тем хуже. Приемлемые значения: 100-90 баллов. Бывает так, что неоптимизированные изображения просто «топят» сайт на графиках Waterfall.
• Определите, сколько места на хостинге занимает ваш медиаконтент, вычислите соотношение объема изображений к свободному месту на хостинге. Если у вас изображения оптимизированы, то придется докупить место на хостинге, а если же изображения не сжаты, то вы сэкономите на хостинге.
• Посмотрите на возраст вашего ресурса, если он моложе года, и на GTmetrix значения «optimize images» меньше чем 80, то оптимизировать картинки нужно однозначно. И если поисковики сквозь пальцы смотрят на скорость загрузки страницы, то вашим пользователям будет приятно, когда ваш ресурс будет открываться быстрее. Как правило, после сжатия неоптимизированных изображений до 80% скорость загрузки сайта увеличивается в 2 раза и более.

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

Онлайн-сервис OptimiZilla

Как и предыдущий сервис OptimiZilla так же поддерживает пакетное сжатие изображений, когда вы загружаете не одно изображение, а несколько.

1. 1.Для загрузки картинки нажимаем на кнопку «Загрузить», выбираем нужное ту, которая нам нужна.
2. 2.Сразу же выполняется сжатие. Если мы прокрутим немножко ниже, то увидим здесь такое же окно предпросмотра, где в левой части отображается исходный файл, а в правой части оптимизированный. Можем его уменьшать или увеличивать, и так же изменять его качество.

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

Выводы

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

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

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

Просмотры:
3 490

Анастасия Осипенко

Анастасия — контент-маркетолог и редактор в SE Ranking, пишет про SEO, маркетинг и цифровые технологии. Кроме текстов для блога SE Ranking, Анастасия пишет музыку, а также любит старые фильмы и свою собаку.

Похожие записи:

Как составить утп Как составить техническое задание на закупку Магазины фикс прайс: режим работы Роботы в повседневной жизни человека Как сделать презентацию на компьютере в powerpoint, word: пошаговая инструкция с фото для «чайников» Класс оквэд 68 — операции с недвижимым имуществом