Hogyan mentsünk Photoshopból WEBP-t?

2020.02.14

Mentés WEBP formátumba

Mostanában terjedt el a WEBP formátum. Írtunk is már róla, és ahogy ígértük előző cikkünkben most további infót adunk a WEBP formátumról, pontosabban arról, hogyan hozd létre.

Mert, ha már a mobilbarát weboldalra törekszik minden jóra való ember, akkor ez az info nektek, és mindenkinek: „Must have"!

Gondolom próbáltátok már a kép kimentési funkciót Photoshopban, és arra is rájöttetek, hogy alapértelmezésként - sajnos - nincs a PS-ben olyan fájl mentési mód, hogy WEBP.

A jó hír viszont az, hogy ez a probléma könnyen orvosolható.

Íme, mutatjuk hogyan ments Photoshopból WEBP formátumot:

  • Töltsd le az alábbi linkről a WebP plugint. Photoshop WEBP plugin
  • Zárd be a Photoshopot!
  • Másold a Photoshop "plugin" könyvtárába a kicsomagolt 32, vagy 64-bit-es mappát, illetve annak tartalmát.
  • Indítsd el a Photoshopot.
  • Így kép mentésénél a választható formátumok között már elérhető lesz a WEBP.

Mentéskor mire figyelj?

  • A webp formátumba mentés, nem jár automatikusan kisebb fájlmérettel, mint a kiindulási állapot.
  • Ha a META adatokat nem mented bele a képbe, jelentősen tudod csökkenteni a WEBP fájl méretét!
  • Ha áttetsző képet, pl. PNG-t mentessz Webp formáumba, és fontos, hogy az áttetszőség maradjon, akkor a mentéskor a pluginnál a Transparency opciót. (Csatoltuk a képet.)
  • Weben mire figyelj?
  • Ha a weboldalad átirányítást használ, akkor a WEBP formátumot ki kell venned az átirányításból (htaccess), pl. így : RewriteRule .(xml|ico|eot|svg|ttf|woff|otf|js|css|map|zip|gif|jpe?g|png|webp)$ - [L]
  • Ha adott böngésző nem támogatja a WEBP formátumot, – A Chrome szerencsére nem ilyen – akkor pl., így célszerű elhelyezned a forráskódot az oldaladban : <picture> <source srcset="img/awesomeWebPImage.webp" type="image/webp"> <source srcset="img/creakyOldJPEG.jpg" type="image/jpeg"> <img src="img/creakyOldJPEG.jpg" alt="Alt Text!"> </picture>

Ha egyéb kérdésed merül fel a témával kapcsolatban : jelezd!

Szerző: Ambrus László | immi.hu