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.

Információs ablak a kép méreteivel és felbontásával az Adobe Photoshop alkalmazásban.

2. Állítsa be a kép méretét a weben megtekinthető maximális mérethez

A professzionális weboldalak "adaptív vagy adaptív kialakítást" kínálnak azoknak az eszközöknek a képernyőméretéhez, amelyekből a felhasználók hozzáférnek. A képek egyes eszközökön történő megjelenítésének mérete pedig csak a weboldal kialakításától függ.

Ezért kényelmes beállítani a kép méreteit (magasság és szélesség) a legnagyobb böngészőben megjelenített méretre.

Az előző szakasz ugyanabban az ablakában - amelyben módosíthatjuk a kép felbontását - csökkenthetjük a kép méretét a maximális megjelenítési méretre.

Célszerű az «Újra» funkciót «Automatikus» módban tartani, és használni a «Vágás» eszközt, ha ugyanezt kell tennie a képpel is.

Ha nem ismeri a webtervben meghatározott megjelenítési méretet, akkor FTP-n keresztül hozzáférhet és áttekintheti a CSS fájlt, vagy a böngésző "ellenőrzőjével" megtudhatja.

Útvonal az "Ellenőr" eszközhöz a Chrome böngészőben.

3. Exportálja a képet

Az Adobe Photoshop alkalmazásban a képfájlokat az "Exportálás" opcióból kell beszerezni.

Hogyan NEM kaphat optimalizált képet a Photoshop alkalmazásban

Nem szabad használni a "Mentés" vagy a "Mentés másként" opciókat, mert - még azonos konfiguráció esetén is - ezek a "Mentés" opciók nagyobb súlyú fájlokat hoznak létre, mint az "Exportálás" funkcióval nyert fájlok. .

Éppen ellenkezőleg, az "Exportálás" opció használatakor mindezek az adatok kikerülnek, és a kapott fájl mérete kisebb.

Webre optimalizált képek exportálásának lehetőségei

A Photoshop felső menüjének Fájl/Export útvonala az "Exportbeállítások" és a képfájlok exportálásának különféle lehetőségeit mutatja.

A képek webes optimalizálásával kapcsolatos lehetőségek a következők:

  • Gyors exportálás ...
  • Exportálás ...
  • Exportálási beállítások ...
  • Mentés az internetre (régi) ...
Kép exportálási lehetőségeinek elérési útja az Adobe Photoshop alkalmazásban.

Először áttekintjük a fő opciót, az "Exportálás ..." elemet, majd folytatjuk az említett három másik lehetőség felülvizsgálatát.

3.1. "Exportálás ..." opció

Amint a felbontás (72 dpi) és a kép mérete (a szükséges magasság és szélesség szükséges px-ben) megmarad, csak az exportálási beállításokat kell módosítani a fájl súlyának csökkentése érdekében.

Az «Export As ...» információs ablak (lásd alább) a kép előnézetét mutatja, két oszloppal, mindkét oldalon egyet, amelyben módosíthatunk bizonyos tulajdonságokat, amelyeket alább átnézünk.

Mássz fel mindent

A bal oldali oszlopban módosíthatjuk a kép «méretarányát». De a kép méretének előzetes módosítása után tanácsos a méretarányt 1x-en tartani.

A bal oszlop a kép aktuális súlyát is mutatja (az alsó kép súlya 110,5 kB). A kép súlyának megfigyelése azért fontos, mert a formátum választásunktól és az egyéb exportálási lehetőségektől függően változik.

Az Adobe Photoshop «Exportálás ...» funkciójának információs ablaka.

Képbeállítások

A jobb oldali oszlopban kiválasztjuk a fájlformátumot, ahová exportáljuk a képet, és néhány kapcsolódó tulajdonságot JPG ("Minőség") és PNG ("Átlátszóság" és "8 bites fájl") formátumok esetén.

Képméret

Ez a blokk a kép méreteit és a méretarányt mutatja. Ha a kép méretei a weben történő megtekintéshez a maximális méretre lettek beállítva, akkor a méretaránynak 100% -ot kell fenntartania.

Funkcióban «Új minta» o Új mintavételezéshez ajánlott a "Automatic Bicubic" opció. Ez az opció kiválasztja a képhez a megfelelő kétkocka mintavételi módszert.

A bicubic opció egy precíz újramintavételi módszer, amely pixeleket ad hozzá - a szomszédos pixelek értékeinek vizsgálata alapján - simább tonális gradiensek előállításához.

Vászonméret

A vászon a Photoshop munkaterülete, amelyhez rétegeket adunk. Általános szabály, hogy az exportálási folyamat során a vászon mérete nem változik, és megegyezik a kép méretével.

Metaadatok

A szerzői és kapcsolattartási információkra vonatkozó metaadatok hozzáadása vagy nem hozzáadása minden szerző feladata.

Nagyobb mennyiségű metaadat nagyobb fájlt eredményez; bár az információs metaadatok általában nem foglalnak nagy helyet a fájlban.

Színtér

Az ajánlás az alapértelmezett "Konvertálás sRGB -vé" (normál piros zöld kék) opció fenntartása. Ezt a színteret azok az eszközök használják, amelyek fényt használnak a színek összeállításához, például a számítógépek, okostelefonok és táblagépek képernyőin és monitorain.

Ugyanígy ajánlatos aktiválni a "Színprofil beágyazása" opciót. Ez az opció csak kb. 3 kB-ot tesz hozzá, és lehetővé teszi, hogy a szerkesztés során használt színprofilokat megfelelően értelmezzék a képünket lekérő szoftverek, eszközök és képernyők.

3.2. "Gyors exportálás másként ..." opció

A "Gyors exportálás" opció az "Exportálás beállításai" opcióban kiválasztott beállításokat alkalmazza.

Ez a szolgáltatás akkor hasznos, ha gyakran ugyanazokat a beállításokat használja képek exportálásához. Tehát az «Exportálási beállítások» konfigurálásakor előre be van állítva a «Gyors exportálás».

3.3. "Beállítások exportálása ..." opció

Az előző részben említett «Exportbeállítások» a Fájl/Export/Export beállítások elérési útvonalának követésével módosulnak a felső menüből.

Példa "Gyors exportálási beállításokra" a weboptimalizált képekhez JPG formátumban.

3.4. „Mentés webre (régi) ...” lehetőség

A "Mentés webre" opciót - az elavult ImageReady termékből - nem frissítik új funkciók, és ezért az Adobe hozzáadta a "Legacy" címkét.

Információs ablak az Adobe Photoshop "Mentés webre (régi) ..." funkciójához.

Ennek ellenére ez a lehetőség továbbra is működik a Photoshop alkalmazásban, és az Adobe arról számolt be, hogy nem távolítja el a „Mentés webre” opciót anélkül, hogy új és továbbfejlesztett munkafolyamatban biztosítaná ezeket a lehetőségeket.

Optimalizálja a képeket az internetre a minőség romlása nélkül

Összefoglalva és amint az oktatóanyagon keresztül láthattuk, egy kép webes optimalizálásához meg kell változtatni a felbontás, a méretek, a Formátum és a exportálási lehetőségek képből.

Ez a négy tulajdonság - függetlenül attól, hogy Adobe Photoshop szoftvert használunk-e - azokra kell figyelnünk, hogy megtaláljuk a tökéletes egyensúly a minőség és a súly között a képek.