Разное

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

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



По данным HTTP Archive, средний размер веб-страницы — 2,4 Mb и 64% приходится на изображения. Вы все правильно поняли: средний размер изображений на веб-странице — 1,5 Mb.

Какой размер страниц на вашем сайте?

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

  • уменьшение общего размера страницы;
  • экономия трафика;
  • сокращение времени загрузки страницы и повышение SEO рейтинга.

Есть целый ряд способов оптимизировать изображения, но лучше это делать без ущерба для качества. В статье речь пойдет о трех видах инструментов.
  1. Самостоятельные инструменты: На сайте ничего устанавливать не нужно. Просто зайдите на страницу сервиса, загрузите изображения и получите оптимизированные изображения.
  2. Плагин WordPress: Установите плагин на ваш сайт на WordPress и, в зависимости от выбранных настроек, размер изображения будет сокращаться при загрузке на сайт.
  3. Расширение для Joomla: Установите расширение на ваш сайт на Joomla и изображения будут оптимизированы на вашем сервере с Joomla.

Вы готовы ускорить свой сайт?

Содержание

Список инструментов


Самостоятельные инструменты:
  1. Tiny PNG
  2. Compressor
  3. Puny PNG
  4. Compress Now
  5. Kraken
  6. Optimi Zilla
  7. JPEG Mini
  8. Imagify

Плагины WordPress:
  1. EWWW Image Optimizer
  2. WP Smush
  3. Optimus
  4. TinyPNG
  5. Short Pixel

Расширения для Joomla:
  1. Imgen
  2. Image Recycle
  3. EIR
  4. Prizm Image

Самостоятельные инструменты


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

1. Tiny PNG


Для уменьшения размера файлов PNG или JPG на TinyPNG используются методы сжатия с потерями. Можно загружать до 20 изображений, размер каждого из которых не может превышать 5 Mb.

2. Compressor


Compressor позволяет сжать изображения с уменьшением объема до 90% и при этом сохранить высокое разрешение. Он работает с JPEG, PNG, GIF и SVG-файлами. Ограничение по размеру — 10 Mb.

3. Puny PNG


PunyPNG подходит для дизайнеров и разработчиков. Не годится для работы, если размеры ваших изображений исчисляются мегабайтами: ограничение по размеру — 500 KB, по количеству файлов — 20 штук. Возможно сжатие JPG, GIF и PNG-файлов.

4. Compress Now


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

5. Kraken


При оптимизации Kraken позволяет вам выбирать между сжатием с потерями, без потерь и с возможностью самостоятельной настройки. Файл можно загрузить с компьютера, Dropbox, Google drive или Box.

6. Optimi Zilla


Загрузите до 20 JPEG или PNG-файлов на OptimiZilla. Если вы загружаете несколько файлов, то скачать их все можно одним архивом.

7. JPEG Mini


Избавьтесь от лишних килобайт с помощью JPEG Mini. Возможна обработка исключительно файлов JPG.

8. Imagify


Здесь можно выбрать из нескольких уровней сжатия: нормальным, агрессивным и ультра-сжатием. Файлы хранятся до 24 часов на Imagify, так что их можно скачать позже, если захотите.

Вышеуказанные самостоятельные инструменты помогут вам в уменьшении размера файлов. А теперь давайте рассмотрим плагины для WordPress.

Плагины WordPress:


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

1. EWWW Image Optimizer


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

2. WP Smush


Этот замечательный плагин от wpmudev установлен более 400 тысяч раз. Он позволяет сжимать изображения партиями или в момент загрузки на сайт. В бесплатной версии WP Smush позволяет обрабатывать до 50 изображений подряд. Плагин обрабатывает файлы в форматах JPEG, PNG и GIF.

3. Optimus


Optimus от KeyCDN помогает уменьшить изображения до 70%, но есть ограничение по размеру — 100 kB.
  • оптимизация исходных изображений;
  • оптимизация во время загрузки.

4. TinyPNG


Выполните сжатие файлов в формате JPEG и PNG с помощью TinyPNG. Именно этим инструментом пользуюсь я, и он меня всем устраивает.

5. Short Pixel


Short Pixel сжимает не только изображения, но и PDF. Инструмент совместим с WooCommerce и обрабатывает GIF, PNG, JPG и PDF-файлы.

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

Расширения для Joomla


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

1. Imgen


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

2. Image Recycle


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

3. EIR


Easy Image Resizer меняет разрешение загруженных изображений с помощью медиа-менеджера. EIR осуществляет сжатие на базе Optimus.io.

4. Prizm Image


Prize Image помогает удалить метаданные из JPEG, конвертировать прогрессивные JPEG в последовательные и наоборот, оптимизировать PNG и GIF без ущерба для качества. Для сжатия плагин использует Prizm Image API.

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

На HOSTING.cafe всегда можно сравнить предложения виртуальных серверов и хостинга.

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


В интернете достаточно статей и проектов для ресайза изображений. Почему же нужна еще одна? В этой статье я расскажу почему нас не удовлетворили текущие решения и пришлось пилить собственное.

Проблема


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

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

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

