JPEG läpinäkyvällä taustalla

JPG ei salli läpinäkyviä taustoja.

Ainoa asia Voit tehdä, että sinulla on tasainen värillinen tausta, joka sulautuu verkkosivustoosi: esim. jos verkkosivustosi tausta on valkoinen, luo JPG-tiedostot valkoisella taustalla.

Muussa tapauksessa sinun on harkittava tallentamista PNG-muodossa, mikä sallii todellisen läpinäkyvyyden.

Kommentit

• Onko tämä hyvä idea yrittää asettaa sekoittuva taustaväri, koska se ei ehkä ole homogeeninen?
• @Amessihel Ei, mutta se ’ on ainoa vaihtoehto, jos JPG-muoto todella vaaditaan ja läpinäkyvyys on simuloitava.

JPEG ei tue läpinäkyvyyttä lainkaan.

Yhteensopivin vaihtoehto on käyttää PNG: tä, mutta se tuottaa suuria tiedostoja valokuville, koska se on pakattu häviöttömästi.

Toinen vaihtoehto on käyttää uutta WebP-tiedostomuotoa, joka tukee sekä häviötöntä (kuten PNG) että häviöllistä pakkaamista (kuten JPEG) ja mahdollistaa läpinäkyvyyden molempien kanssa. WebP: n tuki on suhteellisen hyvä näinä päivinä, mutta ei vielä universaali (etenkään kumpikaan Safari tai IE ei tue se, mutta Edge tukee).

Kommentit

• WebP: n osalta mielestäni erityisesti: Safari ei tällä hetkellä tue sitä ollenkaan (mobiili tai työpöytä) ). Tämä eliminoi ~ 25% koko selaimen markkinaosuudesta, ilmeisesti mukaan lukien kaikki iPhonet.
• WebP-selaintuki .
• Miksi tarvitaan korkean resoluution valokuvien läpinäkyvyyttä?
• @Crowley, harkitse ” noin ” -sivua valokuvilla yrityksen ’ henkilöstöstä.
• @Mark En vieläkään löydä syytä käyttää läpinäkyvyyttä siellä. Kuvauksen taustan oikea valinta on paljon hämärämpi.

Vaikka JPEG-muoto ei pysty käsittelemään Itse läpinäkyvyys on täysin mahdollista saada läpinäkyvyys JPEG-tiedostoilla nykyaikaisilla selaimilla. Se on kuitenkin monimutkaista. Siihen sisältyy SVG: n luominen läpinäkyvyyttä käsittelevälle leikkausmaskille. Photoshopilla voit tehdä tämän kynätyökalulla ja vie sitten Illustratoriin, jossa voit muuntaa kynätyökalun polun SVG: ksi.

Tässä on tarkempi opas niin.

Temppu on tehdä kaksi asiaa:

• JPG
• leikkaus

JPG on tarpeeksi helppo. Tulosta se suoraan Photoshopista. Optimoi.

Nyt voimme perustaa SVG: n. SVG ottaa mielellään vastaan e rasterigrafiikka. SVG tunnetaan vektorigrafiikoista, mutta se on erittäin joustava kuvamuoto.

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

Polun saamiseksi viedään Kynätyökalulla luomamme polku Illustrator. Nyt polku on tuolla, ja se on helppo viedä SVG: nä [.]

Nyt meillä on tarvitsemamme reittitiedot [.] Käytetään sitä aloitusosassa olevassa SVG: ssä. Käytä sitten kyseistä leikkeen polkua myös:

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

Vaihtoehtoisesti tässä on työkalu, joka muuntaa PNG: n SVG: ksi upotetuilla JPEG-tiedostoilla . Etu WebP: hen nähden on, että se toimii Internet Explorerissa (versiosta 9 lähtien) ja Safarissa (versiosta 3 lähtien), myös iOS: ssä.

Tavallinen standardi on todellakin vain värittää JPEG-tausta vastaamaan verkkosivuston omaa tai käyttämään optimoitua 8-bittistä PNG: tä (käyttämällä PNGQuantin kaltaista työkalua tavallisten 32-bittisten PNG-tiedostojen muuntamiseen).

Kommentit

