Media: imagini și text alternativ (alt)

Modulul 4: Crearea de conținut · Timp de citire: 9 minute

Obiectiv de învățare: După această lecție veți putea pregăti, încărca și descrie imaginile corect, astfel încât acestea să se încarce rapid, să arate clar și să fie utilizabile pentru toată lumea.

Concepte-cheie: bibliotecă media, formate de imagini, big image threshold (2560 pixeli), JPEG, PNG, WebP, AVIF, compresie, srcset, lazy loading, text alternativ (alt), nume fișier, drept de autor

Ce se întâmplă când încărcați o fotografie

Încărcați o fotografie de pe telefon: 4.000 pe 3.000 de pixeli, 5 MB. WordPress face atunci mai multe lucruri decât credeți:

1. Dacă fotografia este mai lată sau mai înaltă de 2.560 de pixeli, WordPress creează o versiune micșorată (cu -scaled în nume) și o folosește ca „original”. Originalul real rămâne, de asemenea, păstrat. Aceasta se numește big image threshold și există începând cu WordPress 5.3.
2. Pe lângă aceasta, WordPress creează o serie de formate mai mici: miniatură (implicit 150 x 150 pixeli, decupată), mediu (300), mare (1024), și formate suplimentare de 768, 1536 și 2048 pixeli lățime. Tema și modulele (pluginurile) dumneavoastră adaugă deseori propriile formate.
3. Toate versiunile ajung în wp-content/uploads/2026/11/ (anul și luna încărcării).

O singură fotografie devine astfel rapid opt sau mai multe fișiere. De aceea folderul uploads crește atât de mult (lecția 1.3) și de aceea contează ce încărcați.

Pe pagină, WordPress adaugă la o imagine un srcset: o listă cu toate aceste formate. Browserul alege singur cel mai mic format care este suficient de clar pentru ecran. Un telefon va încărca astfel formatul de 768 pixeli, un ecran mare pe cel de 1536. Acest lucru funcționează corect doar dacă formatele există, deci dacă încărcați prin biblioteca media și nu prin FTP.

Micșorare și comprimare în prealabil

Chiar și cu aceste formate automate, merită să micșorați fotografiile în prealabil:

• Dimensiune: o fotografie care pe site-ul dumneavoastră nu este afișată niciodată mai lată de 1.600 de pixeli nu trebuie să aibă 4.000 de pixeli lățime. Micșorați-o în prealabil la aproximativ 2.000 de pixeli pe latura lungă. Astfel economisiți spațiu de stocare, dimensiune a copiei de siguranță (backup) și timp de încărcare.
• Compresie: un JPEG cu calitate 75 până la 85 arată cu ochiul liber aproape la fel ca unul cu calitate 100, dar este deseori de două ori mai mic.
• Metadate: fotografiile de pe telefon conțin deseori locația GPS unde au fost făcute. Dacă nu doriți ca toată lumea să știe unde locuiți, eliminați aceste date înainte de a încărca. WordPress elimină multe metadate la formatele micșorate, dar originalul le poate încă conține.

Există module (pluginuri) care comprimă imaginile la încărcare sau le convertesc într-un format mai modern. Util, dar verificați dacă fac acest lucru pe propriul dumneavoastră server sau trimit fotografiile către un serviciu extern (lecția 9.3), și dacă aveți cu adevărat nevoie de un modul (plugin) dacă puteți face asta și în prealabil.

Ce format

Dacă serverul dumneavoastră nu poate procesa un format, WordPress dă o eroare la încărcare sau nu creează formate mai mici. În Instrumente > Sănătate site (fila Info, sub Gestionare media) vedeți ce formate suportă serverul dumneavoastră.

Lazy loading

Începând cu WordPress 5.5, imaginile primesc automat loading="lazy": browserul încarcă o imagine abia când derulați (scroll) până la ea. Acest lucru face o pagină lungă cu multe fotografii mult mai rapidă. WordPress lasă în mod deliberat prima imagine mare din partea de sus a paginii fără lazy loading și îi acordă deseori prioritate cu fetchpriority="high", pentru că aceasta trebuie să fie vizibilă cât mai repede posibil. Veți reveni asupra acestui subiect în lecția 6.3.