В качестве примера, как делать не нужно можно посмотреть на главную страницу такого известного сайта, как github.com. При весе страницы 2 Мб, 1.2 из них занимают бесполезные картинки, которые можно оптимизировать и не загружать.

Второй пример — наш Хабр. Скриншот приводить не буду, что бы не растягивать статью, результаты по ссылке. На хабре картинкам изменяют разрешение на нужное, но не оптимизируют их. Это позволило бы сократить их размер на 650 Кб (50%).

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

Распространенные решения


Все, что будет сказано далее относится к JPEG и PNG изображениям, т.к. это наиболее популярные форматы в интернете.

Вбив в google что-то вроде «image resize backend» вы увидите, что в половине случаев предлагается использовать Nginx, другая часть— это различные самописные сервисы, чаще всего Node.js.

Из nginx, а точнее из libgd, которая используется в модуле nginx’а мы смогли выжать на тестовой картинке 63 RPS, что неплохо, но хотелось бы быстрее и больше гибкости. Graphicsmagick тоже не подходит, т.к. его скорость работы слишком низкая. К тому же оба эти решения выдают не оптимизированные изображения. Большинство других решений, например на Node предлагают использовать Sharp для ресайза, MozJPEG для оптимизации JPEG изображений и pngquant для оптимизации PNG.

Мы и сами достаточно долгое время пользовались самописной связкой из Nod’ы, Libvips и MozJPEG c pngquant, но в один из дней задались вопросом— «А можно ли сделать ресайз быстрее и менее требовательным к ресурсам?».

Спойлер: можно. 😉

Теперь хорошо бы выяснить, как можно ускорить наше приложение. Изучив код приложения мы выяснили, что imagemin, который использовался для оптимизации, а в частности его плагины MozJPEG и pngquant при работе дергают одноименные утилиты через os.Exec. Будем это дело однозначно выпиливать и использовать только биндинги к Cи’шным либам. Для ресайза использовался модуль Sharp, который представляет собой биндинг к С библиотеке Libvips.

Наша реализация


Гуглеж показал, что Libvips по прежнему лидер по скорости и конкурировать с ним может только OpenCV. Значит будем использовать Libvips и в нашей реализации, это уже проверенное решение и он имеет готовый биндинг для Go. Пора попробовать написать прототип и посмотреть что из этого выйдет.

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

Быстро написали прототип, протестировали и поняли, что несмотря на большее, чем в Sharp, количество внутренних крутилок, Libvips по-прежнему выдает на выход не оптимизированные изображения. С этим надо что-то делать. Опять обращаемся ко всемогущему гуглу и узнаем, что лучший вариант это по-прежнему MozJPEG. Тут начинают закрадываться сомнения, что мы сейчас напишем то же самое, что было на Node, только на Go. Но внимательно почитав описание MoZJPEG узнаем, что она является форком libjpeg-turbo и совместима с ней.

Выглядит очень многообещающе. Дело за малым — собрать свою версию Libvips, в которой jpeg-turbo заменен на версию от Mozila. Для сборки мы выбрали Alpine Linux, т.к. приложение все равно планировалось публиковать с помощью Докера и Alpine имеет очень приятный формат конфига пакета, очень похожий на используемый в Arch Linux.

Оптимизация картинки уменьшила ее размер в 4 раза без видимой потери качества.
Оригинальный JPEG
351×527
79 Кб
Оптимизированный
351×527
17 Кб

Собрали, протестировали. Теперь Libvips сразу при ресайзе выдает оптимизированную версию. То есть в Node версии версии мы сначала делали ресайз, а потом еще раз пропускали картинку через decoder-encoder. Теперь мы только делаем ресайз.

С JPEG разобрались, а что делать с png. Для решения этой задачи была найдена библиотека libpngquant. Она не очень популярная, несмотря на то, что консольная утилита pngquant, которая базируется на ней, используется во многих решениях. Так же к ней был найден биндинг на Go, немного заброшенный и с утечкой памяти, пришлось его форкнуть починить, дополнить документацией и всем остальным, что подобает приличному проекту. Libpngquant мы тоже собрали в виде Alpine пакета для простой установки.

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

Разница в размере в 3 раза, но возможно появление артефактов (зависит от картинки).
Оригинальный PNG
450×300
200 Кб
Оптимизированный
450×300
61 Кб

Пример не очень удачной картинки, на которой появляются артефакты при сжатии.
Оригинальный PNG
351×527
270 Кб
Оптимизированный
351×527
40 Кб

После того, как прототип был написан, протестирован на моем пк и выдавал приличные 25 RPS на мобильном двух ядерном проце, сжирая весь CPU, захотелось увидеть сколько можно выжать из него на нормальном железе. Запускаем код на шести ядерной машине, натравливаем Jmeter и WTF??? Получаем 30 RPS. Пробуем разобраться что за фигня.

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

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

Все более или менее современные ядра Linux (3.9+ и 2.6.32-417+ в CentOS 6) поддерживают опцию SO_REUSE, которая позволяет использовать один порт нескольким экземплярам приложения. Данный подход удобнее, чем балансировка средствами стороннего ПО, такого как HAProxy, т.к. не требует конфигурации и позволяет быстро добавлять и убирать инстансы.
Поэтому мы использовали SO_REUSE и опцию «—scale» в Docker compose, которая позволяет указать количество запускаемых экземпляров.

