JPEG med gjennomsiktig bakgrunn

JPG tillater ikke gjennomsiktige bakgrunner.

Det eneste du kan gjøre er å ha en flat fargebakgrunn som vil smelte inn på nettstedet ditt: f.eks. hvis nettstedsbakgrunnen din er hvit, må du lage JPG-er med en hvit bakgrunn.

Ellers må du vurdere å lagre som PNG, noe som tillater ekte gjennomsiktighet.

Kommentarer

• Er det en god ide å prøve å stille inn en blandende bakgrunnsfarge siden den kanskje ikke er homogen?
• @Amessihel Nei, men den ‘ er det eneste alternativet hvis JPG-format virkelig er nødvendig og gjennomsiktighet må simuleres.

JPEG støtter ikke transparens i det hele tatt.

Det mest kompatible alternativet er å bruke PNG, men resulterer i store filer for bilder fordi det er tapsfri komprimering.

Et annet alternativ er å bruke det nye WebP-filformatet som støtter både tapsfri (som PNG) og tapsfri komprimering (som JPEG), og tillater gjennomsiktighet med begge. Støtte for WebP er relativt bra i disse dager, men ennå ikke universell (spesielt verken Safari eller IE støtter det, men Edge gjør det.

Kommentarer

• Når det gjelder WebP, tenker jeg mer spesielt: Safari støtter for øyeblikket ikke det i det hele tatt (mobil eller stasjonær ). Det eliminerer ~ 25% av hele nettleserens markedsandel, åpenbart inkludert alle iPhones.
• WebP-nettleserstøtte .
• Hvorfor trenger man gjennomsiktighet i høyoppløselige fotografier?
• @Crowley, vurder en » om » side med fotografier av firmaets ‘ s ansatte.
• @Mark Jeg kan fremdeles ikke finne grunn til å bruke gjennomsiktighet der. Riktig valg av skytebakgrunnen er mye penere.

Mens JPEG-formatet ikke kan takle gjennomsiktighet i seg selv, er det fullt mulig å ha gjennomsiktighet ved hjelp av JPEG-filer med moderne nettlesere. Det er imidlertid komplisert. Det innebærer å bruke SVG til å lage en klippemaske som håndterer gjennomsiktigheten. Med Photoshop kan du gjøre dette med penneverktøyet eksporter deretter til Illustrator, hvor du kan konvertere banen til penneverktøyet til en SVG.

Her er en mer detaljert guide for hvordan du gjør så.

Trikset er å lage to ting:

• JPG
• Klippet

JPG er lett nok. Skriv ut rett fra Photoshop. Optimaliser.

Nå kan vi sette opp SVG. SVG tar gjerne tak e en rastergrafikk. SVG er kjent for vektorgrafikk, men det er et veldig fleksibelt bildeformat.

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

For å få banen eksporterer vi banen vi opprettet med pennverktøyet til Illustrator. Nå har vi stien der borte, og det er lett å eksportere som SVG [.]

Nå har vi banedataene vi trenger [.] La oss bruke det i a i SVG vi har startet. Bruk deretter klipsbanen til:

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

Alternativt er her et verktøy som bare konverterer en PNG til en SVG med innebygde JPEG-er . Fordelen over WebP er at den fungerer i Internet Explorer (siden versjon 9) og Safari (siden versjon 3), inkludert på iOS.

Når det er sagt, er den vanlige standarden faktisk å bare fargelegge JPEG-bakgrunnen for å matche det på nettstedet, eller for å bruke optimalisert 8-biters PNG, (ved hjelp av et verktøy som PNGQuant for å konvertere vanlige 32-bits PNGer).

Kommentarer

• I rettferdighet er SVG med en utklippsmaske ikke jpg. Og en klippemaske er et kompleksitetsnivå som kanskje eller ikke er ønsket.
• @Scott Jeg er enig; det er ikke ‘ t. Men jeg les ikke ‘ Spørsmålet som krever det. Det sier ikke ‘ en » JPEG-fil som inneholder gjennomsiktighet » men bare » bilder for nettet som JPEG med gjennomsiktighet, » som er mer tvetydig. Videre, selv om det ikke er det OP eller deres klient mente, tror jeg at informasjonen i svaret mitt kan være relevant for fremtidige lesere som søker etter og finner dette spørsmålet i fremtiden. Det ‘ er like gyldig som å inkludere informasjon om WebP eller foreslå bruk av PNG.
• Hvis du trenger delvis gjennomsiktighet, bør du bruke en maske (som kan være en egen gråskala PNG) i stedet for å klippe.
• Dette er som å si at du kan kjøre bilen din over havet … hvis du legger den på en båt. Kom igjen.
• Å gjøre pennetrinnet i Photoshop bare for å eksportere banen til Illustrator for eksport til SVG, virker som et grovt misbruk av programmene – bare gjør pennetrinnet i Illustrator. Når det er sagt, virker det som om det både kompliserer problemet og er for begrensende for moderne praksis (f.eks. Kan du ‘ ikke ha delvis gjennomsiktighet med dette alternativet). Hvis det ‘ er fleksibilitet i bildeformatet, er det bare å bruke PNG. Hvis kildebildet må være en JPG, bør maskeringen gjøres med en gråskala bildemaske som det Joey foreslår. Uten spesifikke behov, bør det være de eneste to rimelige alternativene.

JPEG 2000 (også kjent som JP2) er en forbedret versjon av det originale JPEG-formatet (fra 1992) som også har full støtte for gjennomsiktighet, men den har uhyggelig nettleserstøtte (bare Safari støtter det).

Jeg er enig med Lucian, bare bruk PNG, den er ekstremt godt støttet, og det er mange verktøy (pngcrush, optipng , pngout …) for å komprimere filer. Se her for en sammenligning.

Når det gjelder hva tylisirn sa, forstår jeg bekymringen for filstørrelse, men vurder dette: det er normen for nettsider å være oppblåst, i disse dager. Imidlertid etterlater en rask sidetidstid et godt inntrykk på brukerne, og har en positiv effekt på SEO .

Kommentarer

• relatert: progressiv bildegjengivelse
• @ beppe9000 takk for lenken ! Mens jeg leste den, ble jeg påminnet om hvordan Facebook bruker uskarpe miniatyrbilder som plassholdere mens den laster ned det faktiske bildet. Det ‘ er egentlig ikke progressiv belastning, mer av en distraksjon i stedet for tomrom, men mikrominnebilder har fordelen av å ta en ubetydelig mengde plass (~ 200 byte). Denne teknikken kan definitivt brukes på PNG, kanskje til og med JPEG hvis den har støtte for tilpassede metadata, men jeg tror ikke ‘ t nettlesere ville være interessert i å implementere den … engineering.fb.com/android/the-technology-behind-preview-photos
• Fin engineering på fb … Vel, jeg tror det ikke ‘ t skalerer veldig godt med innhold som serveres av forskjellige enheter. Sannsynligvis er WebP et mer tiltalende alternativ. Denne er også en god lesning: utviklere.google.com/web/fundamentals/performance/…

Du kan med PHP og Imagick fjerne bakgrunnen dynamisk. (fjern for eksempel en fushia-farge). ~ du oppretter en PNG / GIF ved kjøretid fra JPG (du kan cache gjennomsiktig bilde i en mappe for å unngå overoppheting av serveren)

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

Kommentarer

• Et kult alternativ, men sannsynligvis ikke relevant ettersom OP bare gir bildefilen til en klient som ikke designer og er vert for nettsiden deres ‘ s backend for dem. Som sådan trenger selve bildet å støtte gjennomsiktighet.

På grunn av JPEGs tapsfri komprimering komprimering, det anbefales ikke å lage en JPEG med en flat fargebakgrunn for chroma-tasting, siden fargen vil blø inn i de omkringliggende områdene.

Avhengig av hvordan bildene brukes, leverer du et matt gråtonebilde i tillegg til en standard JPEG kan være tilstrekkelig, da i JEPG-format lagres gråtonekomponenten i bildedataene med en mye høyere oppløsning enn fargedataene. Disse må kombineres med canvas API eller lignende.

Som andre har nevnt, ville en bedre løsning være å bare bruke et format som PNG, som naivt støtter en alfakanal og er nettleserkompatibel.

Med fremveksten av CSS3 mask-image -egenskapen, kan man gi et eksternt alfa-maskebilde for JPEG-ene, og dermed gi dem alfakanalen de mangler.

Kommentarer

• Jeg var ikke ‘ t klar over dette, hyggelig å vite! Men det ser ikke ut til at ‘ svarer på spørsmålet. Det ser ikke ut ‘ at OP er direkte involvert i nettutvikling, men har truffet en vegg med en feilinformert forespørsel fra en klient.
• Selvfølgelig. Men for andre som søker lignende løsninger, kan dette vise seg å være nyttig.

Bortsett fra edge-cases presentert i de andre svarene støtter ikke JPEG for alle praktiske formål gjennomsiktighet.

De vanligste formatene som vil støtte gjennomsiktighet er PNG, GIF og SVG.

Hvis ingen av disse filformater er passende for klienten, og det kreves en JPEG av en hvilken som helst underlig grunn, så trenger du bare å oppgi en JPEG for hvert brukstilfelle.

Hvis de lager en plakat, så be dem fortelle deg plakaten farge og gi en JPEG med en bakgrunn som passer. Hvis de bare skriver ut på papir, bør en hvit bakgrunn være bra. Hvis den blir brukt på nettsiden deres, må du oppgi en bakgrunn som passer for hvert sted som brukes på nettstedet.

Tips: Sørg for å belaste for hver brukstilfelle

Kommentarer

• Å inkludere SVG i den listen er noe misvisende, da det ‘ er et veldig annet format enn de to andre.
• @ Abion47 Even IE9 støtter det . Jeg vil si at ethvert trykkeri som er verdt saltet deres, vil be om en SVG, siden den vil la dem sprenge den så stor som de trenger.
• Du misforstår poenget mitt. Et bilde som startet livet som et rasterbilde, kan ikke lagres som et SVG slik at det kan lagres som en PNG eller GIF. Hvis OP ‘ sitt bilde var i vektorformat opprinnelig, bør det absolutt holdes som et vektorformat så lenge som mulig. Men hvis det ‘ er en bildesammensetning (for eksempel i Photoshop), har SVG-skipet for lengst seilt med mindre OP ønsker å gjøre om hele prosjektet effektivt for å lagre det som en SVG.

Du kan opprette PNG-bilde med gjennomsiktighet og deretter konvertere det til SVG som inneholder en farge informasjon som JPEG og en alfakanal som en gråtonemaske. Her er et verktøy jeg skrev for å gjøre det https://github.com/igrmk/transpeg

Ja, dette er mulig.

Bare lag en utklippsbane i Path-panelet. Når du lagrer filen som en JPEG, lagrer Photoshop utklippsbanen i JPEG-metadataseksjonen.

Merk at utklippsbanen bare vil ha effekt når klienten din åpner filen i Photoshop, ikke i de fleste andre programmer, spesielt ikke i nettlesere.

Kommentarer

• » Min klient vil at jeg skal levere bilder på nettet som JPEG »
• @Scott OTOH, dette svaret og JPEG2000 svarer faktisk på spørsmålet som skrevet. i.kym-cdn.com/photos/images/original/000/909/991/48c.jpg
• @JollyJoker Nei de ikke ‘ t, siden OP spesifikt ba om bilder angående deres bruk på nettet, så verken Photoshop-spesifikke metadatabaserte masker eller JPEG-utvidede bildeformater med praktisk talt ikke-eksisterende nettleser støtte adresserer virkelig OP ‘ s faktiske behov som skrevet i spørsmålet .