Setați întotdeauna și lățimea și înălțimea la o imagine (WordPress face acest lucru la imaginile din biblioteca media). Astfel, browserul rezervă spațiu în prealabil și textul nu „sare” când fotografia se încarcă.

Text alternativ (alt): pentru cei care nu văd imaginea

Textul alternativ (alt) descrie ce se vede pe o imagine. Cititoarele de ecran îl citesc cu voce tare vizitatorilor nevăzători și cu deficiențe de vedere, iar el apare dacă imaginea nu se încarcă. Motoarele de căutare îl folosesc pentru a înțelege imaginea.

Un text alternativ bun descrie ce spune imaginea în acest context:

• Slab: IMG_4032.jpg sau foto.
• Slab: magazin biciclete bicicletă e-bike cumpărare ieftin bicicletă (înșiruirea de cuvinte cheie nu ajută pe nimeni).
• Bun: Mecanic reglează frânele unei e-bike albastre în atelier.

Dacă o imagine este pur decorativă (o linie, un model de fundal), lăsați textul alternativ gol. Astfel, un cititor de ecran o va omite. Gol este diferit de lipsă: o imagine fără alt face ca un cititor de ecran să citească deseori numele fișierului. O imagine care este un link (de exemplu un logo care duce către pagina principală) descrie unde duce linkul: Către pagina principală a magazinului de biciclete De Spaak.

În biblioteca media, setați textul alternativ la imaginea respectivă, iar în editorul de blocuri, la blocul de imagine. Atenție: un text alternativ pe care îl completați în biblioteca media nu se modifică automat la imaginile deja prezente pe pagini.

Nume de fișiere și drept de autor

• Nume fișier: e-bike-remmen-afstellen.jpg spune mai mult decât IMG_4032.jpg și apare în adresa imaginii. Litere mici, cratime, fără spații.
• Drept de autor: o imagine de pe Google Imagini nu poate fi folosită liber. Fotografii și băncile de imagini trimit în mod regulat facturi pentru utilizarea fără licență. Folosiți fotografii proprii, fotografii cu o licență clară sau o bancă de imagini ale cărei condiții le cunoașteți, și păstrați dovada licenței dumneavoastră.

Stocare și curățare

Biblioteca media nu se curăță singură. O imagine pe care o eliminați de pe o pagină rămâne în bibliotecă și în uploads, cu toate formatele ei. La un site cu conținut de mai mulți ani, acest lucru se acumulează. Curățați din când în când, dar cu grijă: o imagine poate fi folosită într-un loc pe care biblioteca nu îl „vede” (într-o setare de temă, un widget sau un e-mail). Faceți mai întâi o copie de siguranță (backup).

Rezumat

• WordPress creează din fiecare încărcare mai multe formate și micșorează fotografiile mari la 2.560 de pixeli; browserul alege prin srcset formatul potrivit.
• Micșorați și comprimați fotografiile în prealabil și eliminați datele de localizare.
• Folosiți JPEG sau WebP pentru fotografii, PNG pentru logo-uri și capturi de ecran; SVG doar cu un modul (plugin) care curăță fișierul.
• Lazy loading funcționează automat, cu excepția primei imagini mari; lățimea și înălțimea previn „săritura” layoutului.
• Un text alternativ descrie ce spune imaginea în context; o imagine pur decorativă primește un text alternativ gol.

Test (quiz)

Exercițiu

Exercițiu A4.4: Imagini de pe pagina dumneavoastră principală. Introduceți adresa site-ului dumneavoastră. Programul citește pagina principală și examinează primele 20 de imagini: au un atribut alt (gol este acceptat, lipsă nu), au lățime și înălțime, și cât de mare este fiecare fișier (printr-o cerere HEAD)? Imaginile de peste 300 kB sunt semnalate. Îmbunătățiți ce apare marcat cu roșu în biblioteca media sau pe pagină, și verificați din nou.

Lecturi suplimentare

Aceste articole descriu pașii în panourile WebOké; în alte panouri funcționează similar.

• Manual DirectAdmin 18.5: Încărcare prea mare (eroare 413) sau time-out
• Încărcarea nu reușește: măriți upload_max_filesize și max_execution_time
• Bibliotecă Media (wordpress.org, Engleză): https://wordpress.org/documentation/article/media-library-screen/
• Scrierea textelor alternative (W3C, Engleză): https://www.w3.org/WAI/tutorials/images/decision-tree/