Время мерить


Пришло время оценить результат наших трудов.

Конфигурация:

  • CPU: Intel Xeon E5-1650 v3 @ 3.50GHz 6 cores (12 vCPU)
  • RAM: 64 Gb (используется около 1-2 Gb)
  • Кол-во воркеров: 12

Результаты:

Больше бенчмарков (правда без сравнения с Node версией) на wiki странице.
Как видно переделывали ресайз мы не напрасно, увеличение скорости составило от 30 до 400% (в некоторых случаях). Если требуется ресайзить еще быстрее, то можно покрутить ручки «speed» и «quality» в libimagequant. Они позволят дополнительно сократить размер или увеличить скорость кодирования ценой потери качества изображения.

Код проекта на GitHub.
Биндинг Go к libimagequant так же на GitHub.

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

Зачем необходимо оптимизировать изображения для сайта? Как это повлияет на скорость работы ресурса? Поможет ли это в продвижении проекта? Об этом и многом другом поговорим в данной статье. Привет, друзья! С вами Юрий Бошников! Не стоит думать, что процесс оптимизации картинок для сайта – маловажный этап в продвижении сайта. На самом деле пренебрегая данным направлением, владельцы сайтов провоцируют негативное отношение поисковых роботов к контенту, размещенному на ресурсе. Ведь картинки также принимают участие в поиске! Если они не оптимизированы, не подписаны, слишком тяжелые, все это негативно отражается на позиции проекта в поисковых системах.

Содержание статьи:

(смотрите видео: это самый наглядный разбор с примерами)

Ищем картинки для сайта: где их брать и какими они должны быть

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

  • релевантность публикуемой статье;
  • уникальность;
  • «легкость».

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

Уникальность картинки столь же важна, как и уникальность текста. Если есть возможность самостоятельно создавать картинки, фотографии – отлично! Тогда с уникальностью проблем не возникнет.

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

Где брать картинки? Первый способ:

  • ввести нужный запрос в поисковой системе Гугл;
  • перейти в раздел «Картинки»;
  • под поисковой строкой кликнуть на «Настройки»;
  • кликнуть по надписи «Лицензия»;
  • выбрать раздел с «Лицензией на использование».

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

  • Shutterstock;
  • iStockphoto;
  • Dreamstime;
  • BigStock.

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

  • StockSnap;
  • Pexels;
  • Unsplash;
  • Death to the Stock Photo.

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

Процесс оптимизации занимает некоторое время. Предполагает несколько этапов. Но все эти действия – простые. Пусть вас не пугает объем текста. Ознакомившись с ним и немного набив руку, на каждую картинку вы будете тратить не более 3-5 минут.

Добиваемся уникальности

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

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

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

Совет! Нанесение изображения на картинку не делает ее уникальной.

Уменьшение «веса»

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

Обратите внимание! Скорость загрузки оказывает непосредственное воздействие на позиции проекта в поисковой выдаче.

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

Открываете изображение в редакторе – фотошопе. Нажимаете сочетание клавиш Ctrl+I, открывается новое окно и вводите нужные вам параметры. Картинка автоматически сжимается до введенных размеров.

Совет! Первый раз убедитесь, что в качестве «системы измерения» установлены пиксели. При нажатии клавиш Ctrl+I и открытии нового окна вы увидите, где меняются параметры.

Теперь картинка стала меньшего размера. Но ее вес можно еще больше уменьшить, не потеряв качества. Зажмите следующее сочетание клавиш: Ctrl+Shift+Alt+S. Откроется окно сохранения картинок для веба. Верхнем правом углу поставьте качество картинки 60%. Сохраните изображение. Теперь оно будет максимально легким, но не потеряет свое качество.

Обратите внимание! Первый этап можно пропустить. Сразу сохраняя картинку для веб, в открывшемся окне в нижней его части будет поле ввода размера изображения. Установите там нужные параметры, проверьте качество (60%) и сохраняйте.

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

Формат картинки

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

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

Кстати! Еще немного о том, как  оптимизировать изображения для сайта онлайн. Среди наиболее популярных и отлично работающих сервисов выделяются gtmetrix.com, developers.google.com. Именно их я рекомендую на своем онлайн-тренинге «Как сделать сайт своими руками». Кстати, обучение бесплатное и построено на практических заданиях. Спустя четыре дня каждый студент уже имеет свой работающий, оформленный и наполненный контентом сайт.

Оформление изображения

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

Там будет доступна опция редактирования. Кликнув по соответствующей кнопке, откроются свойства картинки. В зависимости от редактора и административной панели, для изменения представлены следующие параметры:

  • размеры;
  • положение на странице;
  • отступы от текста;
  • и, возможно, некоторые другие.

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

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

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

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

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

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

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

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

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

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

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

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

Читайте также: Контент стратегия: 12 шагов к ее созданию

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

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

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

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

