Egy webhely telepítése során a fejlesztők általában ugyanazt a képet használják minden képernyőmérethez, ami nem jó gyakorlat, mivel a böngészőre nem lehet számítani az átméretezésnél. Ilyen helyzetben a reszponzív képek érvénybe lépnek, biztosítva, hogy a kép a megfelelő eszköznek megfelelő méretben és minőségben kerüljön letöltésre, ezáltal növelve az oldalbetöltési sebességet.
Hogyan lehet növelni az oldalbetöltési sebességet reszponzív képekkel?
Az oldalbetöltés sebességének reszponzív képekkel történő növeléséhez vegye figyelembe a következő módszereket:
1. példa: Növelje az oldalbetöltési sebességet reszponzív képekkel az „srcset” attribútum használatával
A reszponzív képek alkalmazásának legkényelmesebb módja a „ srcset ' attribútum felhalmozódott a ' ” címke. Ez az attribútum lehetővé teszi a programozó számára, hogy különböző képméreteket adjon meg, és a böngésző automatikusan kiválasztja a legmegfelelőbb képet a felhasználó képernyőméretéhez képest. A bemutató a következő:
DOCTYPE html >
< html >
< fej >
< meta karakterkészlet = 'utf-8' >
< meta név = 'nézőablak' tartalom = 'width=device-width, kezdeti lépték=1' >
< cím > cím >
fej >
< test >
< img src = 'F:\MUNKÁSTECHNIKAI CIKKEK\imgre.png' minden = 'Reszponzív kép'
srcset = 'F:\MUNKÁSTECHNIKAI CIKKEK\imgre.png 400w, F:\MUNKÁSTECHNIKAI CIKKEK\imgre.png 800w, F:\MUNKÁSTECHNIKAI CIKKEK\imgre.png 1200w'
/>
test >
html >
Ebben a kódban:
- A ' srcset ” attribútum szerepel, amely a kép elérési útját és minden alkalommal különböző szélességét tartalmazza.
- Olyan, hogy a kép ' F:\MUNKÁSTECHNIKAI CIKKEK\imgre.png 400w '' olyan képútvonalat jelent, amelynek szélessége ' 400 ” pixel.
- Ezen információk alapján a böngésző elemzi a legmegfelelőbb letölthető képet a felhasználó képernyőmérete alapján úgy, hogy a kisebb képernyőkön kisebb képek jelenjenek meg, ezáltal sávszélességet takarítson meg.
Kimenet
2. példa: Növelje az oldalbetöltési sebességet reszponzív képekkel különböző képpontsűrűség megadásával
Ebben a példában a képútvonalat a különböző pixelsűrűségekkel együtt adjuk meg a nagy felbontású megjelenítésekhez. Ezt a „ srcset ” attribútum, alább látható:
DOCTYPE html >< html >
< fej >
< meta karakterkészlet = 'utf-8' >
< meta név = 'nézőablak' tartalom = 'width=device-width, kezdeti lépték=1' >
< cím > cím >
fej >
< test >
< img src = 'F:\MUNKÁSTECHNIKAI CIKKEK\imgre.png' minden = 'Reszponzív kép' srcset = 'F:\MUNKÁSTECHNIKAI CIKKEK\imgre.png 1x, F:\MUNKÁSTECHNIKAI CIKKEK\imgre.png 1,5x, F:\MUNKÁSTECHNIKAI CIKKEK\imgre.png 2x'
/>
test >
html >
Ebben a kódrészletben háromszor adja meg a kép útvonalát változó pixelsűrűséggel. Ez olyan, hogy a böngésző a legmegfelelőbb/legmegfelelőbb képet választja, hogy kiváló minőséget biztosítson a különböző képernyőkön.
Jegyzet: A ' 1x ” pixel az alapértelmezett érték, így a felhasználó döntheti el, hogy társítja-e a kép elérési útját vagy sem.
Kimenet
3. példa: Növelje az oldalbetöltési sebességet reszponzív képekkel a „méretek” attribútum használatával
Bizonyos helyzetekben korlátozások léphetnek fel, ha a képernyőn látható tényleges képméret eltér a képernyő szélességétől. A probléma megoldása érdekében a „ méretek ” attribútum használható a képméret megadására a médialekérdezésekhez vagy egy rögzített mérethez. Alább látható a kód bemutató:
DOCTYPE html >< html >
< fej >
< meta karakterkészlet = 'utf-8' >
< meta név = 'nézőablak' tartalom = 'width=device-width, kezdeti lépték=1' >
< cím > cím >
fej >
< test >
< img src = 'F:\MUNKÁSTECHNIKAI CIKKEK\imgre.png' minden = 'Reszponzív kép' srcset = 'F:\MUNKÁSTECHNIKAI CIKKEK\imgre.png 50w, F:\MUNKÁSTECHNIKAI CIKKEK\imgre.png 800w, F:\MUNKÁSTECHNIKAI CIKKEK\imgre.png 1200w'
méretek = '(max. szélesség: 800 képpont) 100vw, 800px'
/>
test >
html >
Ebben a kódblokkban a „ méretek ” attribútum integrálja a médialekérdezéseket és a méreteket. Olyan, hogy a böngészőt a képméret kiválasztásához irányítja a felhasználó képernyő szélességéhez képest. Ez biztosítja, hogy a kép(ek) ne haladják meg a megcélzott maximális szélességet.
Kimenet
Fontos szempontok a „méretek” attribútum használatakor
Vannak bizonyos korlátozások a ' méretek ” attribútum, valamint az alábbiakban felsorolt:
- Ha több médialekérdezést használ a „ méretek ” attribútumot, győződjön meg arról, hogy az első valódi médialekérdezés van kiválasztva. Győződjön meg arról is, hogy a médialekérdezések a legspecifikusabbtól a legkevésbé specifikusakig vannak rendezve.
- A „size” attribútum nem támogatja a százalékos méreteket, mivel a böngésző nem tudja, hogy a százalékban megadott érték milyen széles lesz, amíg nem ismeri a szülőelem szélességét.
4. példa: Növelje az oldalbetöltési sebességet reszponzív képekkel a „
A '
< html >
< fej >
< meta karakterkészlet = 'utf-8' >
< meta név = 'nézőablak' tartalom = 'width=device-width, kezdeti lépték=1' >
< cím > cím >
fej >
< test >
< kép >
< forrás média = '(max. szélesség: 100 képpont)' srcset = 'F:\MUNKÁSTECHNIKAI CIKKEK\imgbanner.png' />
< img src = 'F:\MUNKÁSTECHNIKAI CIKKEK\imgre.png' minden = 'Reszponzív kép' />
kép >
test >
html >
Ezen kódsorok szerint:
- Adja meg a „
' elem, amely felhalmozza a ' ” elemeket a különböző képekhez, és hagyja, hogy a böngésző a felhasználó képernyőmérete alapján válassza ki a megfelelőt. - Továbbá, ha a „
” elemei megfelelőek a képernyő méretéhez, a „ ” címke tartalékként szolgál.
- Ez előre nem látható esetben egy alternatív képet ad hozzá, fenntartva ezzel a megnövelt oldalbetöltési sebességet.
Kimenet
Következtetés
Az oldal betöltési sebessége reszponzív képekkel növelhető a „ srcset ” attribútum, amely különböző pixelsűrűségeket ad meg, a „ méretek ” attribútum, vagy a „