Adăugarea de imagini la o pagină web a fost simplă. Ai adăuga img Etichetați la HTML, setați Src atribuit URL -ului adecvat și, sperăm, să scrie ceva informativ alt text. (S -ar putea să adăugați și unele CSS, fie în linie, fie printr -o foaie de stil.)
Este puțin mai complicat astăzi, tehnologia de monitorizare și browser schimbând cerințele, cel puțin dacă utilizați imagini raster (cum ar fi JPEG -uri, PNG și GIF -uri) și doriți ca lucrurile să arate bine pentru toate utilizatorii dvs. Ecranele de înaltă densitate de pe smartphone -uri au fost populare de ceva vreme, dar monitoarele 4K și 5K devin, de asemenea, mai accesibile. Pentru a face textul ușor de citit, acestea sunt adesea setate la o scalare de 200%, astfel încât un pixel măsurat să corespundă la 2 pixeli reali în fiecare dimensiune. ) Deci, ce putem face în acest sens?
Folosind srcset_temp Atribut
Din fericire, browserele au adăugat srcset_temp atribut pentru a facilita dezvoltatorul să specifice mai multe imagini de utilizat. Browserul alege apoi cea mai bună opțiune pentru un utilizator dat pe baza informațiilor furnizate în srcset_temp Atribute și informații pe care browserul le are deja despre dispozitivul pe care este vizualizată pagina. Cel mai simplu mod de a utiliza acest atribut este de a specifica o imagine care este de două ori mai mare în proprietatea SRCSET_TEMP alături de un marker „2x”. Prin convenție, numim imaginea mai mare la fel ca imaginea mai mică, dar cu @2x în nume chiar înainte de extensie:
(email protected) 2x" alt="Distript Plot of Age Vs Score. Linia de cea mai bună potrivire trece prin puncte, iar un anterior poate fi văzut la 28 de ani, scorul 40.">
Acest lucru spune browserului să servească imaginea de bază utilizatorilor cu ecrane „obișnuite” și imaginea mai mare celor cu ecrane scalate. Puteți adăuga, de asemenea, o versiune „3x” aici, dacă doriți, deși aceasta ar necesita o imagine cu de nouă ori mai mulți pixeli ca imaginea de bază. Dimensiunea reală a fișierului în memorie poate să nu fie de nouă ori mai mare decât cea a imaginii de bază datorită scalărilor algoritmilor de compresie bine, dar vor fi în continuare considerabil mai mari.
Deficiența cu sintaxa de mai sus este că nu este într -adevăr în mod corect. Acesta spune browserului să aleagă pe baza factorilor de scalare și nu pe dimensiunile reale ale imaginii redate. O imagine ar putea fi afișată pe 600 de pixeli „CSS” pe un ecran larg, precum un monitor de desktop și 300 de pixeli CSS pe unul mai restrâns, precum un telefon. Pentru un telefon cu 2 ori scalarea imaginii de 600 de pixeli ar arăta bine, dar browserul nu știe în mod inerent că imaginea de 1200 pixeli nu este necesară. Așadar, va încărca (probabil) imaginea de 1200 de pixeli, făcând încărcarea paginilor mai lentă decât este necesar și, eventual, să crească mai mult din datele mobile ale utilizatorului decât justificate.
Specificația pentru srcset_temp Oferă o alternativă care pare să rezolve această problemă: enumerați direct lățimile imaginilor disponibile specificând un număr și litera „W”:
Dacă browserul știe ce dimensiune img Elementul va fi redat, dimensiunile opțiunilor de imagine și densitatea pixelilor ecranului poate alege cea mai bună imagine pentru lucrare. Captura este că, cel puțin atunci când browserul vede img Etichetă pentru prima dată, nu va ști la ce dimensiune va fi redată decât dacă o spunem în mod specific. Putem face asta folosind dimensiuni atribut pe img element. Din păcate, pentru machete receptive, acest lucru poate fi foarte dezordonat și foarte confuz foarte repede.
Dacă doriți să intrați în gresia de a folosi srcset_temp cu dimensiuni Apoi, există un articol minunat despre trucurile CSS care intră în mai multe detalii decât avem spațiu aici. Să ne uităm, în schimb, la modalități alternative de reducere a sarcinii imaginilor mari.
Folosind grafică vectorială
Soluția care face viața ușoară … când este aplicabilă. În loc să utilizați un PNG (sau JPEG), utilizați un SVG – un grafic vectorial scalabil.
Avantajele SVG
În loc să stocheze date despre culorile a milioane de pixeli, aceste fișiere stochează un set de instrucțiuni pentru construirea unei imagini. Aceasta este de obicei soluția perfectă pentru logo -urile companiei și cele mai frecvente tipuri de diagrame, deoarece acestea pot fi scalate, oricum îți place tocmai pentru că sunt doar o listă de instrucțiuni. Nu este nevoie să serviți mai multe imagini.
Pot fi adăugate la pagină într -o serie de moduri, inclusiv utilizarea unui simplu img etichetă.
Cu un pic de JavaScript pot fi făcute interactive și sunt ușor de animat.
Deficiențele SVG
Sunt esențial inutile pentru imagini detaliate, cum ar fi fotografia.
Fonturile pot să nu fie redate corect atunci când sunt adăugate prin intermediul Src atributul unei etichete de imagine dacă acel font nu este deja pe sistemul utilizatorilor. Un lucru de lucru pentru aceasta este de a deschide un editor de imagini vectoriale și de a găsi opțiunea pentru a reda textul ca căi. În timp ce acest lucru va crește probabil dimensiunea fișierului și va provoca imperfecțiuni minore în redarea textului, poate fi mai problematic faptul că acest lucru adaugă un pas suplimentar în fluxul de lucru atunci când SVG -urile sunt generate în mod programat.
Exemplu ilustrativ
Utilizați controalele de mai jos pentru a schimba între formate de imagine și scalare pentru a vedea efectul. Ar trebui să fie evident că atunci când crești un PNG sau JPEG, imaginea devine mai încețoșată și că SVG, în cea mai mare parte, rămâne crocant indiferent de factorul de scară. (Puteți observa artefacte mici cu textul SVG atunci când sunt scalate. Acestea sunt văzute deoarece personajele sunt redate folosind căi SVG, mai degrabă decât fonturi, așa cum este descris în secțiunea anterioară.)
Folosind noi formate de imagine
Având în vedere cele de mai sus, este posibil să credeți că opțiunile de imagine disponibile pentru web arată așa ceva:
JPEG (cu compresie pierzătoare) pentru imagini cu (până la) milioane de culori;
PNG pentru imagini cu mari blocuri consistente de culori (cum ar fi logo -uri) sau imagini care necesită transparență;
SVG pentru grafică vectorială;
GIF pentru meme -ul tău animat preferat.
Dar pentru imagini care nu pot fi reprezentate cu ușurință în format vectorial, există mai multe formate mai noi de imagini raster: JPEG XL, WebP, Avif și Heic (aka Heif) care oferă o compresie mai bună (pierderi și fără pierderi) decât PNG, JPEG și GIF. Dintre aceste noi formate, numai WebP și AVIF au un suport semnificativ al browserului, dar acest suport este de fapt foarte bun: în prezent 95,4% pentru WebP și 93,5% pentru AVIF. De fapt, este posibil să credeți că sprijinul este suficient de bun pentru ca ambele formate să nu fie nevoie să ofere un avans. Cu toate acestea, dacă doriți, puteți utiliza picture şi source Elemente pentru a acoperi și mai multe browsere:
(email protected) 2x" type="image/webp">
În exemplul de mai sus folosim srcset_temp atribut pentru a furniza două dimensiuni diferite în formatul web și img Etichetă pentru a oferi un PNG Fallback pentru browserele mai vechi (presupunem că utilizatorii browserelor mai vechi nu folosesc ecrane moderne de înaltă definiție). alt Textul trebuie să fie încă inclus în img etichetă mai degrabă decât mutată în source sau picture etichete.
Când vine vorba de alegerea dintre WebP și AVIF, WebP are un suport al browserului mai bun, dar consensul este că AVIF oferă o mai bună compresie. Poate că acest lucru nu este surprinzător, deoarece este un format nou mult mai nou decât WebP, care de fapt transformă cincisprezece în 2025. Dezavantajul este că am găsit suport pentru AVIF în editarea instrumentelor pentru a fi mult mai mic decât pentru WebP. Totuși, acel peisaj se schimbă mereu. WebP are un alt avantaj față de AVIF: acceptă imagini cu pierderi cu Transparență Deci, dacă aveți nevoie de dimensiuni mici de imagine și transparență, este singurul format din oraș.
Atât WebP, cât și AVIF acceptă animația de imagine, dar, după cum veți vedea în secțiunea următoare, există o altă alternativă pentru înlocuirea vechiului nostru prieten GIF.
Exemplul de mai jos arată o imagine de 300 de pixeli a clădirii Catalyst din Newcastle, unde are sediul Riversul Jumping. Puteți alege între vizualizarea unui PNG fără pierderi, WebP fără pierderi, Lossy JPEG și o imagine WebP cu pierderi. Cele două formate fără pierderi ar trebui să arate la fel, dar imaginea WebP este cu aproximativ 20% mai mică în dimensiunea fișierului decât PNG. Imaginile pierzătoare au ambele niveluri de compresie „medii”, așa că ar trebui să fie de o calitate aproximativ comparabilă, dar nu identice (deoarece folosesc algoritmi de compresie diferiți). Imaginea WEBP LOSSY este doar o treime din dimensiunea fișierului JPEG!
Folosind videoclipuri în loc de GIF -uri
GIF -urile, în special GIF -urile animate, au fost o mare parte a culturii internetului. Cu toate acestea, acestea sunt un format foarte vechi, cu dimensiuni mari de fișiere și game de culori slabe.): Sunt limitate la un maxim de doar 256 de culori diferite de pixeli. Toate browserele moderne susțin video nativ prin intermediul video elementul și acestea oferă o compresie mult mai bună și palete uriașe de culori.
Aria-label atributul este folosit ca alt Textul unui img element. Celelalte atribute ar trebui să fie destul de auto-explicative: Autoplay spune browserului să redea automat videoclipul, buclă Pentru a bucla videoclipul din nou până la început când se termină și mut să nu joace vreun sunet. Acesta din urmă este necesar pentru că, din fericire, browserele nu vor mai fi videoclipuri cu sunet cu sunet.
Pentru actualizări și revizii la acest articol, consultați postarea originală
(email protected) 2x" alt="Distript Plot of Age Vs Score. Linia de cea mai bună potrivire trece prin puncte, iar un anterior poate fi văzut la 28 de ani, scorul 40.">
