Autor Zpráva
barkel
Profil
Pozerám že webp zaberá zhruba 30% miesta v porovnaní s JPG pri rovnakej subjektívnej kvalite. Okrem toho webp je podporovaný všade okrem Safari. Takže by sa ním dal ušetriť traffic.

Poprosím dáky skript ktorý keď zistí že prehliadač podporuje webp tak skonvertuje jpg obrázok na webp (ak už predtým nebol skonvertyovaný) a pošle ho prehliadaču namiesto JPG alebo PNG.
Radek9
Profil
Co přesně čekáš, že uděláme? Že za tebe budeme googlit nebo něco programovat? Ani jsi neuvedl, v jakém prostředí se to snažíš udělat.
Bubák
Profil
barkel:
Pozerám že webp zaberá zhruba 30% miesta v porovnaní s JPG pri rovnakej subjektívnej kvalite.
To ses koukal na vlastní oči, nebo ses koukal, co se kde píše?

Dáky ňáky skript si najdi.

PMG je dost specifický formát a pokud je použitý správně, tak konverzí do webp neužetžíš data a ještě pošleš návštěvníkovi mazaninu.
Vím, že existuje specifická verze webp, lossless webp, která se někdy hodí, namísto PNG.
Keeehi
Profil
barkel:
Mělo by stačit si zkontrolovat hlavičku accept. Pokud prohlížeč webp podporuje, měl by to v ní uvést.
if( strpos( $_SERVER['HTTP_ACCEPT'], 'image/webp' ) !== false ) {
    // webp is supported!
} else {
    // webp is not supported
}
barkel
Profil
Radek9:

Najlepšie by to bolo riešiť priamo na úrovni webového servera. Chcem to pre všetky appky (niektoré sú postavené na .NET core, niektoré na klasickom .NET framework-u a jedna na PHP. A hľadám najmenej pracné riešenie. Rozmýšlam že si na statický obsah nakódim nejaký jednoduchý serverík s cache ktorý bude sledovať dátumy úprav pri obrázkoch a ak napríklad webp bude starší ako originál tak sa vygeneruje nový, a hodím tam všetky obrázky. Len tým nepokryjem úplne všetko nakolko pri dvoch projektoch mám obrázky kompletne uložené v databáze. Aj keď to by sa zase dalo vyriešiť tak že by som pridal ďalší stĺpec typu blob a tam potom lazy ukladal a konvertoval ale tiež b sa tam museli sledovať dátumy.


Bubák:
To ses koukal na vlastní oči, nebo ses koukal, co se kde píše?

Zobral som jedno PNGčko (obsahujúce fotorealistickú grafiku) a skonvertoval som ho najprv na jpg a potom na webp a tu je výsledok:


Ako ja nehovorím že to seriózne meranie ale nejakú výpovednú hodnotu to asi predsa len má.

PNG je bezstratový formát podporujúci alfakanál. webp podporuje jak stratovú tak nestratovú kompresiu a taktiež aj alfa transparentnosť. Výhoda webp oproti PNG je že môžme použiť alfa kanál aj pri stratovej kompresii.

Keeehi:
Dík. Ale na úrovni aplikácie by to bolo moc pracné, asi bude lepšie spraviť HttpHandler alebo nejaký jednoduchý webserver a tam hodiť obrázky ktoré budú konzumovať ostatné appky. Aj keď zase problém bude z DB.


Bubák: a ešte doplním že pri tom webp som sa snažil nastaviť podobný faktor ako pri JPG (prerátal som to). A obrázky vyzerajú +- rovnako kvalitne.


@all: A ešte ma napadla jedna otázka... Tam kde vkladám obrázok (element img, css, atď je potrebné vždy uvádzať koncovku (.jpg, .png, .webp)?) či prehliadaču je jedno akú koncovku uvediem a rozhodujúci je preň mime type vracený v response?
Keeehi
Profil
barkel:
Tam kde vkladám obrázok (element img, css, atď je potrebné vždy uvádzať koncovku (.jpg, .png, .webp)?) či prehliadaču je jedno akú koncovku uvediem a rozhodujúci je preň mime type vracený v response?
Je mu to jedno. Hlavně pokud bys to chtěl řešit na úrovni serveru, měl bys to řešit tímto způsobem. V takovém případě totiž musíš mít jednu url, která bude vracet různý obsah. Čistější mi přijde když by to šlo přímo z aplikace a pokud se to udělá chytře, tak to ani pracné moc nebude. Nicméně i server by měl umět zkontrolovat hlavičku accept a podle toho vrátit obsah.
Kajman
Profil
Pokud bude vracet různé obrázky na stejné url, nezapomeňte zakázat veřejné cachování pro případné proxy servery, aby nedostal klient formát obrázku podle schopností předešlého klienta.
H13
Profil
Já to dělám tak, že si pomocí GD knihovny (na PHP serveru) vytvořím náhled zdrojového obrázku (png|jpg) a k tom náhled webp a pak v html použiju:

<picture>
  <source srcset="nahled.webp" type="image/webp">
  <source srcset="nahled.jpg" type="image/jpeg"> 
  <img src="nahled.jpg" alt="...">
</picture>

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0