JPEG s průhledným pozadím

JPG neumožňuje průhledné pozadí.

Jediná věc můžete mít ploché barevné pozadí, které by splývalo s vaším webem: např. pokud je pozadí vašeho webu bílé, nechte si soubory JPG vytvořit s bílým pozadím.

Jinak musíte zvážit uložení jako PNG, což umožňuje skutečnou průhlednost.

Komentáře

• Je to dobrý nápad pokusit se nastavit míchací barvu pozadí, protože to nemusí být homogenní?
• @Amessihel Ne, ale je jediná možnost, pokud je skutečně vyžadován formát JPG a je třeba simulovat průhlednost.

JPEG vůbec nepodporuje průhlednost.

Nejkompatibilnější možností je použití PNG, ale výsledkem jsou velké soubory pro fotografie, protože jde o bezztrátovou kompresi.

Další možnost je použít nový formát souboru WebP, který podporuje jak bezztrátovou (jako PNG), tak i ztrátovou kompresi (jako JPEG) a umožňuje transparentnost s oběma. Podpora pro WebP je v dnešní době relativně dobrý, ale zatím ne univerzální (zejména nepodporuje Safari ani IE ale Edge ano).

Komentáře

• Co se týče WebP, myslím ještě pozoruhodněji: Safari jej aktuálně vůbec nepodporuje (mobilní ani stolní) ). To eliminuje ~ 25% celého podílu na trhu s prohlížeči, samozřejmě včetně všech telefonů iPhone.
• podpora prohlížeče WebP .
• Proč by člověk potřeboval průhlednost na fotografiích s vysokým rozlišením?
• @Crowley, zvažte stránku “ o “ s fotografiemi zaměstnanců ‚ s.
• @Mark Stále tam nemohu najít důvod, proč bych tam používal transparentnost. Správná volba pozadí fotografování je mnohem úhlednější.

I když formát JPEG nedokáže zpracovat samotná průhlednost, je zcela možné mít průhlednost pomocí JPEG s moderními prohlížeči. Je to však komplikované. Zahrnuje použití SVG k vytvoření ořezové masky, která zpracovává průhlednost. Ve Photoshopu to můžete udělat pomocí nástroje pero a poté exportujte do Illustratoru, kde můžete převést cestu nástroje pera na SVG.

Zde je podrobnější průvodce , jak postupovat ano.

Trik spočívá ve vytvoření dvou věcí:

• JPG
• výstřižek

JPG je dostatečně snadné. Výstup přímo z Photoshopu. Optimalizujte.

Nyní můžeme nastavit SVG. SVG to rád dělá e rastrová grafika. SVG je známý pro vektorovou grafiku, ale je to velmi flexibilní formát obrazu.

<svg> <image xlink:href="/images/chris.jpg" x="0" y="0"> </svg> 

Chcete-li získat cestu, exportujeme cestu, kterou jsme vytvořili pomocí nástroje Pero, do Ilustrátor. Nyní máme cestu tam a je snadné ji exportovat jako SVG [.]

Nyní máme údaje o cestě, které potřebujeme [.] Pojďme to použít v rámci a v SVG, které jsme začali. Pak také použijte tuto cestu klipu na:

<svg viewBox="0 0 921.17 1409.71"> <defs> <clipPath id="chris-clip"> <path d="[path data from Illustrator]" /> </clipPath> </defs> <image xlink:href="/images/chris.jpg" clip-path="url(#chris-clip)" x="0" y="0" width="921" height="1409"> </svg> 

Alternativně je zde nástroj, který pouze převede PNG na SVG s vloženými soubory JPEG . Výhodou oproti WebP je, že bude fungovat v prohlížečích Internet Explorer (od verze 9) a Safari (od verze 3), a to i v systému iOS.

To znamená, že obvyklým standardem je skutečně pouze vybarvení pozadí JPEG. aby odpovídal tomu na webu, nebo aby používal optimalizovaný 8bitový PNG (pomocí nástroje jako PNGQuant k převodu běžných 32bitových PNG).

Komentáře