Кстати! Обязательно проверьте файл robots.txt. Возможно, в нем будет стоять запрет на индексацию картинок. Уберите его!

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

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

  • поиск релевантной тематике статьи картинки;
  • прописывание соответствующего имени/названия;
  • уменьшение размера и веса;
  • прописывание тегов Alt и Title, написание подписи, если это необходимо;
  • публикация на странице – выбор параметров отображения, отступа текста;
  • проверка файла robots.txt.

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

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

Если у вас что-то не будет получаться, служба поддержки тренинга оперативно отреагирует на вопросы. Поможет решить любую проблему. От вас – только желание и присутствие на обучении. Оно проводится по вечерам, в удобное время.

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

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

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

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

Согласно HTTP Archive, изображения занимают в среднем 21% от общего размера веб-страницы. Процесс оптимизации изображений является самым простым способом повышения производительности сайта. Но при этом большинство владельцев пренебрегают им.

Среднее количество байт на страницу (кБ)

 

Преимущества оптимизации графического контента:

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

 

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

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

  • PNG– этот формат позволяет получать изображения высокого качества, но при этом размер файла остается большим.
  • JPEG– использует оптимизацию с потерями и без потерь качества. Вы можете регулировать уровень качества, чтобы достичь наиболее подходящего баланса.
  • GIF – формат поддерживает всего 256 цветов. Это лучшее решение для анимированных изображений. Он использует только сжатие без потерь.

Есть еще несколько форматов, таких как JPEG XR и WebP. Но не все они поддерживаются браузерами. Поэтому лучше использовать JPEG (или JPG) для полноцветных изображений и PNG для простых картинок.

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

Примечание: Объем оригинального изображения составляет 2,06 Мб.

Низкая степень сжатия (высокое качество) JPG – 590 Кб

Высокая степень сжатия (низкое качество) JPG – 68 Кб

Размер первого изображения составляет 590 Кб. Это довольно много для одной фотографии. Второе изображение выглядит ужасно, но при этом весит всего 68 Кб.

Применим к изображению среднюю степень сжатия. В результате мы получили хорошее качество при размере файла в 151 Кб. Это почти в четыре раза меньше размера оригинальной фотографии. Для обеспечения наилучшей производительности сайта изображения в формате PNG не должны весить более 100 Кб.

Средняя степень сжатия (отличное качество) JPG – 151 Кб

Оптимизация с потерями – это «фильтр», который убирает некоторые данные и ухудшает качество изображения. Но при этом размер файла изображения существенно уменьшается. Для этого можно использовать такие программы как Adobe Photoshop, Affinity Photo или любой другой графический редактор.

Оптимизация без потерь качества – сжатие данных без снижения качества изображения. Выполнить сжатие без потери качества можно с помощью Photoshop, FileOptimizer или ImageOptim.

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

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

Сжатие фотографии в Affinity Photo

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

  • Gimp
  • Paint.NET
  • GIFsicle
  • JPEGtran
  • JPEG Mini
  • OptiPNG
  • pngquant
  • FileOptimizer
  • ImageOptim
  • ImageResize.org

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

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

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

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

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

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

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

Плагин Imagify для оптимизации изображений

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

Изменение размера файлов в Imagify

Плагин ShortPixel

Бесплатный плагин ShortPixel Image Optimizer позволяет сжимать 100 изображений в месяц. Он работает с множеством форматов, включая PNG, JPG, GIF, WebP и даже PDF. Он выполняет сжатие изображений с потерями и без потерь. Плагин конвертирует цветовую модель CMYK в RGB. При оптимизации создается резервная копия оригинальных файлов, что позволяет при желании восстановить их вручную. Данный плагин также поддерживает массовую конвертацию файлов.

Плагин Optimole

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

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

EWWW Image Optimizer Cloud- облачный плагин для оптимизации изображений

Плагин EWWW Image Optimizer Cloud оптимизирует изображения и повышает скорость работы сайта. Пользователи EWWW IO могут использовать функцию Bulk Optimizer («массовый оптимизатор»), предназначенную для сжатия имеющихся изображений.

Плагин EWWW IO позволяет конвертировать изображения в форматы нового поколения, такие как WebP или подобрать наилучший формат для изображения. Стоимость сжатия начинается от 0,003 доллара за изображение.

Функция ExactDN позволяет выполнять автоматическое сжатие (без необходимости сжатия на сервере), автоматическое изменение размера и обладает всеми  преимуществами CDN.

Плагин Optimus Image Optimizer

Плагин Optimus WordPress Image Optimizer использует сжатие без потерь. Он поддерживает WooCoomerce и мультисайты, а также включает в себя функцию массовой оптимизации. Плагин также совместим с плагином WP Retina. Если вы совместите плагин Optimus Image Optimizer  с плагином Cache Enabler, то сможете работать с изображениями, сохраненными в формате WebP.

Плагин WP Smush

Плагин WP Smush  сканирует изображения и сжимает их по мере их загрузки на сайт. Он также находит и оптимизирует уже сохраненные рисунки. Он позволяет осуществлять массовое сжатие (до 50 файлов за раз). Плагин поддерживает форматы JPEG, GIF и PNG. Размер исходных файлов ограничен 1 Мб.

  • Плагин совместим с WP All Import и WPML.
  • Оптимизация изображений выполняется с помощью сжатия без потерь.
  • У Smush есть функция автоматической установки ширины и высоты для всех изображений.

