JPEG átlátszó háttérrel

A JPG nem engedélyezi az átlátszó háttereket.

Az egyetlen dolog megteheti, hogy van egy lapos színű háttere, amely beolvad a webhelyébe: pl. ha a webhelye háttér fehér, akkor készítsen JPG-ket fehér háttérrel.

Ellenkező esetben fontolóra kell venni a mentést PNG-ként, ami valóban átláthatóvá teszi.

Megjegyzések

• Jó ötlet megkísérelni beállítani a keverendő háttérszínt, mivel lehet, hogy nem homogén?
• @Amessihel Nem, de ‘ az egyetlen lehetőség, ha valóban szükség van JPG formátumra, és az átláthatóságot szimulálni kell.

A JPEG egyáltalán nem támogatja az átlátszóságot.

A legegyszerűbb lehetőség a PNG használata, de nagy fájlokat eredményez a fényképek számára, mivel veszteségmentes tömörítés.

Egy másik lehetőség az új WebP fájlformátum használata, amely támogatja a veszteségmentes (például a PNG) és a veszteséges tömörítést (például a JPEG), és lehetővé teszi az átláthatóságot mindkettővel. A WebP támogatása manapság viszonylag jó, de még nem univerzális (nevezetesen sem a Safari, sem az IE nem támogatja meg, de az Edge igen).

Megjegyzések

• A WebP-t illetően szerintem még ennél is fontosabb: a Safari jelenleg egyáltalán nem támogatja (mobil vagy asztali) ). Ez kiküszöböli a böngésző piaci részesedésének ~ 25% -át, nyilvánvalóan az összes iPhone-t is beleértve.
• A WebP böngésző támogatása .
• Miért lenne szükség átláthatóságra a nagy felbontású fényképeknél?
• @Crowley, fontoljon meg egy ” oldalt a ” oldalról a vállalat ‘ személyzetének fényképeivel.
• @Mark Még mindig nem találok okot az átláthatóság használatára. A felvételi háttér megfelelő megválasztása sokkal könnyebb.

Míg a JPEG formátum nem képes kezelni maga az átlátszóság, teljesen lehetséges az átlátszóság a JPEG használatával a modern böngészőkkel. Ez azonban bonyolult. Ez magában foglalja az SVG használatát az átlátszóságot kezelő nyírómaszk létrehozásához. A Photoshop segítségével ezt megteheti a toll eszközzel, és majd exportálja az Illustrator programba, ahol a toll eszköz elérési útját SVG-vé alakíthatja.

Itt található egy részletesebb útmutató . így.

A trükk két dolog:

• A JPG
• A nyírás

A JPG elég egyszerű. Ezt közvetlenül a Photoshopból adja ki. Optimalizálás.

Most beállíthatjuk az SVG-t. Az SVG örömmel fogad e raszteres grafika. Az SVG ismert a vektorgrafikáról, de nagyon rugalmas képformátum.

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

Az elérési út megszerzéséhez a Toll eszközzel létrehozott útvonalat exportáljuk a Illustrator. Most megvan az elérési út, és könnyen exportálható SVG-ként. [.]

Most már megvan a szükséges útvonaladatok [.] Használjuk fel azokat az SVG-ben, amelyet elkezdtünk. Ezután alkalmazza a klip elérési útját a következőre is:

<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> 

Alternatív megoldásként itt található egy eszköz, amely csak átalakítja a PNG-t beágyazott JPEG-ekkel rendelkező SVG-vé . Az előnye a WebP-nek, hogy az Internet Explorerben (a 9. verzió óta) és a Safari-ban (a 3. verzió óta) működik, ideértve az iOS-t is.

Ennek ellenére a szokásos szabvány valóban a JPEG háttér színezése. hogy illeszkedjen a webhelyéhez, vagy optimalizált 8 bites PNG-t használjon (olyan eszköz segítségével, mint a PNGQuant a szokásos 32 bites PNG-k konvertálására).

Megjegyzések

