Při nasazování webových stránek vývojáři obvykle používají stejný obrázek pro všechny velikosti obrazovky, což není dobrá praxe, protože na prohlížeč se nelze spolehnout při změně velikosti. V takové situaci vstoupí v platnost responzivní obrázky, které zajistí, že se obrázek stáhne ve vhodné velikosti a kvalitě pro odpovídající zařízení, čímž se zvýší rychlost načítání stránky.
Jak zvýšit rychlost načítání stránky pomocí responzivních obrázků?
Chcete-li zvýšit rychlost načítání stránky pomocí responzivních obrázků, zvažte následující metodiky:
Příklad 1: Zvýšení rychlosti načítání stránky pomocí responzivních obrázků pomocí atributu „srcset“.
Nejpohodlnějším přístupem k aplikaci responzivních obrázků může být použití „ srcset ” atribut nashromážděný v “ ” tag. Tento atribut umožňuje programátorovi specifikovat různé velikosti obrázků a prohlížeč automaticky vybere nejvhodnější obrázek s ohledem na velikost obrazovky uživatele. Následuje ukázka:
DOCTYPE html >
< html >
< hlava >
< meta znaková sada = 'utf-8' >
< meta název = 'výřez' obsah = 'width=device-width, initial-scale=1' >
< titul > titul >
hlava >
< tělo >
< img src = 'F:\JOB TECHNICAL ARTICLES\imgre.png' všechno = 'Responzivní obrázek'
srcset = 'F:\JOB TECHNICAL ARTICLES\imgre.png 400w, F:\JOB TECHNICAL ARTICLES\imgre.png 800w, F:\JOB TECHNICAL ARTICLES\imgre.png 1200w'
/>
tělo >
html >
V tomto kódu:
- ' srcset ” je zahrnut atribut, který obsahuje cestu obrázku a pokaždé jiné šířky.
- Je to takové, že obraz „ F:\JOB TECHNICAL ARTICLES\imgre.png 400w “ představuje cestu obrazu o šířce “ 400 ” pixelů.
- Na základě těchto informací prohlížeč analyzuje nejvhodnější obrázek ke stažení na základě velikosti obrazovky uživatele, takže menší obrazovky zobrazují menší obrázky, čímž šetří šířku pásma.
Výstup
Příklad 2: Zvýšení rychlosti načítání stránky prostřednictvím citlivých obrázků zadáním různých hustot pixelů
V tomto příkladu bude pro displeje s vysokým rozlišením specifikována dráha obrazu spolu s různými hustotami pixelů. Toho lze dosáhnout pomocí „ srcset ” atribut, ukázaný níže:
DOCTYPE html >< html >
< hlava >
< meta znaková sada = 'utf-8' >
< meta název = 'výřez' obsah = 'width=device-width, initial-scale=1' >
< titul > titul >
hlava >
< tělo >
< img src = 'F:\JOB TECHNICAL ARTICLES\imgre.png' všechno = 'Responzivní obrázek' srcset = 'F:\JOB TECHNICAL ARTICLES\imgre.png 1x, F:\JOB TECHNICAL ARTICLES\imgre.png 1,5x, F:\JOB TECHNICAL ARTICLES\imgre.png 2x'
/>
tělo >
html >
V tomto fragmentu kódu zadejte cestu obrázku třikrát s různou hustotou pixelů. Je to takové, že prohlížeč se rozhodne pro nejvhodnější/nejvhodnější obrázek, aby byla zajištěna špičková kvalita na různých obrazovkách.
Poznámka: ' 1x ” pixel je výchozí hodnota, takže si uživatel může vybrat, zda přidruží cestu k obrázku nebo ne.
Výstup
Příklad 3: Zvýšení rychlosti načítání stránky pomocí responzivních obrázků pomocí atributu „sizes“.
V některých situacích může existovat omezení, kdy se skutečná velikost obrazu na obrazovce liší od šířky obrazovky. Chcete-li tento problém vyřešit, „ velikosti Atribut ” lze použít k zahrnutí velikosti obrázku s ohledem na dotazy na média nebo pevné velikosti. Níže je ukázka kódu:
DOCTYPE html >< html >
< hlava >
< meta znaková sada = 'utf-8' >
< meta název = 'výřez' obsah = 'width=device-width, initial-scale=1' >
< titul > titul >
hlava >
< tělo >
< img src = 'F:\JOB TECHNICAL ARTICLES\imgre.png' všechno = 'Responzivní obrázek' srcset = 'F:\JOB TECHNICAL ARTICLES\imgre.png 50w, F:\JOB TECHNICAL ARTICLES\imgre.png 800w, F:\JOB TECHNICAL ARTICLES\imgre.png 1200w'
velikosti = '(max-width: 800px) 100vw, 800px'
/>
tělo >
html >
V tomto bloku kódu je „ velikosti ” integruje dotazy na média a velikosti. Je to takové, že vede prohlížeč k výběru velikosti obrázku s ohledem na šířku obrazovky uživatele. Tím zajistíte, že obrázky nepřekročí cílovou maximální šířku.
Výstup
Důležité úvahy při používání atributu „velikosti“.
Existují určitá omezení při používání „ velikosti Atribut ” je také uveden níže:
- Při použití více mediálních dotazů v „ velikosti ”, ujistěte se, že je vybrán první skutečný mediální dotaz. Také se ujistěte, že dotazy na média jsou seřazeny od nejkonkrétnějšího po nejméně konkrétní.
- Atribut „sizes“ nepodporuje procentuální velikosti, protože prohlížeč neví, jak široké bude něco zadané v procentech, dokud nezná šířku nadřazeného prvku.
Příklad 4: Zvýšení rychlosti načítání stránky pomocí responzivních obrázků pomocí prvku „
'
< html >
< hlava >
< meta znaková sada = 'utf-8' >
< meta název = 'výřez' obsah = 'width=device-width, initial-scale=1' >
< titul > titul >
hlava >
< tělo >
< obrázek >
< zdroj média = '(maximální šířka: 100 pixelů)' srcset = 'F:\JOB TECHNICAL ARTICLES\imgbanner.png' />
< img src = 'F:\JOB TECHNICAL ARTICLES\imgre.png' všechno = 'Responzivní obrázek' />
obrázek >
tělo >
html >
Podle těchto řádků kódu:
- Upřesněte „
'prvek, který akumuluje' ” prvky pro různé obrázky a nechte prohlížeč vybrat si ten správný na základě velikosti obrazovky uživatele. - Také, pokud žádná z „
” prvky jsou vhodné pro velikost obrazovky, obrázek specifikovaný v “ ” tag slouží jako záložní.
- To ve výsledku přidá alternativní obrázek v nepředvídaném případě, čímž se zachová zvýšená rychlost načítání stránky.
Výstup
Závěr
Rychlost načítání stránky lze zvýšit pomocí responzivních obrázků pomocí „ srcset “, určující různé hustoty pixelů pomocí „ velikosti ” nebo prostřednictvím “