Плагин TinyPNG

Плагин TinyPNG использует сервисы TinyJPG и TinyPNG для оптимизации изображений в форматах JPG и PNG. Для экономии места плагин конвертирует CMYK в RBG. Он сжимает файлы JPEG до 60%, а файлы PNG до 80% без видимой потери качества изображения. У него нет ограничений на размер обрабатываемого файла.

ImageRecycle- плагин для оптимизации изображений и PDF-файлов

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

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

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

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

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

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

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

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

  • Файлы SVG автоматически масштабируются во всех браузерах и графических редакторах.
  • Google индексирует файлы SVG так же, как и PNG и JPG, поэтому вам не нужно беспокоиться о SEO.
  • SVG-файлы отличаются меньшим размером по сравнению PNG или JPG. Это положительно сказывается на скорости загрузки.

Файл JPG (оптимизированный размер: 81,4 Кб)

Изображение JPG

Файл PNG (оптимизированный размер: 85,1 Кб)

Изображение PNG

Файл SVG (оптимизированный размер: 6.1 Кб)

Изображение SVG

Как показано выше, SVG- файл уменьшается в размере на 92,51% по сравнению с файлом в формате JPG. А при сравнении с файлом в формате PNG – на 92,83%.

  • Используйте WordPress-плагины, которые сжимают и оптимизируют изображения на внешних серверах. Это снижает нагрузку на ваш собственный сайт.
  • Используйте векторные изображения, где это только возможно.
  • Используйте CDN для быстрого предоставления изображений посетителям со всего мира.
  • Используйте эффекты CSS3 как можно чаще.
  • Сохраняйте изображения в подходящем разрешении. При этом помните, что WordPress поддерживает адаптивные изображения для их предоставления без изменения размера с помощью CSS.
  • Используйте веб-шрифты вместо текста внутри изображений – они выглядят лучше при масштабировании и занимают меньше места.
  • Уменьшайте глубину цвета для использования меньшей цветовой палитры.
  • Используйте сжатие с потерей качества, где только возможно.
  • Экспериментируйте для поиска наилучших установок для каждого формата.
  • Используйте GIF, если вам нужна анимация.
  • Используйте формат PNG, если вам требуется высокая детализация и разрешение.
  • Используйте формат JPG для фотографий общего вида и скриншотов.
  • Автоматизируйте процесс оптимизации изображений.
  • Используйте формат WebP в Google Chrome для отображения изображений меньшего размера.

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

Данная публикация представляет собой перевод статьи «How to Optimize Images for Web and Performance» , подготовленной дружной командой проекта Интернет-технологии.ру

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

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

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

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

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

Качество, уникальность и релевантность

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

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

Размытые некачественные фото оттолкнут пользователей и могут ухудшить рейтинг в поисковых системах

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

Неуникальные изображения лучше всего скачивать с фотостоков. Фотографии, разрешенные для коммерческого использования, можно бесплатно скачать на Unsplash, Pexels, Pixabay и других ресурсах. Если нужных вам картинок не нашлось, можно приобрести фото на платных стоках: самый популярный – Shutterstock.

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

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

Несмотря на все манипуляции, каждую обработанную картинку стоит проверять на уникальность в поиске. На решение поисковика могут влиять разные факторы: возможно, в вашем коллаже слишком много места занимает одно фото, а обработка недостаточно изменила оригинал. Впрочем, если совместить 3-4 фото в равных пропорциях, можно рассчитывать, что Google и Яндекс будут благосклонны.

Вот, например, баннер, сделанный путем комбинации нескольких фотографий с подложкой и текстом

Как видите, Google этой работой вполне доволен

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

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

Оптимальный размер и формат

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

Как определить, что скорость загрузки страницы слишком низкая? Для этого можно воспользоваться онлайн-инструментами: например, GTMertix.

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

Рекомендуется ставить разрешение не менее 72 точек на дюйм

Также уменьшать картинки вы можете в онлайне – например, с помощью сервиса Optimizilla или Compressor.

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

Самые популярные форматы, которые используют на современных сайтах – jpeg, png, gif и svg. Давайте посмотрим на их различия:

  • Формат jpeg дает хорошее качество при минимальном размере файла. Он рекомендован для размещения детализированных и больших изображений, хорошо подходит для карточек товаров в интернет-магазинах.
  • Png имеет уникальную особенность – сохранение прозрачности. Используйте такие изображения, если вам нужен просвечивающийся фон.
  • Svg – это веб-формат, который подходит для иконок или логотипа на сайте.
  • Gif – это формат, поддерживающий анимацию. Стоит учитывать, что именно анимированные файлы зачастую имеют большой вес и замедляют загрузку. Поэтому использовать их стоит только при необходимости, и по возможности максимально сжимать.

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

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

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

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

Имя, ключевые слова и атрибуты