• Minden igazság szerint a nyírómaszkkal ellátott SVG nem jpg. A nyírómaszk pedig egy olyan összetettségi szint, amelyre szükség lehet, vagy nem.
• @Scott Egyetértek; ez nem ‘ t. De nem ‘ nem olvastam a kérdést, hogy ezt megkövetelném. Nem ‘ nem mond egy ” JPEG fájlt, amely ” átlátszóságot tartalmaz, hanem csak ” képek az internetre JPEG formátumban, átlátszóan, “, ami egyértelműbb. Továbbá, még ha az OP vagy ügyfelük sem ezt gondolta, úgy gondolom, hogy a Válaszomban szereplő információk relevánsak lehetnek a jövőbeli olvasók számára, akik a jövőben ezt a kérdést keresik és találják meg. ‘ ugyanolyan érvényes, mint a WebP-vel kapcsolatos információk megadása vagy a PNG használatának javaslata.
• Ha részleges átlátszóságra van szüksége, használjon maszkot (amely legyen külön szürkeárnyalatos PNG) a nyírás helyett.
• Ez olyan, mintha azt mondanád, hogy az autóval az óceán felett vezethetsz … ha hajóra rakod. Gyerünk.
• A tollal történő lépés a Photoshopban csak azért, hogy exportálja az Illustratorhoz vezető utat az SVG-be történő exportáláshoz, a programok durva visszaélésének tűnik – csak tegye meg a tollal az Illustrator programban. Ennek ellenére úgy tűnik, hogy ez túlbonyolítja a kérdést, és túl korlátozó a modern gyakorlatok számára (pl. ‘ nem lehet részleges átláthatóság ezzel a lehetőséggel). Ha ‘ rugalmas a képformátum, akkor csak használja a PNG-t. Ha a forrásképnek JPG-nek kell lennie, akkor a maszkolást olyan szürkeárnyalatos képmaszkkal kell elvégezni, mint amit Joey javasol. A konkrét igények korlátozása nélkül ez lehet a két ésszerű lehetőség.

JPEG 2000 (más néven JP2) az eredeti JPEG formátum továbbfejlesztett változata (1992-től), amely teljes mértékben támogatja az átláthatóságot is, de rettentő böngészőtámogatás (csak a Safari támogatja).

Egyetértek a Lucian-nal, csak használd a PNG-t, az rendkívül jól támogatott, és sok eszköz létezik (pngcrush, optipng , pngout …) a fájlok tömörítéséhez. Az összehasonlításért lásd: itt .

A tylisirn által elmondottakkal kapcsolatban megértettem a fájlmérettel kapcsolatos aggodalmat, de vegye figyelembe ezt: napjainkban a weblapok duzzadásának szokása. Másrészt a gyors oldalbetöltési idő jó benyomást hagy a felhasználókra, és a pozitív hatással van a SEO-ra .

Megjegyzések

• kapcsolódó: progresszív képmegjelenítés
• @ beppe9000 köszönöm a linket ! Olvasás közben eszembe jutott, hogy a Facebook hogyan használja az elmosódott indexképeket helyőrzőkként, miközben a tényleges képet letölti. ‘ nem igazán progresszív betöltés, inkább a figyelemelterelés az üres hely helyett, de a mikrotérképek előnye, hogy elhanyagolható helyet foglalnak el (~ 200 bájt). Ez a technika mindenképpen alkalmazható a PNG-re, esetleg még a JPEG-re is, ha támogatja az egyedi metaadatokat, de nem hiszem, hogy a böngészők érdekelnék a megvalósítását … engineering.fb.com/android/the-technology-behind-preview-photos
• Szép mérnöki munka az fb-n … Nos, szerintem nem A ‘ t nagyon jól skálázza a különböző entitások által szolgáltatott tartalommal. Valószínűleg a WebP vonzóbb alternatíva. Ez is jó olvasmány: developers.google.com/web/fundamentals/performance/…

A PHP és az Imagick segítségével dinamikusan eltávolíthatja a hátteret. (távolítson el például egy fushia színt). ~ PNG / GIF-t készít futás közben JPG-ből (átlátszó képet tárolhat egy mappába a szerver túlmelegedésének elkerülése érdekében)

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

Megjegyzések

• Kiváló lehetőség, de valószínűleg nem releváns, mivel az OP pusztán a képfájlt biztosítja egy kliens, aki nem tervezi és nem tárolja a weboldalát számukra ‘. Mint ilyen, magának a képnek is támogatnia kell az átláthatóságot.

A JPEG veszteséges tömörítési jellege miatt tömörítés, lapos színes háttérrel rendelkező JPEG létrehozása a színbeállításhoz nem ajánlott, mivel a szín a környező területekre elvérzik.

