A képek betöltése egy SoftFluent webhelyre

A weboldalak évről évre egyre nehezebbek. Hogy meggyőzze magát, megnézheti ezt a Tammy Everts által készített grafikát a Soasta blogon.

Mint látható, a képek az oldal teljes súlyának alig több mint 60% -át teszik ki. Ennek oka az, hogy a kapcsolatok egyre gyorsabbak, ezért a weboldalkészítők megengedik maguknak, hogy újabb és újabb képeket adjanak az oldalak illusztrálására. De ezt a nehézséget sajnos számos negatív pont kíséri, többek között:

A képátvitel elfoglalja a szerver sávszélességét
Az oldalak betöltése hosszabb ideig tart
További költségek a tárhelyért, ha fizet a kötetért (tárhely és sávszélesség)
További költségek az ügyfél számára, ha térfogatban fizetünk

Hogyan lehet ezt orvosolni ?

Tömörítse a képeket

Az első megoldás a képek méretének csökkentése az elfogadható minőség fenntartása mellett. Ehhez olyan formátumokat kell használnia, amelyek jó tömörítési arányt kínálnak, és amelyeket a különböző böngészők támogatnak. A PNG vagy JPG formátum jó jelölt. Különböző technikáknak köszönhetően, például a kép színpalettájának csökkentése, jobb tömörítési arány érhető el anélkül, hogy vizuálisan elveszítené a minőséget (ne felejtse el ellenőrizni a megjelenítést). Különböző webszolgáltatások vagy szoftverek léteznek a képek tömörítésére: tinyjpg, tinypng, jpegmini, compressor.io. Ha Grunt, Gulp vagy bármely más Node alapú megoldást használ, vannak megoldások is: imagemin (Node), grunt-hozzájárulás-imagemin (Grunt), gulp-imagemin (Gulp).

Az alábbi példában a második kép majdnem 3-szor könnyebb:

Egy másik megoldás az, ha vektorképeket használunk, amikor csak lehetséges, és van nyereség. Egy vektorkép geometriai primitívekkel (pontok, vonalak, Bézier-görbék stb.) Írja le a képet. Ezért megértjük, hogy egy komplex kép nehezebb lehet vektorban, mint pixelezett (Bitmap/Raster). A böngészők döntő többsége támogatja az SVG formátumot (forrás: Használhatom). Például a SoftFluent logó (az oldal bal felső sarkában) egy SVG, a PNG kép hibája esetén pedig tartalék.

Adjon meg egy képet a megfelelő méretben

A 2. lépés a megfelelő méretű kép biztosítása. Nincs értelme 1000 képpont szélességű képet megadni, majd CSS-en keresztül átméretezik 200 képpontra. Ez egy rögzített méretű kép esetében nagyon egyszerű, de ha adaptív webhelyet szeretne létrehozni, akkor a legjobb képet nehezebb elküldeni. A HTML5 továbbra is kínál megoldásokat, nevezetesen az srcset attribútummal, amely lehetővé teszi a böngésző számára, hogy a képernyőméret és a pixelsűrűség használatával betöltse az ügyfélnek leginkább megfelelő képet: