5 съвета за оптимизиране на изображенията в сайт за електронна търговия

Казват, че една снимка струва повече от хиляда думи. И няма област, в която това да е толкова вярно  както  в  електронната търговия. В тази статия ще разгледам пет съвета за оптимизиране на изображенията във вашия уебсайт за електронна търговия. Не е необичайно на една страница в сайт за електронна търговия да се ползват десетки изображения.

Тези изображения включват много неща – изображения на продукти в пълен размер, по-малки миниатюри на продукти, изображения на категории, банери, декорации на страници и икони на бутони. Като се има предвид тяхното изобилие, как можете да се уверите, че те са бързи и ефективни? Първият съвет за оптимизиране използването на изображенията в сайта ви е да премахнете кумулативната промяна на оформлението. Кумулативното изместване на оформлението – или накратко CLS – е ситуация, при която съдържанието на дадена страница видимо се премества на екрана. Познавате със сигурност сайтове, при които спирате да четете или се опитвате да щракнете върху връзка и изведнъж съдържанието на страницата се премества. Това е наистина дразнещо. Изображенията могат да допринесат за този проблем, ако се използват неправилно. CLS има голямо влияние върху преживяването на потребителя. Google определя CLS като един от трите основни уеб витални показатели. Това са фактори, които Google счита за важни за потребителското изживяване на всички уеб страници.

Първи съвет

Изберете правилната ширина и височина за вашите изображения. По-големите файлове се изтеглят по-дълго, особено на мобилни телефони с по-бавни мрежови връзки. По-големите файлове изискват и повече време за обработка, особено на мобилни телефони с по-слаби процесори.

Правилното оразмеряване на изображенията може да се усложни от различните размери и резолюции на устройствата, които имат достъп до сайта ви. Ако браузърът свие или изреже изображението, файлът за изтегляне е по-голям от необходимото, което е разточително. Това изисква предварително да промените размера на изображенията или да извършите оразмеряване им  при поискване. Ако промяната на размера на изображенията е твърде много работа за собствения ви сайт, помислете за използване на мрежа за доставка на съдържание или CDN. Много такива услуги могат да променят размера на изображенията и да ги конвертират в по-ефективни формати.

Втори съвет

Помислете за файловия формат на вашите изображения, например дали да използвате файлове PNG, JPEG или webP. Файловият формат влияе върху размера на файла. Трябва обаче да се внимава, тъй като формати като JPEG и webP могат да намалят файловете, използвайки алгоритми за компресиране със загуба на информация. Загубите означават, че качеството на изображението може да бъде намалено като компромис за намаляване на размера на файла. Ако са необходими изображения с перфектни пиксели, например за икони на бутони, трябва да се използват по-малко ефектни, но перфектни формати. Въпреки че изображенията с по-ниско качество може да звучат като лоша идея, не забравяйте, че влошаването на качеството може да не се забележи от купувачите. А ползата за скоростта може да е значителна.

Купувачите могат да изоставят страницата ви, ако зареждането ѝ отнема твърде много време. За да откриете дали сайтът ви може да се възползва от използването на различен формат на изображенията, погледнете в PageSpeed Insights доклада. В него има отчет, където се изброяват изображенията на страницата, които са „кандидати“ да бъдат конвертирани в по-ефективен файлов формат.

И така, има ли един-единствен най-добър формат на изображенията, който да използвате? Не, защото  едно от усложненията е, че не всички формати на изображения ще работят на всички браузъри.

Сайтът caniuse.com може да се използва, за да се провери кои браузъри поддържат определени файлови формати на изображения. Например, webP вече се поддържа от почти всички използвани браузъри. Това е   добра комбинация от ефективност и приемане.

Като алтернатива, вместо да избирате един формат, можете да накарате уебсайта си да връща най-ефективния формат, който браузърът твърди, че поддържа. Това отново е услуга, предлагана от CDN.

Трети съвет

Използвайте правилния коефициент на качество за вашите изображения, за да ги кодирате ефективно, като същевременно запазите желаното качество на изображението. Разделът Encode Images Efficiently (Ефективно кодиране на изображенията) в доклада PageSpeed Insights може да се използва за идентифициране на изображенията кандидати за оптимизиране на компресията. Отчетът показва и потенциалните икономии на размера на файловете. Имайте предвид обаче, че отчетът не извършва визуална проверка на вашите компресирани изображения.

Отчетът се основава на често използвани коефициенти на компресия. За да откриете коефициент на качество, който ви удовлетворява, използвайте любимия си инструмент за конвертиране на изображения върху няколко изображения, като използвате различни стойности на качеството. Обичайната стойност по подразбиране за webP е 75. Сайтът Squoosh.app може да бъде полезен за тази цел, тъй като улеснява сравняването на предишната и последващата версия на изображенията.

Не забравяйте също , че има случаи, когато искате изображения с по-висока разделителна способност, например когато позволите на купувача да увеличи изображението на продукта.

Четвърти съвет

Укажете на браузъра колко време може безопасно да кешира изображенията. Когато връщате изображение от сайта си, можете да включите HTTP заглавие на отговора с указания за кеширане, като например за колко време се препоръчва браузърът да кешира изображението. Един от подходите за установяване дали заглавията за кеширане на HTTP отговора са зададени правилно на вашия сайт е отново да използвате доклада PageSpeed Insights. Разделът Serve Static Assets With an Efficient Cache Policy на доклада PageSpeed Insights идентифицира изображения, които могат да се възползват от подобрения в кеширането. Друг подход е да използвате мрежовия раздел в инструментите за разработчици, в Chrome, за да разгледате заглавията на отговора на HTTP кеша. За да отстраните проблемите в сайта си, проверете дали имате настройки на платформата или на уеб сървъра, които можете да промените, за да регулирате продължителността на кеширане на изображенията в сайта си.

Ако не променяте често изображенията или ако винаги давате на изображенията нов URL адрес, можете да зададете много дълъг срок на кеширане.

В допълнение към продължителността на кеширането, честото използване на CDN прави изтеглянията по-бързи чрез кеширане на копия на вашите изображения на няколко места по света, по-близо до мястото, от което се свързват потребителите.

Пети съвет

Той е по-усъвършенстван. Правилното подреждане на реда на изтегляне на ресурсите, включително изображенията, може значително да подобри производителността на страницата. Тъй като изтеглянето на изображенията едно по едно може да бъде бавно, браузърите, използващи HTTP1, обикновено изтеглят няколко изображения паралелно чрез независими мрежови връзки към уебсайта.

Ако се поддържа HTTP2, повечето браузъри вече изтеглят изображенията по няколко пъти през една мрежова връзка. Това обикновено е по-бързо и се избягват проблеми като блокиране на изтеглянето на по-малки файлове от големи файлове. Който и подход да се използва, все още има затруднение в честотната лента на мрежата.

Тъй като дадена уебстраница може да бъде разглеждана на устройства с различни размери на екрана, обичайно е да се прецени кои изображения са над и под сгъването, като се провери сайтът ви на няколко устройства. И накрая, искате да се изтеглят изображения, които са точно над екрана, за да могат да бъдат готови за показване, когато потребителят започне да скролва. Други изображения, за които няма вероятност да бъдат показани скоро, често е най-добре да се зареждат последни. Ако потребителят не превърта страницата, изтеглянето им би било загуба на ресурси. За да откриете дали сайтът ви зарежда изображенията ефективно, отново може да ви помогне отчетът PageSpeed Insights.

Заключение

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