Google Squoosh – безплатен онлайн инструмент, за който малко хора знаят

На всеки сайт с цел оптимизация за търсачките е необходимо да се оптимизират изображенията. В статията ще Ви покажем един малко известен, но силно подценяван БЕЗПЛАТЕН инструмент, разработка на Google. С него веднага ще отговорим на три въпроса – Как да оптимизирате изображенията правилно? Какво да използвате? Ами ако нямате достатъчни ресурси за извършване на работата?

SEO и оптимизация на изображения

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

През 2021г. търсачката ще вземе предвид такива показатели като:

• Largest Contentful Paint
• First Input Delay
• Cumulative Layout Shift

Largest Contentful Paint отчита скоростта на изобразяване съдържанието на първия екран. Скоростта на изобразяване зависи от размера на изображенията.

Трябва да се съсредоточите върху следните стойности:

• < 2,5 сек е добре
• > 2,5 сек <4,0 сек трябва подобрение
• > 4,0 сек е лошо

Ако изображенията не са оптимизирани, тогава стойността на Largest Contentful Paint ще бъде висока. В резултат на това изображенията влияят върху класирането както директно чрез скоростта на зареждане, така и косвено чрез показатели за оценка на дизайна.

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

Пълната стратегия за оптимизиране на изображението се състои от следните стъпки:

• Lazy load (мързеливо зареждане)
• Избор на размера на изображението според размера на екрана
• Компресиране на графики

Google обаче има специална услуга за компресиране на изображения, за която малко хора знаят. Инструментът се нарича Squoosh. Услугата се появи през 2018г. Наскоро беше актуализирана до версия v2.

Google Squoosh – безплатна услуга за оптимизиране на изображения

Инструментът ви позволява да използвате разширените опции, предоставени от различни компресори на изображения. Разработен от Google Chrome Labs, проектът е с отворен код и е експериментален. Системният код е публикуван в Интернет – https://github.com/GoogleChromeLabs/squoosh/blob/dev/README.md

Технологията е сложна, но за потребителя е създаден опростен интерфейс.

Какво да направите:

• Отворете Squoosh. Качете изображение като натиснете на Drop OR Paste;
• Системата ще оптимизира файла автоматично. Оригиналното изображение се поставя от лявата страна на екрана. Изображенията след оптимизация се поставят от дясната страна на екрана;
• Изтеглете файла;

В долния десен ъгъл се показва процентна стойност, която показва колко е намалено изображението.

Пример:

Размерът на изображението е намален с 93%. От 8,87 MB, стана 586 kB

Услугата има настройки за регулиране на качеството на компресията, които ви позволяват да променяте кодеци и да проследявате промените направо в браузъра. Има възможност и за resize директно (преоразмеряване на снимката). Изпълнението на такава услуга е много скъпо, но в този случай всичко се предоставя безплатно и без ограничения .

Кои са най-добрите формати на изображения за използване?

Обичайният JPG формат на изображението е достатъчен. В идеалният случай обаче, сайтът трябва да използва подобрени формати. Водещите са:

• AVIF
• WebP

Използването на webp на сайта изисква допълнителна работа по внедряването. А за най-новият формат AVIF може да прочетете в нашата статия.

<picture> <source src="image.webp" type="image/webp"> <source src="image.avif" type="image/avif"> <img src="image.jpg" alt="description"> </picture>

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

Основните „кандидати за оптимизация“ са големите изображения, но оптимизирайте всичко правилно. Squoosh v2 беше обявен преди седмица. В услугата са направени следните промени:

• Добавена поддръжка за нови кодеци
• Добавена е поддръжка на командния ред за компресиране на изображения от терминала
• Подобрен дизайн

Сега услугата поддържа следните кодеци:

• OxiPNG
• WebP
• AVIF

Има опция за едновременна масова оптимизация на различни като формат изображения. Кодът на системата за компресия е отворен. Пример за оптимизация с използване на команден ред (вижте видеото). Големи набори от изображения могат да бъдат обработени бързо по този начин. Например всички изображения за електронен магазин.

Настройките по подразбиране предлагат използване на максимална компресия и минимизиране на качеството на изображението. Визуалната точност на изображението се оценява с помощта на конкретна метрика – Butteraugli .

Заключения

Всеки обича сайтовете да се зареждат много бързо, но за съжаление такова зареждане е рядкост. Google Squoosh ви позволява да компресирате изображения директно в браузъра си, като използвате различни кодеци. Сравнението едно до друго на различни видове компресия с помощта на плъзгача за визуализация ви помага да намерите баланс между размера на файла и качеството на изображението.

Ако поставите повече изображения на страниците си, процентът на конверсия ще се увеличи, но и размерът на страницата ви ще се увеличи. Оптимизацията частично решава проблема с размера. Представители на търсачките казват, че 40% от потребителите напускат страницата, ако времето за зареждане е повече от 10 секунди. Изследванията показват, че 74% от потребителите ще напуснат сайт, ако страниците не се заредят в рамките на 5 секунди.

Компресирането на файлове с изображения е прост и надежден начин да подобрите ситуацията със скоростта на зареждане на вашия уебсайт. Оптимизирането на изображения за сайта е в списъка с важни задачи, тъй като ви позволява да постигнете следните цели:

• Подобрете класирането в резултатите от търсенето
• Увеличава конверсията

Squoosh е напълно безплатен, така че защо не опитате?

Знаете ли за Squoosh преди? Планирате ли да оптимизирате изображенията на вашия уебсайт? Някакви въпроси? Пишете в коментарите.