O fotografie exportată direct din telefon poate avea mult mai mulți pixeli decât folosește un card de produs. Browserul tot trebuie să descarce fișierul, chiar dacă îl afișează mic. Optimizarea imaginilor începe înainte de upload: alegi ce informație transmite fotografia și la ce dimensiune va fi văzută. Nu trebuie să sacrifici claritatea pentru a evita fișiere inutil de mari.
Pregătește mărimea pentru locul afișării
O miniatură și o imagine de prezentare au nevoi diferite. Generează variante potrivite ecranelor și lasă browserul să aleagă folosind imagini responsive. Simplul width din CSS nu micșorează fișierul descărcat. Verifică și densitatea ecranelor, dar evită exportul la rezoluție maximă pentru fiecare context. Păstrează originalul separat, pentru viitoare editări.
Alege formatul după conținut
Fotografiile, ilustrațiile cu transparență și logo-urile nu au aceeași structură. Compară WebP sau AVIF cu variantele obișnuite și păstrează compatibilitatea necesară. Pentru grafică simplă, un SVG pregătit sigur poate fi eficient. Nu accepta SVG-uri de la utilizatori fără procesare adecvată: formatul poate conține mai mult decât forme. Exportă numai datele necesare și verifică vizual rezultatul compresiei.
Dă prioritate imaginii importante
Imaginea principală vizibilă imediat nu ar trebui amânată automat prin lazy loading. În schimb, fotografiile mult mai jos pe pagină pot fi încărcate când devin relevante. Nu pune aceeași prioritate mare pe toate resursele: astfel browserul nu mai primește un semnal util. Verifică ce element influențează încărcarea percepută pe mobil, nu presupune că este mereu fotografia din hero.
Rezervă spațiu în pagină
Specifică dimensiuni sau un raport de aspect potrivit, astfel încât textul și butoanele să nu sară când imaginea apare. Pentru carduri, folosește o regulă consistentă de decupare și verifică subiectul fotografiei pe ecrane înguste. O față ori o parte importantă a produsului nu trebuie tăiată doar ca să se potrivească într-un șablon. Stabilitatea vizuală este parte din experiența de încărcare.
Descrie ce este util, nu ce vrei să indexezi
Textul alternativ trebuie să comunice informația imaginii când aceasta nu poate fi văzută. Imaginile decorative pot avea text alternativ gol. Nu îngrămădi cuvinte cheie și nu repeta întregul titlu în fiecare fotografie. Verifică pagina cu imaginile oprite: produsul, prețul și acțiunea trebuie să rămână de înțeles. Cuvintele importante nu trebuie să existe exclusiv în pixeli.
Surse și lecturi utile
Ghid editorial CloudCity, bazat pe documentația de mai jos. Verifică sursa oficială pentru reguli și proceduri care se pot schimba.
