Скорост на сайт: по-леки снимки без видима загуба на качество
Красивата снимка не трябва да е тежък файл
Добрата скорост на сайт зависи от много неща, но снимките са една от най-достъпните възможности за подобрение. За ресторант в Пловдив, салон във Варна или магазин в Русе изображенията са важни: показват обстановката, работата и продуктите. Проблемът започва, когато оригиналните файлове от телефона се качват директно, без подготовка.
Една снимка може да изглежда малка на екрана, но браузърът да изтегля файл с много по-големи размери. Ако това се повтаря в цяла галерия, посетителят чака излишно, особено при по-слаба мобилна връзка.
Решението не е да махнете всички изображения. По-полезно е да запазите нужните снимки и да намалите ненужните данни в тях.
Скорост на сайт: започнете от най-видимите изображения
Първо разгледайте началната страница и страницата на най-търсената услуга. Проверете кои изображения се виждат веднага и кои са по-надолу.
Обикновено си заслужава да започнете с:
- голямата снимка в началото на страницата;
- снимките на основните услуги;
- продуктовите изображения в първия видим ред;
- галериите с много снимки.
Например ресторант може да има една основна снимка на интериора и още двадесет в галерията. Основната трябва да се появи навреме, а останалите не е необходимо да се изтеглят още при отварянето.
Не оценявайте само по броя на снимките. Един огромен файл може да натовари страницата повече от няколко добре подготвени изображения.
Размерът в пиксели и размерът на файла са различни
Намалете излишната резолюция
Размерът в пиксели показва ширината и височината на изображението. Размерът на файла, измерен в килобайти или мегабайти, показва колко данни трябва да бъдат изтеглени.
Снимка с ширина 5000 пиксела рядко е необходима за малка карта на услуга. Но само промяната на начина, по който тя се показва на страницата, не намалява самия файл.
Подгответе копие с подходяща резолюция. За изображение, което се показва с ширина около 600 пиксела, версия с ширина около 1200 пиксела може да е разумна отправна точка за по-плътни екрани. Това не е универсално правило: точният размер зависи от дизайна.
Изрежете преди качване
Ако в сайта ви трябва хоризонтална снимка, а оригиналът е вертикален, направете подходящо изрязване предварително. Така ще контролирате какво се вижда и няма да разчитате на автоматично изрязване, което може да скрие важен детайл.
Запазвайте оригиналите в отделна папка. За сайта използвайте подготвени копия, за да можете по-късно да направите друг размер, без да обработвате вече компресиран файл.
Изберете формат според съдържанието
Няма един формат, който е най-подходящ за всяко изображение.
- JPEG е практичен вариант за фотографии, когато няма нужда от прозрачност.
- WebP често позволява по-малки файлове при добро визуално качество и поддържа прозрачност.
- AVIF може да намали размера допълнително, но внедряването му трябва да е съобразено със системата на сайта.
- PNG е полезен в определени случаи, но обикновено не е добър избор за големи фотографии.
Самото преименуване на разширението не преобразува файла. Нужен е действителен експорт или конвертиране чрез редактор, инструмент за изображения или системата на сайта.
При компресия сравнявайте резултата с оригинала. Гледайте коса, текстури, ръбове и дребни детайли. За магазин за бижута те са по-важни, отколкото за обща снимка на чакалня.
Целта е достатъчно малък файл, който изглежда добре в реалния размер на страницата, а не непременно най-малкият възможен файл.
Какво да поискате от разработчика
Добрата подготовка на снимките помага, но сайтът трябва и да ги подава правилно. Попитайте човека, който го поддържа, дали има:
- различни версии на изображенията за различни размери на екрана;
- отложено зареждане на снимките, които са извън първоначално видимата част;
- зададени ширина и височина, за да не подскача съдържанието;
- автоматично създаване на подходящи формати и размери при качване.
Голямата снимка, която се вижда веднага, обикновено не трябва да бъде с отложено зареждане. Ако браузърът започне да я изтегля късно, това може да забави появата на основното съдържание.
Автоматичната обработка е особено полезна, ако служители редовно добавят продукти или снимки на извършена работа. Така процесът не зависи изцяло от ръчна подготовка.
Проверете промяната с Google PageSpeed Insights
Отворете Google PageSpeed Insights и въведете адреса на конкретната страница. Не проверявайте само началната: продуктова страница или галерия може да има съвсем различно натоварване.
Направете първо измерване, преди да променяте изображенията. Запишете адреса, датата и основните забележки. След обработката проверете отново същата страница.
Гледайте мобилния и настолния резултат поотделно. Мобилният тест е особено полезен, защото симулира по-ограничени условия.
Обърнете внимание на препоръките за изображения и на LCP — показател за появата на най-големия видим елемент. Ако този елемент е основната снимка, нейният размер и начинът на зареждане заслужават внимание.
Единичният резултат не е окончателна оценка. Повторете теста няколко пъти при сходни условия. Лабораторните измервания могат да варират, а данните от реални посещения, когато са налични, обхващат предходен период и не отразяват промяната незабавно.
Направете подготовката на снимките обичаен процес
За малък бизнес е достатъчен кратък ред на работа:
- Изберете снимките, които действително помагат на клиента.
- Запазете оригиналите отделно.
- Изрежете и намалете копията според мястото им в сайта.
- Експортирайте в подходящ формат и проверете качеството.
- Качете ги и прегледайте страницата на телефон.
- Сравнете измерванията преди и след промяната.
Ако изображенията вече са оптимизирани, а страницата остава бавна, причината може да е в скриптове, външни услуги или сървърната обработка. Тогава е нужна по-широка техническа проверка.
При нов сайт уточнете предварително как ще се обработват бъдещите снимки. В Линкче пакетите за фирмен сайт започват от 399 €, с включени хостинг и поддръжка. Обсъдете и начина на качване на изображенията: устойчивият процес е по-полезен от еднократното олекотяване.
