Prečo obrázky v článkoch spomaľujú web a ako to opraviť: formáty, veľkosti a alt text
Obrázky bývajú najťažšou časťou článku. Praktický sprievodca formátmi WebP, responzívnymi veľkosťami, lenivým načítaním a alt textom s príkladmi v Next.js.
Články bez obrázkov pôsobia prázdne, no obrázky majú svoju cenu. Jedna nekomprimovaná fotka dokáže vážiť viac než celý text článku. Na pomalom mobilnom pripojení to znamená prázdne políčko tam, kde mal byť obrázok, rozloženie stránky, ktoré poskakuje, a návštevníka, ktorý odíde. Dobré obrázky sú súčasťou výkonu a SEO, nielen dizajnu.
Začnite správnym formátom
Pri fotografiách a ilustráciách používajte moderné formáty ako WebP alebo AVIF. Logá a jednoduché ikony nechajte vo formáte SVG. Next.js dokáže formáty automaticky previesť a podávať, ak používate komponent next/image, ktorý obrázky zároveň zmenšuje pre zariadenie, ktoré ich žiada.
Každý obrázok má mať veľkosť
Obrázok bez šírky a výšky spôsobí, že sa stránka pri načítaní posunie. Prehliadaču dajte pomer strán, napríklad cez fill v kontajneri s pevnou výškou, alebo nastavte width a height. Pridajte atribút sizes, aby si prehliadač stiahol súbor, ktorý sedí do rozloženia, a nie tú najväčšiu verziu.
Načítavajte len to, čo je vidieť
- Obrázky mimo zobrazenej časti načítavajte lenivo. Návštevník, ktorý nescrolluje nadol, ich nemusí sťahovať.
- Hlavný obrázok označte ako prioritný, ak ho návštevník vidí ako prvý, aby sa zobrazil rýchlo.
- Originály komprimujte pred nahratím. Exportujte v rozmere, v akom sa obrázok zobrazí, prípadne mierne väčšom pre ostré obrazovky, a neposielajte súbor z fotoaparátu široký šesťtisíc pixelov.
Alt text a názvy súborov píšte pre ľudí
Alt text pomáha používateľom čítačiek obrazovky pochopiť obrázok a vyhľadávačom povie, čo zobrazuje. Opíšte obsah jednou krátkou vetou a pri čisto dekoratívnych obrázkoch ho nechajte prázdny. Názov súboru ako blog-obrazky-rychlost-seo.webp je oveľa užitočnejší než IMG_4831.jpg.
V Omnicode držíme obálky článkov jednotné a ľahké, aby sa každý článok načítal rýchlo a pôsobil ako súčasť jednej série. Ak chcete rýchlejší blog alebo web, poďme sa porozprávať.