Optimalizálja a képeket a Muwalk Web számára
Fotó: John Caroro.
A képek webes optimalizálása elengedhetetlen az oldalak gyors betöltéséhez a felhasználók böngészőiben.
A weboldalak 99% -án megjelenő képek egyike azoknak az elemeknek, amelyek leginkább lelassítják a betöltési időt. A gyors rakodási sebesség két okból is elsődleges:
- Pozitív felhasználói élményt nyújt, különösen akkor, ha egy weblapot mobil eszközről érünk el.
- Kerülje a szankciókat, amelyek korlátozhatják a webhely SEO-pozícionálását.
Mi az a képoptimalizálás az interneten?
A webes képek optimalizálásakor a fájlok három tulajdonságát vesszük figyelembe:
- Felbontás - a kép pixel/hüvelyk (dpi) vagy pont/hüvelyk (dpi) száma.
- Méret - a kép méretei - magasság szélesség szerint -, pixelben (px) kifejezve a web számára.
- Súly - a lemezfájl által elfoglalt hely, általában kilobájtban (kB).
A kép optimalizálása áll egy fájl megszerzésével a veszteségmentes képminőség a lehető legkisebb súly mellett.
Válassza ki a megfelelő képformátumot
Az alábbiakban áttekintjük a web fő képformátumait és azt, hogy mindegyiket mire használják.
JPEG formátum
A JPG vagy JPEG (Joint Photographic Experts Group) formátum egy tömörítési módszer, amely támogatja a CMYK, az RGB és a szürkeárnyalatos színmódokat, de nem támogatja a fóliákat.
A JPG megőrzi az RGB kép összes színinformációját, de az adatok szelektív elvetésével tömöríti a fájl méretét.
A magas tömörítési szint alacsonyabb képminőséget, az alacsony tömörítési szint pedig jobb képminőséget eredményez.
A JPG nagyszerű lehetőség nagy méretű, tömörített képek és fényképek megjelenítésére az interneten.
GIF formátum
A GIF (Graphics Interchange Format) formátum támogatja az átlátszóságot és akár 256 színt egyaránt képekben és animációkban.
A 256 színnél nagyobb képek GIF formátumba történő exportálása minőségromlást okoz.
A GIF formátum az animált képek megjelenítésének szokásos lehetősége.
PNG formátum
A PNG (Portable Network Graphics) formátum két típusból áll: PNG - 24 és PNG - 8. Mindkét formátum támogatja az átlátszó és félig átlátszó fóliákat.
A PNG - 24 több millió színmélységet biztosít, a PNG - 8 pedig 256 színt támogat.
A PNG formátum jó választás kis képek (például ikonok), háttér nélküli képek, logók és szöveget tartalmazó képek megjelenítésére az interneten.
WebP formátum
A Google által jelenleg nyílt forráskódban kifejlesztett WebP formátum célja, hogy a milliók színű grafikák következő szabványa legyen.
Ez a formátum támogatja az átlátszóságot, a veszteségmentes és veszteségmentes tömörítést, a grafikus animációkat, és jelentősen javítja a JPG, GIF és PNG formátumok tömörítési szintjét.
De nem minden jó, egyes webböngészőknek problémái vannak a WebP fájlok megjelenítésével, és egy második, biztonsági másolatú képet kell használni annak biztosításához, hogy a kép megjelenjen az interneten.
A Google érdeklődése a WebP formátum szabványosítása iránt, azzal a céllal, hogy egyre jobban felgyorsítsa a betöltési sebességet, ellentétben áll azzal a passzivitással, amelyet az olyan vállalatok mutatnak be, mint az Apple, a Microsoft vagy az Adobe, hogy elfogadják a formátumot.
Jelenleg az Adobe Photoshop nem engedélyezi natív exportálást WebP formátumba, ehhez telepítenie kell az ingyenes WebPShop plugint.
SVG formátum
Ennek a formátumoknak szentelt szakaszának befejezéséhez meg kell említeni, hogy az SVG vektorgrafikai formátum nem képfájl, hanem XML (Extensible Markup Language) fájlformátum.
Képek optimalizálása az internetre az Adobe Photoshop segítségével
A következő három blokkban - lépésről lépésre - áttekintjük, hogyan állítsuk be és exportáljuk a webhelyekhez optimalizált képfájlokat az Adobe Photoshop szoftverrel.
1. Állítsa be a képfelbontást
Az első lépés, amelyet a képminőség felbontásának a szükséges minimálisra való csökkentésére kell tennünk.
A 72 dpi a web minimális képfelbontása, minőségromlás nélkül.
A fájl felbontásának módosításához el kell érnünk a Kép/Képméret opciót a Photoshop felső menüjéből, vagy meg kell nyomnunk az «Option + Command + I» billentyűkombinációt.
A kép méreteinek és felbontásának elérési útja az Adobe Photoshop alkalmazásban.
Ezután megnyílik egy ablak, amelyben beállíthatjuk a kép felbontását - szükség esetén 72 dpi-re csökkentve - és a fénykép méretét is, amelyet a következő szakaszban kezelünk.