• Celkově spravedlivě SVG s ořezovou maskou není jpg. A ořezová maska je úroveň složitosti, která může nebo nemusí být žádoucí.
• @Scott Souhlasím; není to ‚ t. Ale ‚ jsem otázku nečetl tak, že to vyžaduje. Neříká ‚ t “ soubor JPEG obsahující průhlednost „, ale pouze “ obrázky pro web jako JPEG s průhledností, “ což je více nejednoznačné. Navíc, i když to není to, co OP nebo jejich klient myslel, domnívám se, že informace v mé odpovědi mohou být relevantní pro budoucí čtenáře, kteří v budoucnu hledají a najdou tuto otázku. ‚ Je stejně platné jako zahrnutí informací o WebP nebo doporučení použití PNG.
• Pokud potřebujete částečnou průhlednost, měli byste použít masku (která by být samostatným PNG ve stupních šedi) místo ořezávání.
• Je to jako říkat, že můžete jet autem přes oceán … pokud ho nasadíte na loď. No tak.
• Provedení kroku pera ve Photoshopu jen pro export cesty do Illustratoru pro export do SVG se jeví jako hrubé zneužití programů – stačí udělat krok pera v Illustratoru. Jak již bylo řečeno, zdá se, že to problém jednak překomplikuje, jednak je to pro moderní praktiky příliš omezující (např. S touto možností nemůžete ‚ mít částečnou transparentnost). Pokud ‚ flexibilita formátu obrázku, stačí použít PNG. Pokud zdrojový obrázek musí být JPG, pak by maskování mělo být provedeno maskou obrazu ve stupních šedi, jak navrhuje Joey. Kromě konkrétních potřeb by to měly být pouze dvě rozumné možnosti.

JPEG 2000 (také známý jako JP2) je vylepšená verze původního formátu JPEG (z roku 1992), která také plně podporuje průhlednost, ale má propastná podpora prohlížeče (podporuje ji pouze Safari).

Souhlasím s Lucianem, stačí použít PNG, je velmi dobře podporovaný a existuje mnoho nástrojů (pngcrush, optipng , pngout …) ke kompresi souborů. Porovnání naleznete zde .

Co se týče toho, co řekl tylisirn, chápu obavy ohledně velikosti souboru, ale zvažte toto: je je dnes normou pro nafouknutí webových stránek. Na druhou stranu však rychlá doba načítání stránek zanechává u uživatelů dobrý dojem a má pozitivní vliv na SEO .

Komentáře

• související: progresivní vykreslování obrázků
• @ beppe9000 díky za odkaz ! Při čtení mi bylo připomenuto, jak Facebook používá rozmazané miniatury jako zástupné symboly, zatímco stahuje skutečný obrázek. Není to ‚ opravdu progresivní načítání, spíše rozptýlení místo prázdného místa, ale miniaturní miniatury mají tu výhodu, že zabírají zanedbatelné množství prostoru (~ 200 bajtů). Tuto techniku lze určitě použít na PNG, možná i na JPEG, pokud má podporu pro vlastní metadata, ale já si nemyslím, že by prohlížeče měly zájem na jejich implementaci … engineering.fb.com/android/the-technology-behind-preview-photos
• Pěkné inženýrství na fb … No, myslím, že ne ‚ měřítko velmi dobře s obsahem poskytovaným různými entitami. WebP je pravděpodobně přitažlivější alternativou. Toto je také dobré čtení: developers.google.com/web/fundamentals/performance/…

Pomocí PHP a Imagick můžete pozadí dynamicky odstranit. (například odstraňte barvu fushia). ~ vytvoříte PNG / GIF za běhu z JPG (transparentní obrázek můžete uložit do složky, abyste zabránili přehřátí serveru)

https://stackoverflow.com/questions/43544467/imagemagick-white-to-transparent-background-while-maintaining-white-object

Komentáře

• Skvělá volba, ale pravděpodobně není relevantní, protože OP pouze poskytuje obrazový soubor klient, který pro ně ‚ backend nevytváří a neskončí. Samotný obrázek proto musí podporovat průhlednost.

Kvůli ztrátové kompresi JPEG komprese se nedoporučuje vytvářet JPEG s plochým barevným pozadím pro chroma klíčování, protože barva bude krvácet do okolních oblastí.