• Oikeudenmukaisesti SVG leikkausmaskilla ei jpg. Ja leikkaava naamio on monimutkaisuus, jota voidaan haluta tai ei haluta.
• @Scott Olen samaa mieltä; se ei ole ’ t. Mutta en ’ lukenut kysymystä vaativan sitä. Se ei sano ’ t sano ” JPEG-tiedostoa, joka sisältää läpinäkyvyyden ”, mutta vain ” web-kuvat JPEG-muodossa, läpinäkyvä, ”, joka on epäselvämpi. Lisäksi vaikka OP tai heidän asiakas ei tarkoittanut sitä, uskon, että vastauksessani olevat tiedot voivat olla merkityksellisiä tuleville lukijoille, jotka etsivät ja löytävät tämän kysymyksen tulevaisuudessa. Se ’ on yhtä pätevä kuin sisällyttää tietoja WebP: stä tai ehdottaa PNG: n käyttöä.
• Jos tarvitset osittaista läpinäkyvyyttä, käytä maskia (joka voi ole erillinen harmaasävyinen PNG) leikkaamisen sijaan.
• Tämä on kuin sanoa, että voit ajaa autosi meren yli … jos laitat sen veneeseen. Tule.
• Kynävaiheen tekeminen Photoshopissa vain polun viemiseksi Illustratoriin SVG-vientiä varten näyttää ohjelmien vakavalta väärinkäytöltä – tee vain kynävaihe Illustratorissa. Tästä huolimatta näyttää siltä, että se sekä monimutkaistaa asiaa että on liian rajoittava nykyaikaisille käytäntöille (esim. ’ ei voi olla osittaista avoimuutta tällä vaihtoehdolla). Jos ’ on joustavaa kuvamuodossa, käytä vain PNG: tä. Jos lähdekuvan on oltava JPG, peite tulisi tehdä harmaasävykuva-maskilla, kuten Joey ehdottaa. Näiden pitäisi olla ainoat kaksi kohtuullista vaihtoehtoa, jotka estävät erityistarpeet.

JPEG 2000 (tunnetaan myös nimellä JP2) on parannettu versio alkuperäisestä JPEG-muodosta (vuodesta 1992), joka tukee myös täysin läpinäkyvyyttä, mutta sillä on tuhoisa selaintuki (vain Safari tukee sitä).

Olen samaa mieltä Lucianin kanssa, käytä vain PNG: tä, sitä tuetaan erittäin hyvin ja työkaluja on monia (pngcrush, optipng , pngout …) pakkaamaan tiedostoja. Katso vertailua täältä .

Tylisirnin sanoista ymmärrän tiedostokoon huolestumisen, mutta harkitse tätä: se on normi verkkosivujen paisumisesta näinä päivinä. Toisaalta nopea sivun latausaika jättää käyttäjille hyvän vaikutelman, ja vaikuttaa positiivisesti hakukoneoptimointiin .

Kommentit

• liittyvät: progressiivinen kuvan hahmontaminen
• @ beppe9000 kiitos linkistä ! Kun luin sitä, mieleeni tuli, kuinka Facebook käyttää epäselviä pikkukuvia paikkamerkkeinä, kun se lataa todellisen kuvan. Se ’ ei ole oikeastaan progressiivinen lataus, enemmän häiriötekijä tyhjän tilan sijaan, mutta pikkukuvilla on se etu, että ne vievät vähäisen määrän tilaa (~ 200 tavua). Tätä tekniikkaa voidaan ehdottomasti soveltaa PNG: hen, ehkä jopa JPEG: ään, jos sillä on tuki mukautetuille metatiedoille, mutta en usko ’, että selaimet olisivat kiinnostuneita sen toteuttamisesta … engineering.fb.com/android/the-technology-behind-preview-photos
• Hieno tekniikka fb: ssä … No, mielestäni se ei ’ t mittakaavassa erittäin hyvin sisällön kanssa, jota eri yksiköt tarjoavat. Todennäköisesti WebP on houkuttelevampi vaihtoehto. Tämäkin on hyvä lukea: developers.google.com/web/fundamentals/performance/…

Voit poistaa taustan dynaamisesti PHP: n ja Imagickin avulla. (Poista esimerkiksi fushia-väri). ~ luot PNG / GIF: n suorituksen aikana JPG: stä (voit tallentaa välimuistiin kansion kuvan kansiosta palvelimen ylikuumenemisen välttämiseksi)

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

Kommentit

• Hieno vaihtoehto, mutta todennäköisesti ei merkityksellinen, koska OP tarjoaa vain kuvatiedoston asiakas, joka ei suunnittele ja isännöi verkkosivustoaan heille ’. Sellaisenaan kuvan itsessään on tuettava läpinäkyvyyttä.

JPEG: n häviöllisen pakkauksen vuoksi pakkaamista, tasaisen värisen taustan JPEG-kuvan luomista kroma-näppäilyä varten ei suositella, koska väri vuotaa ympäröiville alueille.

