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

Според Web Almanac 2025 на HTTP Archive медианното тегло на началната страница на мобилни устройства е било 2,56 MB, от които 911 KB са били изображения. На компютър медианната страница е съдържала 1058 KB изображения. Изображенията са и това, което посетителите чакат: най-големият елемент на екрана при зареждане на страницата, Largest Contentful Paint (LCP), е бил изображение на 76% от мобилните страници.

По-леките изображения се зареждат по-бързо при бавна връзка, изразходват по-малко мобилни данни на посетителите ви и ви струват по-малко трафик. LCP е един от показателите Core Web Vitals, с които Google оценява потребителското изживяване на страниците, така че тежките изображения може да струват повече от няколко секунди търпение.

Компресирането не може да спаси изображение, което е много по-голямо от мястото, което заема. Снимка от фотоапарат с ширина 4000 пиксела, показана в колона с ширина 800 пиксела, съдържа 25 пъти повече пиксели, отколкото страницата може да използва. Според web.dev изпращането на изображения с размер за компютър към телефони може да изразходва 2–4 пъти повече данни от необходимото.

• Банери на цялата ширина: за повечето оформления са достатъчни около 1600–2000 пиксела ширина.
• Изображения в колоната на статия: около два пъти ширината на колоната, за да останат резки на екрани с висока плътност (например 1400 пиксела за колона от 700 пиксела).
• Миниатюри и аватари: два пъти показвания им размер, често 200–400 пиксела.

Форматът определя колко ефективно може да се съхрани едно изображение. Накратко: за снимки са подходящи JPG или WebP; за лога, екранни снимки и всичко с прозрачност – PNG или WebP. Нашето сравнение на JPG, PNG и WebP обяснява кога кой формат печели.

Около 97% от използваните браузъри показват WebP и файловете в него често са осезаемо по-малки. За да опитате, конвертирайте с JPG в WebP или PNG в WebP и сравнете резултата с оригинала: конвертираният файл не винаги е по-малък, особено при прости графики.

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

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

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

Дори добре компресирано изображение може да забави страницата, ако се зарежда в неподходящ момент или в неподходящ размер. Няколко HTML атрибута вършат по-голямата част от работата:

• Задавайте width и height на всяко изображение, за да може браузърът да запази мястото и оформлението да не подскача, докато то се зарежда.
• Добавяйте loading="lazy" към изображенията по-надолу в страницата, за да се зареждат едва когато посетителят превърти близо до тях.
• Никога не използвайте отложено зареждане за основното изображение в горната част на страницата. Вместо това web.dev препоръчва за него fetchpriority="high", и то за не повече от едно-две изображения.
• Използвайте srcset и sizes, за да предложите няколко ширини на едно и също изображение, така че телефоните да изтеглят по-малък файл от големите екрани.
• Предоставяйте изображенията с дълъг срок на кеширане, през CDN, ако използвате такава, за да не ги изтеглят отново завръщащите се посетители.

Тествайте страницата в PageSpeed Insights или в панела Lighthouse в Chrome. От Lighthouse 13 проверките за изображения са събрани в една препоръка – „Improve image delivery“, която изброява изображения, които могат да се компресират още, да се предоставят в модерен формат или да се намалят. Изображения, които биха спестили по-малко от 4 KiB, не се изброяват, така че краткият списък е добър знак.

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

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

1. 01Намалете всяко изображение до около два пъти размера, в който се показва.
2. 02Използвайте JPG или WebP за снимки и PNG или WebP за графики и прозрачност.
3. 03Компресирайте на ниво Балансирано и опитайте Максимално за най-големите изображения.
4. 04Сравнете резултата с оригинала, преди да го замените.
5. 05Задайте ширина и височина, използвайте отложено зареждане за изображенията под първия екран и никога за основното изображение.
6. 06Проверете страницата отново в PageSpeed Insights.

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