Как изображенията в уебсайт да се зареждат по-бързо
Петте промени, които намаляват тежестта на изображенията във всеки уебсайт, подредени по ефект.
В повечето уебсайтове изображенията са по-голямата част от това, което посетителят изтегля. Една неоптимизирана снимка от телефон може да тежи повече от цялата останала страница взета заедно. Оправянето на изображенията обикновено е най-голямото и най-евтиното подобрение на скоростта, а по-бързите страници се класират по-добре, задържат посетителите по-дълго и носят повече продажби.
1. Качвайте изображенията в размера, в който се показват
Снимка направо от телефона е широка 4000 пиксела или повече. Колоната със съдържание в уебсайт рядко е по-широка от 1200 пиксела, а картата или миниатюрата е много по-малка. Всеки излишен пиксел се изтегля и после браузърът го изхвърля. Преоразмерете преди качване: около 2000 пиксела ширина за банери на цяла ширина (за да остават остри на екрани с висока плътност), 1200 до 1600 за изображения в съдържанието и 600 до 800 за карти. Инструментът за преоразмеряване обработва цяла папка наведнъж.
2. Компресирайте
При правилните размери компресирането върши останалото. Снимка, запазена с качество 80, изглежда в уеб страница точно като такава с качество 100 и често е три пъти по-малка. Инструментът за компресиране на изображения обработва много файлове наведнъж и показва спестеното за всеки файл.
3. Използвайте WebP
WebP се поддържа от всеки съвременен браузър и обикновено е с 25 до 35% по-малък от JPG при същото видимо качество, а поддръжката на прозрачност го прави заместител и на много PNG файлове. Конвертирайте с JPG към WebP или PNG към WebP. AVIF е още по-малък, но се кодира по-бавно и се поддържа по-рядко от системите за качване, затова WebP е практичният избор по подразбиране.
4. Изберете правилния формат за съдържанието
| Съдържание | Най-добър формат |
|---|---|
| Снимки | WebP или JPG там, където WebP не се приема |
| Лога и икони | SVG, ако го имате, иначе PNG или WebP |
| Екранни снимки с текст | PNG или WebP без загуби |
| Прости анимации | Кратко видео вместо GIF |
5. Помогнете на браузъра да ги зарежда разумно
- Отложено зареждане. Изображенията под първия екран трябва да се зареждат едва когато посетителят превърти близо до тях. Повечето платформи правят това автоматично; в чист HTML добавете loading="lazy" към img таговете, които не се виждат в началото.
- Размери. Задайте на всяко изображение ширина и височина, за да не подскача страницата, докато изображенията пристигат. Изместването на оформлението е един от Core Web Vitals на Google.
- Първо главното изображение. Голямото изображение в горната част на страницата, обикновено това, което се отчита като Largest Contentful Paint, никога не трябва да се зарежда отложено. То трябва да се зареди възможно най-рано.
Каква е разликата на практика
Типична страница с десет снимки направо от телефона може да тежи 30 MB. Преоразмерена до разумни ширини и компресирана, същата страница обикновено е около 2 MB. Конвертирана в WebP, по-скоро около 1,4 MB. При мобилна връзка това е разликата между страница, която се появява за секунда, и такава, която много посетители напускат.
Как да проверите резултатите
PageSpeed Insights на Google и панелът Lighthouse в инструментите за разработчици на Chrome показват прекалено големите изображения, изображенията, които трябва да са WebP, и елемента Largest Contentful Paint. Пуснете ги преди и след промените и започнете със страниците с най-много посещения.