Mentre despleguen un lloc web, els desenvolupadors solen utilitzar la mateixa imatge per a totes les mides de pantalla, cosa que no és una bona pràctica, ja que no es pot confiar en el navegador per canviar la mida. En aquesta situació, les imatges responsives entren en vigor garantint que la imatge es descarregui amb la mida i la qualitat adequades per al dispositiu corresponent, millorant així la velocitat de càrrega de la pàgina.
Com millorar la velocitat de càrrega de la pàgina utilitzant imatges responsives?
Per millorar la velocitat de càrrega de la pàgina mitjançant imatges responsives, tingueu en compte les metodologies següents:
Exemple 1: millora la velocitat de càrrega de la pàgina mitjançant imatges responsives utilitzant l'atribut 'srcset'
L'enfocament més convenient per aplicar imatges sensibles pot ser utilitzar el ' srcset 'atribut acumulat a l'' ' etiqueta. Aquest atribut permet al programador especificar diferents mides d'imatge i el navegador opta automàticament per la imatge més adequada pel que fa a la mida de la pantalla de l'usuari. A continuació es mostra la demostració:
DOCTYPE html >
< html >
< cap >
< meta conjunt de caràcters = 'utf-8' >
< meta nom = 'mirador' contingut = 'amplada=amplada del dispositiu, escala inicial=1' >
< títol > títol >
cap >
< cos >
< img src = 'F:\JOB ARTICLES TÈCNICS\imgre.png' tot = 'Imatge sensible'
srcset = 'F:\ARTICLES TÈCNICS DEL TREBALL\imgre.png 400w, F:\ARTÍCULS TÈCNICS DEL TREBALL\imgre.png 800w, F:\ARTICLES TÈCNICS DEL TREBALL\imgre.png 1200w'
/>
cos >
html >
En aquest codi:
- El ' srcset ” s'inclou l'atribut que inclou el camí de la imatge i diferents amplades cada vegada.
- És tal que la imatge ' F:\ARTICLES TÈCNICS DEL TREBALL\imgre.png 400w ' representa un camí d'imatge amb una amplada de ' 400 ” píxels.
- A partir d'aquesta informació, el navegador analitza la imatge més adequada per descarregar en funció de la mida de la pantalla de l'usuari, de manera que les pantalles més petites mostren imatges més petites, conservant així l'amplada de banda.
Sortida
Exemple 2: millora la velocitat de càrrega de la pàgina mitjançant imatges responsives especificant diferents densitats de píxels
En aquest exemple, s'especificarà el camí de la imatge juntament amb diferents densitats de píxels per a pantalles d'alta resolució. Això es pot aconseguir mitjançant el ' srcset ', que es mostra a continuació:
DOCTYPE html >< html >
< cap >
< meta conjunt de caràcters = 'utf-8' >
< meta nom = 'mirador' contingut = 'amplada=amplada del dispositiu, escala inicial=1' >
< títol > títol >
cap >
< cos >
< img src = 'F:\JOB ARTICLES TÈCNICS\imgre.png' tot = 'Imatge sensible' srcset = 'F:\ARTICLES TÈCNICS DEL TREBALL\imgre.png 1x, F:\ARTICLES TÈCNICS DEL TREBALL\imgre.png 1.5x, F:\ARTICLES TÈCNICS DEL TREBALL\imgre.png 2x'
/>
cos >
html >
En aquest fragment de codi, especifiqueu el camí de la imatge tres vegades amb diferents densitats de píxels. És tal que el navegador opta per la imatge més adequada/adequada per garantir la màxima qualitat en diverses pantalles.
Nota: El ' 1x ” píxel és el valor predeterminat, per la qual cosa l'usuari pot associar-lo o no amb el camí de la imatge.
Sortida
Exemple 3: millora la velocitat de càrrega de la pàgina mitjançant imatges responsives utilitzant l'atribut 'mida'
En algunes situacions, pot haver-hi una limitació en què la mida real de la imatge a la pantalla varia de l'amplada de la pantalla. Per abordar aquest problema, el ' mides L'atribut ” es pot utilitzar per incloure la mida de la imatge respecte a les consultes de mitjans o una mida fixa. A continuació es mostra la demostració del codi:
DOCTYPE html >< html >
< cap >
< meta conjunt de caràcters = 'utf-8' >
< meta nom = 'mirador' contingut = 'amplada=amplada del dispositiu, escala inicial=1' >
< títol > títol >
cap >
< cos >
< img src = 'F:\JOB ARTICLES TÈCNICS\imgre.png' tot = 'Imatge sensible' srcset = 'F:\ARTICLES TÈCNICS DEL TREBALL\imgre.png 50w, F:\ARTICLES TÈCNICS DEL TREBALL\imgre.png 800w, F:\ARTICLES TÈCNICS DEL TREBALL\imgre.png 1200w'
mides = '(amplada màxima: 800 px) 100 vw, 800 px'
/>
cos >
html >
En aquest bloc de codi, el ' mides L'atribut integra les mides i consultes de mitjans. És tal que guia el navegador a optar per la mida de la imatge respecte a l'amplada de la pantalla de l'usuari. Això garanteix que les imatges no superin l'amplada màxima objectiu.
Sortida
Consideracions importants en utilitzar l'atribut 'mida'.
Hi ha algunes limitacions en l'ús del ' mides ”atribut també es mostra a continuació:
- Quan utilitzeu diverses consultes multimèdia a la secció “ mides ”, assegureu-vos que s'hagi activat la primera consulta de mitjans reals. A més, assegureu-vos que les consultes de mitjans estiguin ordenades de més específica a menys específica.
- L'atribut 'talles' no admet les mides percentuals, ja que el navegador no sap l'amplada d'alguna cosa especificada en percentatges fins que no coneix l'amplada de l'element principal.
Exemple 4: millora la velocitat de càrrega de la pàgina mitjançant imatges responsives mitjançant l'element '
El '
< html >
< cap >
< meta conjunt de caràcters = 'utf-8' >
< meta nom = 'mirador' contingut = 'amplada=amplada del dispositiu, escala inicial=1' >
< títol > títol >
cap >
< cos >
< imatge >
< font mitjans de comunicació = '(amplada màxima: 100 píxels)' srcset = 'F:\JOB ARTICLES TÈCNICS\imgbanner.png' />
< img src = 'F:\ARTICLES TÈCNICS DEL TREBALL\imgre.png' tot = 'Imatge sensible' />
imatge >
cos >
html >
Segons aquestes línies de codi:
- Especifiqueu el '
” element que acumula el “ ” elements per a diferents imatges i deixar que el navegador opti per l'adequat en funció de la mida de la pantalla de l'usuari. - A més, si cap dels ' ” elements són adequats per a la mida de la pantalla, la imatge especificada a la “
” L'etiqueta serveix com a alternativa.
- Això afegeix una imatge alternativa en un cas imprevist, mantenint així la velocitat de càrrega de la pàgina millorada.
Sortida
Conclusió
La velocitat de càrrega de la pàgina es pot millorar mitjançant imatges responsives mitjançant el ' srcset ', que especifica diferents densitats de píxels, utilitzant el ' mides ', o mitjançant l'atribut '