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 corect imaginile, astfel încât să se încarce rapid, să arate clar și să fie utilizabile de către toată lumea.

Concepte-cheie: Bibliotecă Media, dimensiuni de imagine, big image threshold (2560 de pixeli), JPEG, PNG, WebP, AVIF, compresie, srcset, lazy loading, text alternativ (alt), nume de fișier, drepturi de autor

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

Încărcați o fotografie făcută cu telefonul: 4.000 pe 3.000 de pixeli, 5 MB. WordPress face atunci mai mult decât ați crede:

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”. Adevăratul original este păstrat și el. Acest mecanism se numește big image threshold și există începând cu WordPress 5.3.
2. În plus, WordPress creează o serie de dimensiuni mai mici: miniatură (implicit 150 x 150 de pixeli, decupată), medie (300), mare (1024) și dimensiuni suplimentare cu lățimea de 768, 1536 și 2048 de pixeli. Tema și modulele (pluginurile) dumneavoastră adaugă adesea și propriile dimensiuni.
3. Toate versiunile ajung în wp-content/uploads/2026/11/ (anul și luna încărcării).

Astfel, o singură fotografie devine repede 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 dimensiuni. Browserul alege singur cea mai mică dimensiune suficient de clară pentru ecran. Un telefon încarcă astfel dimensiunea de 768 de pixeli, un ecran mare pe cea de 1536. Acest lucru funcționează bine doar dacă dimensiunile există, adică dacă încărcați prin Bibliotecă Media și nu prin FTP.

Micșorare și compresie în prealabil

Chiar și cu aceste dimensiuni automate, merită să micșorați fotografiile înainte de încărcare:

• Dimensiune: o fotografie care pe site-ul dumneavoastră web 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, mărime a copiei de siguranță (backup) și timp de încărcare.
• Compresie: un JPEG cu calitatea 75 până la 85 arată pentru ochi aproape la fel ca unul cu calitatea 100, dar este adesea de două ori mai mic.
• Metadate: fotografiile de pe telefon conțin adesea locația GPS unde au fost făcute. Dacă nu doriți ca toată lumea să știe unde locuiți, eliminați-o înainte de încărcare. WordPress elimină multe metadate din dimensiunile micșorate, dar originalul le poate conține în continuare.

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

Ce format

Dacă serverul dumneavoastră nu poate procesa un format, WordPress afișează o eroare la încărcare sau nu creează dimensiunile mai mici. În Unelte > Sănătate site vedeți pe fila Informații, la Gestionare media, ce formate acceptă serverul dumneavoastră.

Lazy loading

Începând cu WordPress 5.5, imaginile primesc automat loading="lazy": browserul încarcă o imagine abia atunci când derulați până la ea. Astfel, o pagină lungă cu multe fotografii devine mult mai rapidă. WordPress lasă intenționat prima imagine mare din partea de sus a paginii fără lazy loading și îi acordă adesea prioritate cu fetchpriority="high", deoarece aceasta trebuie să fie vizibilă cât mai repede. Vom reveni la acest subiect în lecția 6.3.

Setați întotdeauna și lățimea și înălțimea unei imagini (WordPress face acest lucru pentru imaginile din Bibliotecă Media). Astfel browserul rezervă spațiul dinainte, iar textul nu sare când apare fotografia.

Textul alternativ: pentru cei care nu văd imaginea

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

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

• Rău: IMG_4032.jpg sau foto.
• Rău: magazin biciclete bicicletă e-bike cumpărare ieftin bicicletă (înșirarea de cuvinte-cheie nu ajută pe nimeni).
• Bun: Mecanic care reglează frânele unei biciclete electrice 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 sări. Gol nu înseamnă același lucru cu lipsă: la o imagine fără alt, un cititor de ecran citește adesea numele fișierului. O imagine care este un link (de exemplu un logo care duce la pagina principală) descrie unde duce linkul: Către pagina principală a magazinului de biciclete De Spaak.

În Bibliotecă Media setați textul alternativ la imaginea însăși, iar în editorul de blocuri la blocul Imagine. Atenție: un text alternativ completat în Bibliotecă Media nu se modifică automat la imaginile care sunt deja pe pagini.

Nume de fișiere și drepturi 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.
• Drepturi de autor: o imagine din Google Imagini nu poate fi folosită liber. Fotografii și băncile de imagini trimit 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.

Stocare și curățenie

Bibliotecă Media nu se curăță singură. O imagine pe care o scoateți de pe o pagină rămâne în bibliotecă și în uploads, cu toate dimensiunile ei. La un site web cu ani de conținut, acest lucru se adună. Faceți curățenie 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 a temei, într-un widget sau într-un e-mail). Faceți mai întâi o copie de siguranță (backup).

Rezumat

• WordPress creează din fiecare încărcare mai multe dimensiuni și micșorează fotografiile mari la 2.560 de pixeli; browserul alege prin srcset dimensiunea 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 deplasarea conținutului.
• Un text alternativ descrie ce transmite imaginea în context; o imagine pur decorativă primește un text alternativ gol.

Test (quiz)

Exercițiu

Exercițiul A4.4: Imagini de pe pagina dumneavoastră principală. Introduceți adresa site-ului dumneavoastră web. Programul citește pagina principală și analizează primele 20 de imagini: au un atribut alt (gol este permis, lipsa 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. Corectați ce apare cu roșu în Bibliotecă Media sau pe pagină și verificați din nou.

Lecturi suplimentare

Aceste articole descriu pașii din panourile WebOké; în alte panouri funcționează în mod 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, în engleză): https://wordpress.org/documentation/article/media-library-screen/
• Scrierea textelor alternative (W3C, în engleză): https://www.w3.org/WAI/tutorials/images/decision-tree/