Текст, сопровождающий изображение, тоже важен для ранжирования. Прежде всего, это имя файла: оно должно быть релевантным и понятным. Например, «1234.jpeg» – это плохое имя. A «cup-porcelain-white.jpeg» – хорошее, если вы размещаете фото белой фарфоровой чашки. В имени важно кратко и понятно описать, что у вас изображено. Так поисковик сможет правильно проиндексировать файл и выводить вашу картинку под соответствующие запросы пользователей.

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

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

Атрибут Title – это краткое текстовое название изображения. Его пользователь сможет увидеть, когда наведет курсор на картинку. Согласно исследованию «Ашманов и партнеры», поисковые системы не учитывают этот атрибут. Но не стоит о нем забывать – ведь в будущем алгоритмы ранжирования могут измениться.

Подытожим

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

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

Оптимизация изображений | Продвижение картинок в Google и Яндекс

Как работает поиск по картинкам

В органическом поиске:

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

Как это выглядит:

В Гугл

В Яндексе:

В поиске по картинкам:

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

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

Результаты поисковой выдачи в Гугл.Картинки:

Продвижение картинокПродвижение картинок

Результаты поисковой выдачи в Яндекс.Картинки:

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

Продвижение картинок и фото Продвижение картинок и фото

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

7+ превосходных инструментов для оптимизации изображений / Хабр
Перевод статьи 8 Excellent Tools for Optimizing Your Images
К сожалению на момент перевода один из сервисов перестал работать. Но хабровчане предложили еще много хороших решений!

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

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

1. Smush.it!

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

2.RIOT

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

3.PNGOUT

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

К pngout можно добавить ключик /zl121 для совместимости со старыми парсерами png.
Чтобы перепаковать jar можно использовать kzip с тем же ключом /zl121.

И pngout, и kzip написал Ken Silverman.

4.Online Image Optimizer

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

5.SuperGIF

SuperGIF это бесплатная утилита для Windows и Mac OS, которая помогает оптимизировать GIF. Имеет интуитивно понятный и простой пользовательский интерфейс, может сжимать GIF на 50% и больше. В бесплатной версии можно оптимизировать одновременно только одно изображение, но в остальном имеет те же функции, что и коммерческая версия ($ 29,95), за исключением пакетной обработки.

6.PNGGauntlet

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

7.SuperPNG

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

P.S. А теперь — то, что посоветовали хабровчане.

8.Pngcrush (спасибо UUSER)

Картинки нет, так как данный плагин работает из командной строки. Работает в UNIX, LINUX а также в MS-DOS.
Оптимизирует PNG. Использует различные методы сжатия, может удалять нежелательные вспомогательные блоки.
Pngcrush имеет открытый исходный код.

9.OptiPNG (спасибо Razunter)

OptiPNG — как и следует из названия, оптимизатор PNG. Эта программа также преобразует другие форматы (BMP, GIF, PNM и TIFF) в оптимизированный PNG, и выполняет проверку целостности и исправлений.
Имеет открытый исходный код, распространяется по zlib/libpng лицензии.

10.punypng (спасибо Razunter)

Веб- сервис по сжатию PNG, JPEG и GIF.
Из последних обновлений:
Предпросмотр качества итогового изображения.
Удаление вашего изображения с сервера после 15 мин. после конвертации.
Поддержка прозрачности.

11.ImageOptim (спасибо Conquearse)

Приложение для Mac-OC. Обрабатывает PNG, JPEG и GIF анимацию.
ImageOptim сочетает в себе различные инструменты оптимизации: AdvPNG от AdvanceCOMP, OptiPNG, Pngcrush, JpegOptim, jpegtran от Libjpeg, Gifsicle и опционально PNGOUT.
Открытый исходный код на условиях GPLv2.
Поддерживает удобный drag’n’drop изображений в свое окно.

12. pngre (спасибо homm)

Оптимизатор графики в формате PNG. Также конвертирует GIF и BMP в PNG.
Позволяет тонко вручную или автоматически настроить размер PNG файла.

13. pngquant (спасибо homm)

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

14. PictureBeaver (спасибо Carl_Linnaeus)
Пример оптимизации:

Автор — Артем Сапегин
PictureBeaver автоматически оптимизирует веб-графику (в форматах PNG, GIF и JPEG), удаляя из файлов вспомогательные данные, которые не влияют на отображение. Обычно удаётся добиться сокращения объёма файлов на 10—30%.
GIF без анимации переводится в PNG, если такие файлы выходят меньше. Для оптимизации используются бесплатные утилиты OptiPNG, jpegtran и Gifsicle.

15. Color quantizer (спасибо Subdivision)

Color quantizer — это небольшая программа позволяющая легко оптимизировать изображения для web.
Основные возможности:

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

16. Gifsicle (спасибо AndrewTishkin)

Это — инструмент для GIF-ок. В основном — для разных UNIX. Портирована и под Win, но эта версия не поддерживается.
Gара примеров:
Обрезаем прозрачные рамки:
gifsicle —crop-transparency src.gif > dest.gif

