Когда размер имеет значение: все об оптимизации изображений

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

Зачем нужна оптимизация визуала?

Казалось бы, залог высокой конверсии – в хорошем качестве любого визуального контента, будь то картинка или видео. Изображение должно отображаться без искажений на любом экране, и не должно «пикселить», и на этом все. Однако этим требования к такому типу контента не ограничивается. Следить за весом каждой картинки и оптимизировать изображения нужно для того, чтобы:

• Ускорить загрузку сайта. Размер файлов, использованных на странице, напрямую влияет на скорость ее загрузки. Это критически важный показатель для тех пользователей, у кого медленное интернет–соединение или ограниченный трафик. Достаточно сделать изображение легче, сжав его, как скорость загрузки увеличится;
• Улучшить пользовательский опыт. Посетители веб–ресурса не будут ждать, пока загрузятся все ваши безупречные с эстетической точки зрения картинки: они нажмут на крестик в правом верхнем углу вкладки браузера, и отправятся к конкурентам. Уменьшение изображений позволяет сократить количество отказов;
• Сэкономить ресурсы сервера. Использование изображений, которые немного весят, помогает увеличить пропускную способность сети и снизить нагрузку на сервис. Это важно для порталов с высокой посещаемостью, так как снижает вероятность возникновения ошибок при попытке зайти на сайт.
• Повысить рейтинг сайта в поисковых системах. Ранжируя сайты в выдаче, поисковики учитывают количество отказов и скорость загрузки портала. Оптимизировав размер изображений, вы косвенно влияете на количество органического трафика, который будете получать из поисковых систем.

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

6 эффективных способов оптимизации изображений

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

Изменение формата

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

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

Уменьшение размера файла

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

Не нужно думать, что такой вариант плох: если использовать его для фото с высоким расширением, то изменения не будут заметны человеческому качеству, зато скорость загрузки сайта заметно увеличится. Какой вес оптимален? Специалисты считают, что размещать на сайтах картинки размером более 3,5 Мб не стоит, а оптимальный размер для фото, где нужно сохранить четкость каждой детали – до 3 Мб. Остальной графике не стоит выделять более 600–900 Кб.

Работа с атрибутами alt и title

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

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

Кстати, для этой же цели служат и подписи к картинкам, размещенным на сайте.

Разметка OpenGraph

Этот язык позволяет описывать страницы таким образом, чтобы ссылки на них выглядели привлекательно. Причем здесь изображения, спросите вы? Разметка предусматривает добавление мета–тегов в блок <head> HTML–кода вашего сайта, а это позволяет роботам понять, какой визуал есть на странице еще до ее загрузки. Кроме того, OpenGraph используется для указания URL изображений и определения их размеров с помощью тегов <meta property="og:image:width" content="1200"> и <meta property="og:image:height" content="630">.

Работа с Sitemap сайта

Карта сайта – один из способов указать краулерам поисковых систем на местонахождение конкретного визуала. Как оптимизировать загрузку изображений для улучшения производительности ресурса с ее помощью? Для этого необходимо добавить в XML–файл информацию о картинках внутри каждой страницы, указав на них в конкретных URL при помощи тегов <image:image>, <image:loc>, <image:title> и других. Их применение позволит улучшить позиции сайта в поисковой выдаче по изображениям, повысить видимость визуального контента для краулеров и в целом поднять SEO-показатели ресурса.

Использование Content Delivery Network

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

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

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

I love image

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

Image Compressor

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

EzGIF

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

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