V závislosti na tom, jak jsou obrázky používány, je kromě toho dodáván také matný obrázek ve stupních šedi. může stačit standardní JPEG, protože ve formátu JEPG je složka obrazových dat ve stupních šedi uložena v mnohem vyšším rozlišení než barevná data. Ty by musely být kombinovány pomocí canvas API nebo podobného.

Jak již zmínili ostatní, lepším řešením by bylo pouze použít formát jako PNG, který naivně podporuje alfa kanál a je kompatibilní s prohlížečem.

S příchodem vlastnosti CSS3 mask-image lze pro obrázky JPEG poskytnout externí obrázek alfa masky, a tím jim poskytnout alfa kanál. chybí jim.

Komentáře

• Nevěděl jsem o tom ‚, rád bych to věděl! Zdá se však, že ‚ na otázku neodpovídá. Nezdá se to ‚ že se OP přímo podílí na vývoji webu, ale narazil na zeď s dezinformovaným požadavkem klienta.
• Samozřejmě. Ale pro ostatní, kteří hledají podobná řešení, by se to mohlo ukázat jako užitečné.

Kromě okrajových případů v ostatních odpovědích JPEG pro všechny praktické účely nepodporuje průhlednost.

Nejběžnější formáty podporující průhlednost jsou PNG, GIF a SVG.

Pokud žádný z těchto formáty souborů jsou vhodné pro klienta a JPEG je vyžadován z jakýchkoli neobvyklých důvodů, pak jednoduše musíte poskytnout JPEG pro každý případ použití.

Pokud dělají plakát, nechte ho říct plakát barvy a poskytnout JPEG s pozadím, aby odpovídaly. Pokud jednoduše tisknou na papír, pak by bílé pozadí mělo být v pořádku. Pokud bude použit na jejich webových stránkách, budete muset poskytnout pozadí vhodné pro každé místo použité na tomto webu.

Tip: nezapomeňte si účtovat za každý případ použití

Komentáře

• Zahrnutí SVG do tohoto seznamu je poněkud zavádějící, protože ‚ je velmi odlišný formát od ostatních dvou.
• @ Abion47 I IE9 to podporuje . Řekl bych, že jakákoli tiskařská společnost, která si stojí za svou sůl, požádá o SVG, protože jim to umožní vyhodit do vzduchu tolik, kolik potřebují.
• Nepochopil jsi můj názor. Obrázek, který zahájil život jako rastrový obrázek, nelze uložit jako SVG tak, aby jej bylo možné uložit jako PNG nebo GIF. Pokud byl obrázek OP ‚ původně ve vektorovém formátu, měl by být absolutně co nejdéle uchováván jako vektorový formát. Ale pokud ‚ s obrazovou kompozicí (například ve Photoshopu), pak loď SVG již dávno vyplula, pokud OP nechce efektivně předělat celý projekt, aby jej uložil jako SVG.

Můžete vytvořit obrázek PNG s průhledností a poté jej převést na SVG obsahující barvu informace jako JPEG a alfa kanál jako maska ve stupních šedi. Zde je nástroj, který jsem k tomu napsal https://github.com/igrmk/transpeg

Ano, je to možné.

Stačí vytvořit ořezovou cestu v panelu Cesty. Když ukládáte soubor jako JPEG, Photoshop uloží ořezovou cestu v sekci metadat JPEG.

Upozorňujeme, že ořezová cesta bude mít účinek pouze tehdy, když váš klient otevře soubor ve Photoshopu, ne ve většině ostatních programů, konkrétně ne ve webových prohlížečích.

Komentáře

• “ Můj klient chce, abych dodal obrázky pro web jako JPEG “
• @Scott OTOH, tato odpověď a JPEG2000 ve skutečnosti zodpoví otázku jako psaný. i.kym-cdn.com/photos/images/original/000/909/991/48c.jpg
• @JollyJoker ne oni don ‚ t, protože OP výslovně požadoval obrázky týkající se jejich použití na webu, takže ani masky založené na metadatech specifické pro Photoshop, ani formáty obrázků rozšířené o JPEG s prakticky neexistujícím prohlížečem podpora skutečně řeší OP ‚ skutečné potřeby jak je uvedeno v otázce .