Harmaasävyisen mattakuvan toimittaminen kuvan lisäksi tavallinen JPEG voi riittää, koska JEPG-muodossa kuvadatan harmaasävykomponentti tallennetaan paljon suuremmalla tarkkuudella kuin väridata. Nämä on yhdistettävä canvas-sovellusliittymällä tai vastaavalla.

Kuten muut ovat maininneet, parempi ratkaisu olisi käyttää vain muotoa PNG, joka tukee naiivisti alfa-kanavaa ja on selainyhteensopiva.

CSS3 mask-image -ominaisuuden myötä JPEG-tiedostoille voitaisiin tarjota ulkoinen alfamaski-kuva, mikä antaisi heille alfakanavan heiltä puuttuu.

Kommentit

• En ollut ’ tietoinen tästä, mukava tietää! Mutta se ei ’ näytä vastaavan kysymykseen. ’ ei vaikuta siltä, että OP olisi suoraan mukana verkkokehityksessä, mutta on törmännyt seinään asiakkaan väärin tiedottamalla pyynnöllä.
• Tietysti. Mutta muille, jotka etsivät vastaavia ratkaisuja, tämä saattaa osoittautua hyödylliseksi.

Reunatapausten lisäksi muissa vastauksissa esitetty JPEG ei käytännössä tue läpinäkyvyyttä.

Yleisimmät läpinäkyvyyttä tukevat muodot ovat PNG, GIF ja SVG.

Jos mikään näistä tiedostomuodot sopivat asiakkaalle ja JPEG vaaditaan mistä tahansa ulkomaisesta syystä, sinun on yksinkertaisesti toimitettava JPEG jokaiselle käyttötapaukselle.

Jos he tekevät julistetta, anna heidän kertoa sinulle juliste väri ja anna JPEG, jonka taustalla on vastaava väri. Jos he vain tulostavat paperille, valkoisen taustan pitäisi olla hieno. Jos sitä käytetään heidän verkkosivustollaan, sinun on annettava jokaiselle verkkosivustolla käytetylle paikalle sopiva tausta.

Vihje: varmista, että veloitat jokaisesta käyttötapauksesta.

Kommentit

• SVG: n sisällyttäminen luetteloon on hieman harhaanjohtavaa, koska se ’ on hyvin erilainen muoto kuin kaksi muuta.
• @ Abion47 Jopa IE9 tukee sitä . Sanon, että jokainen painotalo, joka on suolansa arvoinen, pyytää SVG: tä, koska se antaa heidän räjäyttää sen niin suureksi kuin tarvitsee.
• Ymmärrät väärin näkemykseni. Kuvaa, joka aloitti elämän rasterikuvana, ei voida tallentaa SVG: ksi siten, että se voidaan tallentaa PNG- tai GIF-muodossa. Jos OP ’ -kuva oli alun perin vektorimuotoinen, se olisi ehdottomasti säilytettävä vektorimuodossa niin kauan kuin mahdollista. Mutta jos se ’ muodostaa kuvakoostumuksen (esimerkiksi Photoshopissa), niin SVG-alus on jo kauan sitten purjehtinut, ellei OP halua tehdä koko projektia tehokkaasti uudelleen tallentaakseen sen SVG.

Voit luoda PNG-kuvan läpinäkyvästi ja muuntaa sen sitten SVG: ksi, joka sisältää värin tiedot JPEG-muodossa ja alfakanava harmaasävymaskina. Tässä on työkalu, jonka kirjoitin tekemään sen https://github.com/igrmk/transpeg

Kyllä, tämä on mahdollista.

Luo vain syväyspolku Polut-paneeliin. Kun tallennat tiedoston JPEG-tiedostona, Photoshop tallentaa syväyspolun JPEG-metatiedot-osioon.

Huomaa, että syväyspolku vaikuttaa vain, kun asiakas avaa tiedoston Photoshopissa, ei useimmissa muissa ohjelmissa, nimenomaan ei verkkoselaimissa.

Kommentit

• ” Asiakkaani haluaa minun toimittavan Web-kuvat muodossa JPEG ”
• @Scott OTOH, tämä vastaus ja JPEG2000 vastaavat kysymykseen oikeastaan kirjoitettu. i.kym-cdn.com/photos/images/original/000/909/991/48c.jpg
• @JollyJoker Ei he älä ’ t, koska OP pyysi nimenomaan kuvia niiden käytöstä verkossa, joten Photoshop-spesifisiä metatietoihin perustuvia peitteitä eikä JPEG-laajennettuja kuvamuotoja käytännössä olemattomalla selaimella tuki todella vastaa OP ’ todellisiin tarpeisiin kuten kysymykseen on kirjoitettu .