A képek felhasználásának módjától függően a szürkeárnyalatos matt kép megadása elegendő lehet egy szabványos JPEG, mivel JEPG formátumban a képadatok szürkeárnyalatos komponense sokkal nagyobb felbontásban tárolódik, mint a színes adatok. Ezeket a vászon API-val vagy hasonlóval kell kombinálni.

Amint mások már említették, jobb megoldás az lenne, ha csak olyan formátumot használnánk, mint a PNG, amely naivan támogatja az alfa csatornát és kompatibilis a böngészővel.

A CSS3 mask-image tulajdonság megjelenésével egy külső alfa maszk képet biztosíthatunk a JPEG-ek számára, ezáltal megadva nekik az alfa csatornát hiányzik.

Megjegyzések

• Nem voltam ‘ tudomásom erről, jó tudni! De úgy tűnik, hogy nem ‘ válaszol a kérdésre. Nem úgy tűnik, hogy ‘ úgy tűnik, hogy az OP közvetlenül részt vesz a webfejlesztésben, de egy falnak ütközött egy ügyfél félreinformált kérésével.
• Természetesen. De másoknak, akik hasonló megoldásokat keresnek, ez hasznos lehet.

Az éles eseteken kívül a többi válaszban bemutatott JPEG minden gyakorlati célból nem támogatja az átláthatóságot.

A leggyakoribb formátumok, amelyek támogatják az átláthatóságot, a PNG, GIF és SVG.

Ha ezek egyike sem a fájlformátumok alkalmasak az ügyfél számára, és JPEG-re van szükség bármilyen külsõ okból, akkor egyszerűen meg kell adni egy JPEG-t minden felhasználási esethez.

Ha posztert készítenek, szólítsák meg a posztert színt adjon, és egy JPEG-t adjon meg egyezõ háttérrel. Ha egyszerűen papírra nyomtatnak, akkor a fehér háttérnek rendben kell lennie. Ha a webhelyükön használják, akkor a webhely minden helyéhez megfelelő hátteret kell megadnia.

Tipp: győződjön meg arról, hogy minden egyes felhasználási esetért felszámol

Megjegyzések

• Az SVG felvétele ebbe a listába kissé megtévesztő, mivel úgy látja, hogy ‘ nagyon más formátumú, mint a másik kettő.
• @ Abion47 Még IE9 is támogatja . Azt mondanám, hogy minden olyan só, amely megérdemli a sóját, SVG-t fog kérni, mivel ez lehetővé teszi számukra, hogy akkorát robbantsák fel, amennyire szükségük van. Az a kép, amely raszterképként kezdte az életét, nem menthető SVG-ként, úgy, mint PNG vagy GIF formátumban. Ha az OP ‘ kép eredetileg vektoros formátumban volt, akkor abszolút vektor formátumban kell megőrizni a lehető leghosszabb ideig. De ha ‘ képösszetétel (például Photoshopban), akkor az SVG hajó már régen hajózott, hacsak az OP nem akarja hatékonyan átdolgozni az egész projektet annak mentése érdekében, hogy egy SVG.

Átlátszóan létrehozhat PNG-képet, majd átalakíthatja színt tartalmazó SVG -vé. információkat JPEG formátumban, alfa csatornákat pedig szürkeárnyalatos maszkként. Itt van egy eszköz, amelyet írtam https://github.com/igrmk/transpeg

Igen, ez lehetséges.

Csak hozzon létre egy vágógörbét az Útvonalak panelen. A fájl JPEG formátumban történő mentésekor a Photoshop a vágógörbét a JPEG metaadatok szakaszban tárolja.

Ne feledje, hogy a vágógörbe csak akkor lesz hatással, ha az ügyfél megnyitja a fájlt a Photoshop alkalmazásban, a legtöbb programban nem, kifejezetten nem a webböngészőben.

Megjegyzések

• ” Az ügyfelem azt akarja, hogy adjam át webes képek JPEG formátumban ”
• @Scott OTOH, ez a válasz és a JPEG2000 valójában a kérdésre válaszol írott. i.kym-cdn.com/photos/images/original/000/909/991/48c.jpg
• @JollyJoker Nem ők ne ‘ t, látva, hogy az OP kifejezetten képeket kért az interneten való használatukról, így sem a Photoshop-specifikus metaadat-alapú maszkok, sem a JPEG-kiterjesztésű képformátumok gyakorlatilag nem létező böngészővel támogatás valóban foglalkozik az OP ‘ tényleges igényeivel a kérdésben leírtak szerint .