Тежките снимки: защо сайтът ви се зарежда бавно и как да го поправите

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

Какво значи една снимка да е тежка

Когато говорим за тежест в интернет, нямаме предвид колко е хубав кадърът, а колко място заема файлът, в мегабайти (MB) или килобайти (KB). Снимка от съвременен телефон обикновено тежи няколко мегабайта, а в режимите с много мегапиксели и повече. За сравнение, по данни на HTTP Archive цялата средностатистическа страница в интернет, заедно с текста, шрифтовете и кода, тежи около два-три мегабайта.

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

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

Размерът в пиксели не е размерът на екрана

Често се бърка размерът на снимката в пиксели с мястото, което тя заема на екрана. Фотоапаратите заснемат кадри, широки 6000 пиксела и повече, а телефоните обикновено около 4000. Екранът на обикновен лаптоп е широк около 1920 пиксела, а на телефона още по-малко.

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

• За големи банери на цял екран обикновено стига ширина 1920 пиксела.
• За снимки в текста или в продуктов каталог често стигат 800 до 1200 пиксела.
• За малки икони и портрети на екипа около 400 пиксела е разумна граница.

Ако имате онлайн магазин за мебели, детайлните снимки са важни. Дори тогава основната снимка на продукта не трябва да е по-голяма, отколкото екранът изисква. По-добре увеличението (zoom) да зарежда детайлния кадър само когато клиентът го поиска, вместо всеки посетител да тегли огромни файлове по подразбиране.

Форматите: кога JPG, кога PNG и кога WebP

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

JPG е класиката за фотографии. Той изхвърля детайли, които окото не забелязва, за да намали размера. За снимка на пейзаж, храна или хора това е обичайният избор. Не поддържа прозрачен фон.

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

WebP е по-съвременен формат, разработен от Google. По данни на Google снимките в WebP са с 25–34% по-малки от JPG при същото качество, а форматът поддържа и прозрачност като PNG. Много съвременни системи превръщат каченото изображение в WebP автоматично. Ако сайтът ви е по-стар, вероятно още разчита на по-тежки JPG и PNG файлове.

Как да подготвите снимките без платени програми

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

1. Първо намалете размера. Ако снимката е широка 5000 пиксела, свийте я до 1600–1920 пиксела за големи кадри с вградения редактор на Windows или Mac.
2. После я компресирайте. Безплатните онлайн услуги за компресия обикновено намаляват файла значително, без видимо да развалят качеството.
3. Накрая проверете резултата. Добре подготвена снимка за сайт обикновено се побира в 200–300 KB. Ако файлът още е над 1 MB, нещо е пропуснато.

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

Какво става, ако пренебрегнете проблема

Бавният сайт удря пряко приходите. Първо са хората: те не чакат дълго и при бавна страница отварят следващия резултат. Второ са търсачките: Google използва показателите за скорост и стабилност на страницата (Core Web Vitals) в класирането, макар че това доколко съдържанието отговаря на търсенето остава по-важно. Какво точно мерят тези показатели, разказахме в статията Скоростта на сайта е пари. А как името на файла и алтернативният текст помагат на снимките да се намират в Google, е тема на отделна статия.

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

Да вземем агенция за недвижими имоти, която качва по 20 снимки на обект. При 5 мегабайта на снимка една обява тежи 100 мегабайта, а десет души, които разгледат всички снимки едновременно, изтеглят цял гигабайт. Евтин хостинг може да не издържи. Ако същите снимки бяха подготвени до около 150 KB, цялата обява щеше да тежи под 3 мегабайта.

Автоматични решения: кога системата помага

Ако имате много продукти или често добавяте новини, ръчната обработка на всяка снимка става досадна. Съвременните системи за сайтове предлагат автоматизация. Има добавки (плъгини), които при качване смаляват снимката, махат излишните метаданни и я превръщат в WebP. Добрите сайтове правят и по няколко размера на всяка снимка, за да получи телефонът малката, а големият монитор голямата.

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

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

Темискорост на сайтаоптимизация на снимкибизнес сайтуеб дизайн