Pri nasadzovaní webovej stránky vývojári zvyčajne používajú rovnaký obrázok pre všetky veľkosti obrazovky, čo nie je dobrý postup, pretože pri zmene veľkosti sa nemožno spoliehať na prehliadač. V takejto situácii nadobudnú účinnosť responzívne obrázky, ktoré zabezpečia, že sa obrázok stiahne vo vhodnej veľkosti a kvalite pre príslušné zariadenie, čím sa zvýši rýchlosť načítania stránky.
Ako zvýšiť rýchlosť načítania stránky pomocou responzívnych obrázkov?
Ak chcete zvýšiť rýchlosť načítania stránky pomocou responzívnych obrázkov, zvážte nasledujúce metodológie:
Príklad 1: Zvýšte rýchlosť načítania stránky pomocou responzívnych obrázkov pomocou atribútu „srcset“.
Najpohodlnejším prístupom k aplikácii responzívnych obrázkov môže byť použitie „ srcset ” atribút nahromadený v “ ” tag. Tento atribút umožňuje programátorovi špecifikovať rôzne veľkosti obrázkov a prehliadač automaticky vyberie najvhodnejší obrázok vzhľadom na veľkosť obrazovky používateľa. Nasleduje demonštrácia:
DOCTYPE html >
< html >
< hlavu >
< meta znakovú sadu = 'utf-8' >
< meta názov = 'výrez' obsahu = 'width=device-width, initial-scale=1' >
< titul > titul >
hlavu >
< telo >
< img src = 'F:\JOB TECHNICAL ARTICLES\imgre.png' všetko = 'Responzívny obrázok'
srcset = 'F:\JOB TECHNICAL ARTICLES\imgre.png 400w, F:\JOB TECHNICAL ARTICLES\imgre.png 800w, F:\JOB TECHNICAL ARTICLES\imgre.png 1200w'
/>
telo >
html >
V tomto kóde:
- ' srcset “ je zahrnutý atribút, ktorý obsahuje cestu obrázka a zakaždým rôzne šírky.
- Je to také, že obraz „ F:\JOB TECHNICAL ARTICLES\imgre.png 400w “ predstavuje cestu obrázka so šírkou „ 400 ” pixelov.
- Na základe týchto informácií prehliadač analyzuje najvhodnejší obrázok na stiahnutie na základe veľkosti obrazovky používateľa tak, aby menšie obrazovky zobrazovali menšie obrázky, čím sa šetrí šírka pásma.
Výkon
Príklad 2: Zvýšte rýchlosť načítania stránky prostredníctvom citlivých obrázkov zadaním rôznych hustôt pixelov
V tomto príklade bude určená dráha obrazu spolu s rôznymi hustotami pixelov pre displeje s vysokým rozlíšením. To sa dá dosiahnuť pomocou „ srcset “, uvedený nižšie:
DOCTYPE html >< html >
< hlavu >
< meta znakovú sadu = 'utf-8' >
< meta názov = 'výrez' obsahu = 'width=device-width, initial-scale=1' >
< titul > titul >
hlavu >
< telo >
< img src = 'F:\JOB TECHNICAL ARTICLES\imgre.png' všetko = 'Responzívny obrázok' srcset = 'F:\JOB TECHNICAL ARTICLES\imgre.png 1x, F:\JOB TECHNICAL ARTICLES\imgre.png 1,5x, F:\JOB TECHNICAL ARTICLES\imgre.png 2x'
/>
telo >
html >
V tomto úryvku kódu zadajte cestu k obrázku trikrát s rôznou hustotou pixelov. Je to také, že prehliadač sa rozhodne pre najvhodnejší/vhodný obrázok, aby bola zabezpečená špičková kvalita na rôznych obrazovkách.
Poznámka: ' 1x ” pixel je predvolená hodnota, takže si používateľ môže vybrať, či sa k ceste k obrázku priradí alebo nie.
Výkon
Príklad 3: Zvýšte rýchlosť načítania stránky pomocou responzívnych obrázkov pomocou atribútu „veľkosti“.
V niektorých situáciách môže existovať obmedzenie, keď sa skutočná veľkosť obrazu na obrazovke líši od šírky obrazovky. Na vyriešenie tohto problému „ veľkosti ” možno použiť na zahrnutie veľkosti obrázka vzhľadom na mediálne dopyty alebo pevnú veľkosť. Nižšie je ukážka kódu:
DOCTYPE html >< html >
< hlavu >
< meta znakovú sadu = 'utf-8' >
< meta názov = 'výrez' obsahu = 'width=device-width, initial-scale=1' >
< titul > titul >
hlavu >
< telo >
< img src = 'F:\JOB TECHNICAL ARTICLES\imgre.png' všetko = 'Responzívny obrázok' srcset = 'F:\JOB TECHNICAL ARTICLES\imgre.png 50w, F:\JOB TECHNICAL ARTICLES\imgre.png 800w, F:\JOB TECHNICAL ARTICLES\imgre.png 1200w'
veľkosti = '(max-width: 800px) 100vw, 800px'
/>
telo >
html >
V tomto bloku kódu je „ veľkosti ” integruje mediálne dopyty a veľkosti. Je taká, že vedie prehliadač, aby sa rozhodol pre veľkosť obrázka s ohľadom na šírku obrazovky používateľa. Tým sa zabezpečí, že obrázky nepresiahnu cieľovú maximálnu šírku.
Výkon
Dôležité úvahy pri používaní atribútu „veľkosti“.
Existujú určité obmedzenia pri používaní „ veľkosti “, ako je uvedené nižšie:
- Pri použití viacerých mediálnych dopytov v „ veľkosti “, uistite sa, že je zvolený prvý skutočný mediálny dopyt. Tiež sa uistite, že mediálne dotazy sú zoradené od najšpecifickejšieho po najmenej špecifické.
- Atribút „veľkosti“ nepodporuje percentuálne veľkosti, pretože prehliadač nevie, aké široké bude niečo špecifikované v percentách, kým nezistí šírku nadradeného prvku.
Príklad 4: Zvýšte rýchlosť načítania stránky pomocou responzívnych obrázkov pomocou prvku „
'
< html >
< hlavu >
< meta znakovú sadu = 'utf-8' >
< meta názov = 'výrez' obsahu = 'width=device-width, initial-scale=1' >
< titul > titul >
hlavu >
< telo >
< obrázok >
< zdroj médiá = '(maximálna šírka: 100 pixelov)' srcset = 'F:\JOB TECHNICAL ARTICLES\imgbanner.png' />
< img src = 'F:\PRACOVNÉ TECHNICKÉ ČLÁNKY\imgre.png' všetko = 'Responzívny obrázok' />
obrázok >
telo >
html >
Podľa týchto riadkov kódu:
- Uveďte „
“prvok, ktorý akumuluje “ ” pre rôzne obrázky a nechajte prehliadač, aby si vybral ten správny na základe veľkosti obrazovky používateľa. - Tiež, ak žiadne z „
“ prvky sú vhodné pre veľkosť obrazovky, obrázok špecifikovaný v „ Značka ” slúži ako záložná.
- Výsledkom je, že v nepredvídanom prípade sa pridá alternatívny obrázok, čím sa zachová zvýšená rýchlosť načítania stránky.
Výkon
Záver
Rýchlosť načítania stránky je možné zvýšiť pomocou responzívnych obrázkov pomocou „ srcset “, určujúci rôzne hustoty pixelov pomocou „ veľkosti alebo prostredníctvom atribútu „