JPEG med gennemsigtig baggrund

JPG tillader ikke gennemsigtige baggrunde.

Det eneste, du kan gøre er at have en flad farvebaggrund, der passer ind på dit websted: f.eks. hvis din webstedsbaggrund er hvid, skal du oprette JPGer med en hvid baggrund.

Ellers skal du overveje at gemme som PNG, hvilket muliggør ægte gennemsigtighed.

Kommentarer

• Er det en god ide at prøve at indstille en blandet baggrundsfarve, da den muligvis ikke er homogen?
• @Amessihel Nej, men det ‘ er den eneste mulighed, hvis JPG-format virkelig er påkrævet, og gennemsigtighed skal simuleres.

JPEG understøtter overhovedet ikke gennemsigtighed.

Den mest kompatible mulighed er at bruge PNG, men resulterer i store filer til fotografier, fordi det er kompression uden tab.

En anden mulighed er at bruge det nye WebP-filformat, der understøtter både tabsfri (som PNG) og tabsfri komprimering (som JPEG), og giver mulighed for gennemsigtighed med begge. Support til WebP er relativt god i disse dage, men endnu ikke universel (især hverken Safari eller IE understøtter det, men Edge gør).

Kommentarer

• Med hensyn til WebP, tænker jeg især: Safari understøtter i øjeblikket slet ikke (mobil eller desktop ). Det eliminerer ~ 25% af hele browserens markedsandel, naturligvis inklusive alle iPhones.
• WebP-browsersupport .
• Hvorfor skulle man have brug for gennemsigtighed i fotografier med høj opløsning?
• @Crowley, overvej en ” omkring ” side med fotografier af firmaets ‘ s personale.
• @Mark Jeg kan stadig ikke finde grund til at bruge gennemsigtighed der. Korrekt valg af optagebaggrunden er meget pænere.

Mens JPEG-formatet ikke kan håndtere gennemsigtighed i sig selv, er det fuldt ud muligt at have gennemsigtighed ved hjælp af JPEGer med moderne browsere. Det er dog kompliceret. Det indebærer at bruge SVG til at oprette en klippemaske, der håndterer gennemsigtigheden. Med Photoshop kan du gøre dette med penværktøjet, og eksporter derefter til Illustrator, hvor du kan konvertere stien til penværktøj til en SVG.

Her er en mere detaljeret vejledning for, hvordan du gør så.

Tricket er at lave to ting:

• JPG
• Klippet

JPG er let nok. Output det lige fra Photoshop. Optimer.

Nu kan vi konfigurere SVG. SVG takker gerne e en rastergrafik. SVG er kendt for vektorgrafik, men det er et meget fleksibelt billedformat.

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

For at få stien eksporterer vi den sti, vi oprettede med penværktøjet, til Illustrator. Nu har vi stien derovre, og det er let at eksportere som SVG [.]

Nu har vi de stigdata, vi har brug for [.] Lad os bruge det inden for a i SVG, vi er startet. Anvend derefter også klipstien 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 værktøj, der bare konverterer en PNG til en SVG med indlejrede JPEGer . Fordelen i forhold til WebP er, at det fungerer i Internet Explorer (siden version 9) og Safari (siden version 3), inklusive på iOS.

Når det er sagt, er den sædvanlige standard faktisk bare at farve JPEG-baggrunden for at matche webstedets, eller for at bruge optimeret 8-bit PNG (ved hjælp af et værktøj som PNGQuant til at konvertere almindelige 32-bit PNGer).

Kommentarer

