În timpul implementării unui site web, dezvoltatorii utilizează de obicei aceeași imagine pentru toate dimensiunile ecranului, ceea ce nu este o practică bună, deoarece nu se poate baza pe browser pentru redimensionare. Într-o astfel de situație, imaginile receptive intră în vigoare, asigurând că imaginea este descărcată la dimensiunea și calitatea potrivită pentru dispozitivul corespunzător, sporind astfel viteza de încărcare a paginii.
Cum se mărește viteza de încărcare a paginii folosind imagini receptive?
Pentru a îmbunătăți viteza de încărcare a paginii prin intermediul imaginilor receptive, luați în considerare următoarele metodologii:
Exemplul 1: Îmbunătățiți viteza de încărcare a paginii prin imagini receptive utilizând atributul „srcset”
Cea mai convenabilă abordare pentru aplicarea imaginilor receptive poate fi utilizarea „ srcset „atribut acumulat în „ ' etichetă. Acest atribut permite programatorului să specifice diferite dimensiuni de imagine, iar browserul optează automat pentru cea mai potrivită imagine în funcție de dimensiunea ecranului utilizatorului. Mai jos este demonstrația:
DOCTYPE html >
< html >
< cap >
< meta set de caractere = 'utf-8' >
< meta Nume = 'vizor' conţinut = „width=device-width, initial-scale=1” >
< titlu > titlu >
cap >
< corp >
< img src = „F:\ARTICOLE TEHNICE LUCRĂRII\imgre.png” Tot = „Imagine receptivă”
srcset = „F:\ARTICLE TEHNICE DE LUCRĂRI\imgre.png 400w, F:\ARTICOLE TEHNICE DE LUCRĂRI\imgre.png 800w, F:\ARTICOLE TEHNICE DE LUCRĂRI\imgre.png 1200w”
/>
corp >
html >
În acest cod:
- „ srcset ” este inclus atributul care cuprinde calea imaginii și lățimi diferite de fiecare dată.
- Este de așa natură încât imaginea „ F:\JOB ARTICOLE TEHNICE\imgre.png 400w ” reprezintă o cale de imagine având o lățime de „ 400 ” pixeli.
- Pe baza acestor informații, browserul analizează cea mai potrivită imagine de descărcat în funcție de dimensiunea ecranului utilizatorului, astfel încât ecranele mai mici să afișeze imagini mai mici, economisind astfel lățimea de bandă.
Ieșire
Exemplul 2: Îmbunătățiți viteza de încărcare a paginii prin intermediul imaginilor receptive prin specificarea diferitelor densități de pixeli
În acest exemplu, calea imaginii va fi specificată împreună cu diferite densități de pixeli pentru afișajele de înaltă rezoluție. Acest lucru poate fi realizat prin intermediul „ srcset ” atribut, demonstrat mai jos:
DOCTYPE html >< html >
< cap >
< meta set de caractere = 'utf-8' >
< meta Nume = 'vizor' conţinut = „width=device-width, initial-scale=1” >
< titlu > titlu >
cap >
< corp >
< img src = „F:\ARTICOLE TEHNICE LUCRĂRII\imgre.png” Tot = „Imagine receptivă” srcset = „F:\ARTICLE TEHNICE DE LUCRĂRI\imgre.png 1x, F:\ARTICOLE TEHNICE DE LUCRĂRI\imgre.png 1,5x, F:\ARTICOLE TEHNICE DE LOCURI\imgre.png 2x”
/>
corp >
html >
În acest fragment de cod, specificați calea imaginii de trei ori cu densități diferite de pixeli. Este de așa natură încât browserul optează pentru imaginea cea mai potrivită/potrivită pentru a asigura calitate superioară pe diverse ecrane.
Notă: „ 1x ” pixelul este valoarea implicită, așa că este o alegere pentru utilizator să se asocieze cu calea imaginii sau nu.
Ieșire
Exemplul 3: Îmbunătățiți viteza de încărcare a paginii prin imagini receptive utilizând atributul „dimensiuni”
În unele situații, poate exista o limitare în care dimensiunea reală a imaginii de pe ecran variază de lățimea ecranului. Pentru a rezolva această problemă, „ dimensiuni Atributul ” poate fi utilizat pentru a include dimensiunea imaginii în raport cu interogările media sau o dimensiune fixă. Mai jos este demonstrația codului:
DOCTYPE html >< html >
< cap >
< meta set de caractere = 'utf-8' >
< meta Nume = 'vizor' conţinut = „width=device-width, initial-scale=1” >
< titlu > titlu >
cap >
< corp >
< img src = „F:\ARTICOLE TEHNICE LUCRĂRII\imgre.png” Tot = „Imagine receptivă” srcset = „F:\ARTICLE TEHNICE DE LUCRARE\imgre.png 50w, F:\ARTICOLE TEHNICE DE LUCRĂRI\imgre.png 800w, F:\ARTICOLE TEHNICE DE LUCRARE\imgre.png 1200w”
dimensiuni = „(lățimea maximă: 800px) 100vw, 800px”
/>
corp >
html >
În acest bloc de cod, „ dimensiuni ” atributul integrează interogările și dimensiunile media. Este de așa natură încât ghidează browserul să opteze pentru dimensiunea imaginii în raport cu lățimea ecranului utilizatorului. Acest lucru vă asigură că imaginea (imaginile) nu depășește lățimea maximă țintă.
Ieșire
Considerații importante la utilizarea atributului „dimensiuni”.
Există unele limitări în utilizarea „ dimensiuni ”, de asemenea, enumerate mai jos:
- Când utilizați mai multe interogări media în „ dimensiuni ”, asigurați-vă că prima interogare media adevărată este optată. De asemenea, asigurați-vă că interogările media sunt ordonate de la cel mai specific la cel mai puțin specific.
- Atributul „dimensiuni” nu acceptă dimensiuni procentuale, deoarece browserul nu știe cât de lățime va fi ceva specificat în procente până când este conștient de lățimea elementului părinte.
Exemplul 4: Îmbunătățiți viteza de încărcare a paginii prin imagini receptive utilizând elementul „
„
< html >
< cap >
< meta set de caractere = 'utf-8' >
< meta Nume = 'vizor' conţinut = „width=device-width, initial-scale=1” >
< titlu > titlu >
cap >
< corp >
< imagine >
< sursă mass-media = „(lățimea maximă: 100 px)” srcset = „F:\JOB TECHNICAL ARTICLES\imgbanner.png” />
< img src = „F:\ARTICOLE TEHNICE LUCRĂRII\imgre.png” Tot = „Imagine receptivă” />
imagine >
corp >
html >
Conform acestor linii de cod:
- Specifică '
” element care acumulează „ ” elemente pentru diferite imagini și lăsați browserul să opteze pentru cea potrivită în funcție de dimensiunea ecranului utilizatorului. - De asemenea, dacă niciunul dintre „
” elementele sunt potrivite pentru dimensiunea ecranului, imaginea specificată în „ ” eticheta servește ca o rezervă.
- În consecință, se adaugă o imagine alternativă într-un caz neprevăzut, menținând astfel viteza îmbunătățită de încărcare a paginii.
Ieșire
Concluzie
Viteza de încărcare a paginii poate fi îmbunătățită prin imagini receptive folosind „ srcset „, specificând diferite densități de pixeli, folosind „ dimensiuni „, sau prin „