Сжимаем анимированный (простой тоже можно… на несколько байт 🙂 GIF:
gifsicle -O2 src.gif > dest.gif

17. jpegtran (спасибо AndrewTishkin)

А это — для JPEG. Официальная программа от Independent JPEG Group.

18. Webify (Спасибо zeka)

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

19. PngOptimizer (Спасибо Enot_23)

Очень удобный оптимайзер для Windows.
Ужимает PNG, конвертит в PNG из BMP, GIF, TGA. Позволяет делать PNG-скриншоты.

20. TweakPNG (Cпасибо stalkers)

TweakPNG это низкоуровневая утилита для изучения и изменения PNG файлов й. Для Windows 2000 или выше. Для того, чтобы использовать его, вам нужно хоть немного разбираться в формате PNG.
По словамstalkers здорово помогает с PNG, сохраненным в Photoshop CS2. Дело в том, что версии фотошопа ниже CS3 добавляют всякую фигню в файл, в т.ч. и данные о затемнении. В результате — в ИЕ картинка выглядит темнее, чем в других браузерах, т.к. все другие читали только непосредственно картинку.

С помощью утилиты это можно просто удалить. Еще можно выкинуть комментарии типа «edited in Adobe Photshop». Помимо избавления от глюков, получим также небольшой выигрыш в размере.

Free Image Optimizer — Сжатие и изменение размера фотографий

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

Оптимизировать сейчас

оптимизация

Качественный:

—Выбрать— Минимальный размер файла Очень маленький размер файла Маленький размер файла Нормальный Высокое качество Лучшее качество *

Скачать бесплатно!

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

Зачем мне скачивать?

  • Это супер быстро!
  • Сжатие изображений навалом!
  • Это абсолютно бесплатно!
  • Больше причин…

от создателей Image Optimizer

Выучить больше

,

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

Удачная стратегия поиска

Эта статья была первоначально опубликована 5 сентября 2013 г. и обновлена ​​18 октября 2019 г.

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

Руководство по оптимизации изображений

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

Давайте начнем!

How to Optimize Images for SEO GoDaddy Video How to Optimize Images for SEO GoDaddy Video

Почему изображения имеют значение

Camera lens represents strong web image Camera lens represents strong web image

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

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

Изображения усиливают содержание

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

Подумайте о том, сколько времени понадобится, чтобы прочитать короткий резкий абзац. Не долго, правда? Однако изображения могут обрабатываться за 13 миллисекунд — в 60000 раз быстрее, чем один текст.

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

изображений улучшают удержание контента

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

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

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

изображений передают ваш бренд

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

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

Эта способность ассоциироваться с брендом без использования текста невероятно мощна.

Связанные: Как создать свой бренд в социальных сетях

Картинки привлекают трафик на ваш сайт

Поиск изображений представляет 27% всех запросов, сгенерированных в 10 самых популярных веб-поисковых системах США. Кроме того, значительно увеличилось число посещений веб-сайтов с помощью поиска изображений, поскольку Google обновила свою кнопку «Просмотр изображения» с поиска изображений до «Посетить [страницу]».

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

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

Вернуться к началу

Что такое оптимизация изображения?

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

Вернуться к началу

7 шагов по оптимизации изображений для Интернета

Optimize Images For Web Picture Search Optimize Images For Web Picture Search

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

Итак, давайте изменим это с помощью семи шагов:

  1. Выберите правильные изображения.
  2. Внимательно рассмотрите текст, связанный с вашими изображениями.
  3. Настройка размера и формата изображения.
  4. Рассмотрим ленивую загрузку.
  5. Включить кэширование в браузере.
  6. Не забудьте метаданные изображения.
  7. Создать карту сайта с изображением.

1. Выберите правильные изображения

Поисковые системы

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

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

Не добавляйте изображения в сообщение ради изображений.

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

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

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

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

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

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

Знание и применение лучших практик при фотографировании ваших продуктов может сыграть решающую роль в долгосрочной перспективе.

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

Фотографии являются опцией

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

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

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

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

Связанный: Как использовать фотографию 8 различных способов

Признавая факты

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

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

Вернуться к началу

2. Внимательно рассмотрите текст, связанный с вашими изображениями

Brainstorming On A Notepad For Image Text Brainstorming On A Notepad For Image Text

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

Не поддавайтесь искушению пропустить заполнение этих текстовых деталей.

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

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

Имея это в виду, давайте разберемся с этим.

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

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

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

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

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

Изображение альтернативного текста

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

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

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

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

Связанные: Как провести SEO исследование ключевых слов, чтобы привлечь трафик на ваш сайт

Заголовок изображения

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

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

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

Описание изображения

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

Вернуться к началу

3. Отрегулируйте размер и формат изображения

Optimize Images For Web Editing Pictures Optimize Images For Web Editing Pictures

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

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

Изменить размер изображений

Средний веб-сайт содержит около 1,8 МБ изображений, что составляет 60% от размера сайта. Хотя важно размещать на своем сайте высококачественные фотографии с высоким разрешением, они часто могут приводить к снижению скорости загрузки страниц.

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

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

Когда дело доходит до онлайн-доступа, скорость — это почти все.

Например, Amazon обнаружил, что задержка загрузки сайта в одну секунду может стоить им 1,6 миллиарда долларов в год.

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

Важно отметить, что изображение размером и файл размером — это две разные вещи.

Размер изображения относится к размерам изображения (т. Е. 1024 x 680 пикселей), а размер файла — это объем пространства, необходимого для его хранения на сервере (т. Е. 350 КБ).

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

Связанные: 10 лучших практик для редактирования изображений

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

Woman Choosing Direction To Go Woman Choosing Direction To Go

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

Наиболее распространенными типами файлов веб-изображений являются JPEG, GIF и PNG.

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

JPEG
Объединенная группа экспертов по фотографии

, более известная как JPG / JPEG, является одним из старейших типов файлов.

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

GIF
Формат обмена изображениями

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

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

PNG
Портативная сетевая графика

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

Выберите правильную степень сжатия

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

Если вы слишком сильно сжимаете изображение, вы уменьшаете не только размер файла, но и качество.

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

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

  • Imageoptim: 69% (JPEG) против 40% (PNG)
  • Shortpixel: 42% (JPEG) против 59% (PNG)
  • Kraken.io: 13% (JPEG) против 63% (PNG)
  • TinyPNG: 27% (JPEG) против 65% (PNG)
  • Optimizilla: 27 (JPEG) против 60% (PNG)
  • Imagify.io: 6% (JPEG) против 1% (PNG)
  • Compressor.io: 42% (JPEG) против 58% (PNG)

Интересно отметить, что насколько Imageoptim был пригоден для JPEG, это было ужасно для PNG.Итак, в целом, Shortpixel — ваш лучший выбор. Вы также можете сжать изображения с помощью плагина, такого как Smush, или инструмента оптимизации изображений, такого как Pixlr (JPEG) или GIMP.

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

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

Связанные: 5 обязательных трюков Photoshop для начинающих

Другие советы по работе с файлами изображений большого размера

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

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

Вернуться к началу

4. Рассмотрим ленивую загрузку

Ленивая загрузка — это когда браузер откладывает загрузку изображений до тех пор, пока они не будут отображаться на экране. Это означает, что изображения, расположенные ниже на веб-сайте (ниже сгиба), не будут загружаться, пока пользователь не перейдет на эту часть веб-сайта.

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

Несмотря на то, что продолжаются дебаты о последствиях ленивой загрузки для SEO, инструмент Google PageSpeed ​​Insights рекомендует сделать это — и Google отвечает за всю игру.

Есть несколько способов реализовать отложенную загрузку. Однако большинство из них связаны с ручным кодированием. Тем не менее, если вы используете WordPress, плагин A3 Lazy Load настоятельно рекомендуется командой Ahrefs.

Optimize Images For Web A3 Lazy Load Optimize Images For Web A3 Lazy Load Изображение: A3 Lazy Load Plugin

Вернуться к началу

5.Включить кеширование браузера

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

Вы также можете включить кэширование в браузере вручную, добавив этот код в ваш файл .htaccess:

 
ExpiresActive On
# Изображений
ExpiresByType image / jpg "Доступ 1 год"
ExpiresByType image / jpeg "Доступ 1 год"
ExpiresByType image / gif "Доступ 1 год"
ExpiresByType image / png "Доступ 1 год"
 

Измените «1 год» в коде для любого периода времени, который вам подходит (спросите себя, как часто вы обновляете контент), например «1 месяц» или «1 неделя».

Вернуться к началу

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

Метаданные

могут составлять до 15% от общего размера изображения JPEG.

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

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

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

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

Связанные: структурированные данные — кто, что и почему использует схему

Вернуться к началу

7.Создать изображение карта сайта

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

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

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

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

Optimize Images For Web Image Sitemaps Search Console Help Optimize Images For Web Image Sitemaps Search Console Help Изображение: Справка консоли поиска файлов Sitemap для изображений

Похожие: 12 лучших инструментов SEO, которые помогут вашему сайту появиться в результатах поиска

Вернуться к началу

Заключение и последующие шаги

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

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

Если вы устали от оптимизации изображений для SEO, GoDaddy SEO Services окажет вам поддержку.Свяжитесь с SEO-специалистами GoDaddy сегодня, чтобы узнать, как именно они могут помочь!

Эта статья включает в себя материалы, первоначально опубликованные в блоге GoDaddy следующими авторами: Кристофером Амблером, Женевьевой Туенге и Томом Эвером.

,
Как оптимизировать изображения для Интернета? БЕСПЛАТНО (92%, но без потерь!)

Как оптимизировать изображения для вашего веб-сайта или WordPress или загружать их в любом месте онлайн? Вы ищете лучшие бесплатные способы оптимизации ваших изображений без потери качества при загрузке вашего сайта? Тогда вы попали в нужное место! Я думаю, у вас никогда не было лучшего программного обеспечения или метода для оптимизации изображений без потерь. В этом посте мы опубликовали 4 бесплатных лучших метода. Вы можете уменьшить размер изображения до 92% ..! (Удаляет повторяющиеся пиксели, сгенерированные данные и изменяет формат.Таким образом, качество не пострадает.)
Если эта статья показалась вам полезной, нажмите 5 звезд.