Разное

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

31.05.2021

Содержание

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

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

  1. JPG/JPEG — лучшее разрешение для детализированных фото, скриншотов, иллюстраций с градиентами и тенями;
  2. PNG — подходит для небольших изображений с прозрачным фоном: логотипов, кнопок, значков и других дизайнерских элементов. Из-за большого веса файлов используется довольно редко — для репродукций картин, авторских фото и т.д.;
  3. GIF — формат логотипов, анимированных картинок и динамичных рекламных баннеров. Добавляет изображениям динамики в ущерб качеству;
  4. SVG — позволяет размещать векторные изображения: лого, фон, кнопки, карты, диаграммы и рисунки для адаптивных сайтов;
  5. WEBp — альтернативный формат от Google. Позволяет существенно уменьшить размер файла с минимальными потерями качества. Требует специальных конвертеров и поддерживается далеко не всеми браузерами.

Чтобы уменьшить размер графического файла можно воспользоваться специальными компрессорами: Tiny PNG, imagecompressor, Iloveimg, IMGonline и др. Они позволяют незаметно для человеческого глаза уменьшить число оттенков — и тем самым количество битов для их кодирования, удалить лишние метаданные, масштабировать фото и повысить его уникальность.

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

1. Название файлов позволяет поисковику опознать вашу картинку. Оно должно быть максимально релевантным и исчерпывающим — никаких абстракций или случайного набора знаков. Название файла прописывается латиницей. Для автоматической транслитерации картинок на русском языке можно воспользоваться плагинами: Clearfy Pro, Clearfy, Cyr To Lat и др. Все пробелы в длинных названиях заменяем дефисами или нижним подчеркиванием. Если речь идет об интернет-магазине, обязательно стоит указать наименование конкретной модели товара, а не ограничиваться его категорией или брендом. Например: название смартфона для интернет-магазина техники следует прописывать следующим образом: «xiaomi-redmi-note-7-4-64gb-black.jpg».

Вам также может быть интересно:Фотография товара, которая продает. Как оформить галерею интернет-магазина?

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

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

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

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

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

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

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

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

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

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

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

Для чего необходимо оптимизировать изображения

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

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

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

Общепринятые требования к изображениям на сайтах

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

  • качество;
  • формат;
  • размеры графических файлов.

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

Виды форматов изображений

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

  • JPEG – прекрасный вариант для веб ресурсов, чаще всего применяется для хранения изображения;
  • BMP – еще один распространённый вариант хранения для файлов графического типа. В данном формате сжатие изображения отсутствует, потому фото получаются большого размера;
  • GIF подразумевает формат фотографии в виде очень короткого видео или слайд – шоу;
  • PNG – формат, достаточно востребованный среди сферы дизайна. Из-за наличия прозрачного фона вес файла может увеличиться. Что негативно скажется на оптимизации работы некоторых ресурсов;
  • SVG – данный формат чаще всего используется при создании изображений векторного типа.

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

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

Качество загружаемых изображений

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

Нюансы размеров файла

Данный фактор работы с картинками можно рассматривать с двух основных позиций:

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

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

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

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

Варианты онлайн инструментов

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

Данная платформа позволяет сжимать и оптимизировать бесплатно в месяц до 500 картинок.  Данный вариант площадки отличается высокой скоростью работы и понятным интерфейсом. Один прием позволяет загрузить до 20 картинок размером не более 5 Мб. Готовые изображения можно загрузить на площадку Dropbox.

Compressor

Бесплатный удобный ресурс, оптимизированный на обработку изображений как с сохранением, так и с потерей качества. Неудобство в том, что сервис работает исключительно с форматами JPG и PNG. Процент сжатия возможен до 90%, но размеры оригиналов не должны превышать 10 Мб. Для грамотной работы с данным редактором важно усвоить несколько деталей и подводных камней:

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

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

Image.online-convert

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

Оптимизация фотографий на сервере ресурса

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

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

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

Kraken

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

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

  1. Для обеспечения связи потребуется предоставление плагину таких данных от сайта, как API Key и API Secret. Они вносятся в настройках в соответствующей строке. После процедуры будут загружены все данные об изображениях на ресурсе.
  2. После процедуры есть возможность оптимизации как отдельного фото на выбор, так и все файлы единым целым.

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

Imagify

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

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

Процесс уменьшения фотографии в данном редакторе происходит при помощи следующего алгоритма шагов:

  1. После активации и установки плагина пользователю будет доступна стартовая страница ресурса.
  2. После прохождения всех указанных этапов можно приступать к обработке изображений.
  3. Необходимо выбрать режим оптимизации, а также при надобности дополнительные функции.
  4. Далее указать необходимые настройки, нажать сохранить и перейти в Bulk Optimization.
  5. На данной странице необходимо будет снова указать необходимый режим обработки и запустить IMAGIF’EM ALL.

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

Варианты декстоп приложений для работы с фотографиями

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

Adobe Photoshop

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

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

Total Image Converter

При необходимости расширенного функционала выбранной программы можно обратить внимание на этот вариант. Основными преимуществами Total Image Converter клиенты считают:

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

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

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