• I retfærdighed er SVG med en klipmaske ikke jpg. Og en klipmaske er et kompleksitetsniveau, der måske eller måske ikke ønskes.
• @Scott Jeg er enig; det er ikke ‘ t. Men jeg læser ikke ‘, at spørgsmålet kræver det. Det siger ikke ‘ en ” JPEG-fil indeholdende gennemsigtighed ” men bare ” billeder til internettet som JPEG med gennemsigtighed, ” hvilket er mere tvetydigt. Desuden, selvom det ikke er, hvad OP eller deres klient mente, tror jeg, at oplysningerne i mit svar kan være relevante for fremtidige læsere, der søger efter og finder dette spørgsmål i fremtiden. Det ‘ er lige så gyldigt som at inkludere oplysninger om WebP eller foreslå brugen af PNG.
• Hvis du har brug for delvis gennemsigtighed, skal du bruge en maske (som kunne være en separat PNC i gråtoner) i stedet for at klippe.
• Dette er som at sige, at du kan køre din bil over havet … hvis du lægger den på en båd. Kom nu.
• At gøre pennetrinet i Photoshop bare for at eksportere stien til Illustrator til eksport til SVG virker som en grov misbrug af programmerne – bare gør pennetrinet i Illustrator. Når det er sagt, virker det som om det både overkomplicerer problemet og er for begrænsende til moderne praksis (f.eks. Kan du ‘ ikke have delvis gennemsigtighed med denne mulighed). Hvis der ‘ er fleksibilitet i billedformatet, skal du bare bruge PNG. Hvis kildebilledet skal være en JPG, skal maskeringen udføres med en gråskala-billedmaske som Joey foreslår. Udelukkelse af specifikke behov bør disse være de eneste to rimelige muligheder.

JPEG 2000 (også kendt som JP2) er en forbedret version af det originale JPEG-format (fra 1992), der også har fuld understøttelse af gennemsigtighed, men den har uhyggelig browsersupport (kun Safari understøtter det).

Jeg er enig med Lucian, brug bare PNG, det understøttes ekstremt godt, og der er mange værktøjer (pngcrush, optipng , pngout …) for at komprimere filer. Se her for en sammenligning.

Med hensyn til hvad tylisirn sagde, forstår jeg bekymringen om filstørrelse, men overvej dette: det er normen for websider, der skal være oppustede i disse dage. På den anden side efterlader en hurtig sideindlæsningstid et godt indtryk på brugerne, og har en positiv effekt på SEO .

Kommentarer

• relateret: progressiv billedgengivelse
• @ beppe9000 tak for linket ! Mens jeg læste det, blev jeg mindet om, hvordan Facebook bruger slørede miniaturebilleder som pladsholdere, mens det downloader det faktiske billede. Det ‘ er ikke rigtig progressiv indlæsning, mere af en distraktion i stedet for blank plads, men mikrotumbnails har fordelen ved at tage en ubetydelig mængde plads (~ 200 byte). Denne teknik kunne helt sikkert anvendes til PNG, måske endda JPEG, hvis den understøtter brugerdefinerede metadata, men jeg tror ikke ‘, at browsere ville være interesserede i at implementere den … engineering.fb.com/android/the-technology-behind-preview-photos
• Dejlig teknik på fb … Nå, jeg tror det ikke ‘ t skaleres meget godt med indhold, der serveres af forskellige enheder. Sandsynligvis er WebP et mere tiltalende alternativ. Denne er også en god læsning: developers.google.com/web/fundamentals/performance/…

Du kan med PHP og Imagick fjerne baggrunden dynamisk. (fjern f.eks. en fushia-farve). ~ du opretter en PNG / GIF ved kørsel fra JPG (du kan cache gennemsigtigt billede i en mappe for at undgå overophedning af serveren)

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

Kommentarer

• En sej mulighed, men sandsynligvis ikke relevant, da OP kun leverer billedfilen til en klient, der ikke designer og hoster deres websted ‘ s backend til dem. Som sådan skal selve billedet understøtte gennemsigtighed.

På grund af JPEGs tabsgivende komprimeringskarakter komprimering, det anbefales ikke at oprette en JPEG med en flad farvebaggrund til chroma-keying, da farven bløder ind i de omkringliggende områder.

