Как правильно сделать оптимизацию картинок на сайте?

Как правильно сделать оптимизацию картинок на сайте?

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

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

2. Вес и размер

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

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

— создавать картинку сразу нужного размера. Так она не потеряет в качестве (если вам нужно сделать коллаж для превью, задайте нужный размер в фоторедакторе - например, 800*600 пикселей. В результате вы получите четкую картинку, которую не нужно будет уменьшать или увеличивать);

— сжать изображение с помощью специальных инструментов (о них речь пойдет ниже);

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

— прописать в HTML-коде страницы размер изображения: ширину и высоту. Так браузер быстрее считает контент страницы.

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

3. Качество

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

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

Источник новости https://t.me/tokarevdigital/22...