Afhængigt af hvordan billederne bruges, leveres der et matte gråtonebillede ud over en standard JPEG kan være tilstrækkelig, da i JEPG-format lagres gråtonekomponenten i billeddataene i en meget højere opløsning end farvedataene. Disse skal kombineres ved hjælp af canvas API eller lignende.

Som andre har nævnt, ville en bedre løsning være at bare bruge et format som PNG, som naivt understøtter en alfakanal og er browser-kompatibel.

Med fremkomsten af CSS3 mask-image egenskab kunne man give et eksternt alfa-maskebillede til JPEGerne og dermed give dem alfakanalen de mangler.

Kommentarer

• Jeg var ikke ‘ t klar over dette, rart at vide! Men det ser ikke ud ‘ til spørgsmålet. ‘ Det ser ikke ud til, at OP er direkte involveret i webudvikling, men har ramt en mur med en misinformeret anmodning fra en klient.
• Selvfølgelig. Men for andre, der søger lignende løsninger, kan dette vise sig nyttigt.

Bortset fra edge-cases præsenteret i de andre svar understøtter en JPEG til alle praktiske formål ikke gennemsigtighed.

De mest almindelige formater, der understøtter gennemsigtighed, er PNG, GIF og SVG.

Hvis ingen af disse filformater er velegnede til klienten, og der kræves en JPEG af en hvilken som helst mærkelig årsag, så skal du blot angive en JPEG til hver brugssag.

Hvis de laver en plakat, så bed dem om at fortælle dig farve og give en JPEG med en baggrund, der passer til. Hvis de blot udskriver på papir, skal en hvid baggrund være fin. Hvis det bliver brugt på deres hjemmeside, skal du give en baggrund, der passer til hvert sted, der bruges på hjemmesiden.

Tip: Sørg for at opkræve gebyr for hver brugssag

Kommentarer

• At inkludere SVG på denne liste er noget vildledende, da det ‘ er et meget andet format end de andre to.
• @ Abion47 Selv IE9 understøtter det . Jeg vil sige, at ethvert trykfirma, der er værd for deres salt, vil anmode om en SVG, da det vil lade dem sprænge det så stort, som de har brug for.
• Du misforstår mit punkt. Et billede, der startede livet som et rasterbillede, kan ikke gemmes som et SVG på den måde, det kan gemmes som en PNG eller GIF. Hvis OP ‘ s billede oprindeligt var i et vektorformat, skal det absolut opbevares som et vektorformat så længe som muligt. Men hvis det ‘ er en billedkomposition (for eksempel i Photoshop), har SVG-skibet for længst sejlet, medmindre OP ønsker at gøre om hele projektet effektivt for at gemme det som en SVG.

Du kan oprette PNG-billede med gennemsigtighed og derefter konvertere det til SVG, der indeholder en farve information som JPEG og en alfakanal som en gråtonemaske. Her er et værktøj, jeg skrev for at gøre det https://github.com/igrmk/transpeg

Ja, dette er muligt.

Opret bare en klipsti i panelet Stier. Når du gemmer filen som JPEG, gemmer Photoshop klipningsstien i sektionen JPEG-metadata.

Bemærk, at klipstien kun har effekt, når din klient åbner filen i Photoshop, ikke i de fleste andre programmer, specifikt ikke i webbrowsere.

Kommentarer

• ” Min klient vil have mig til at levere billeder til internettet som JPEG ”
• @Scott OTOH, dette svar og JPEG2000 svarer faktisk på spørgsmålet som skrevet. i.kym-cdn.com/photos/images/original/000/909/991/48c.jpg
• @JollyJoker Nej de don ‘ t, da OP specifikt bad om billeder vedrørende deres brug på nettet, så hverken Photoshop-specifikke metadata-baserede masker eller JPEG-udvidede billedformater med næsten ikke-eksisterende browser support adresserer virkelig OP ‘ s faktiske behov som skrevet i spørgsmålet .