JPEG med transparent bakgrund

JPG tillåter inte transparenta bakgrunder.

Det enda du kan göra är att ha en platt färgbakgrund som skulle smälta in på din webbplats: t.ex. om din webbplatsbakgrund är vit ska JPG-filer skapas med en vit bakgrund.

Annars måste du överväga att spara som PNG, vilket möjliggör verklig transparens.

Kommentarer

• Är det en bra idé att försöka ställa in en blandande bakgrundsfärg eftersom den kanske inte är homogen?
• @Amessihel Nej, men det ’ är det enda alternativet om JPG-format verkligen krävs och transparens behöver simuleras.

JPEG stöder inte transparens alls.

Det mest kompatibla alternativet är att använda PNG, men resulterar i stora filer för fotografier eftersom det är förlustfri komprimering.

Ett annat alternativ är att använda det nya WebP-filformatet som stöder både förlustfri (som PNG) och förlustfri komprimering (som JPEG), och möjliggör transparens med båda. Support för WebP är relativt bra idag, men ännu inte universellt (särskilt varken Safari eller IE stöder det, men Edge gör det.

Kommentarer

• När det gäller WebP, tänker jag mer särskilt: Safari stöder för närvarande inte alls (mobil eller stationär ). Det eliminerar ~ 25% av hela webbläsarens marknadsandel, uppenbarligen inklusive alla iPhones.
• WebP-webbläsarsupport .
• Varför skulle man behöva transparens i högupplösta fotografier?
• @Crowley, överväg en ” om ” sida med fotografier av företagets ’ s personal.
• @Mark Jag kan fortfarande inte hitta anledning att använda transparens där. Korrekt val av fotograferingsbakgrund är mycket snyggare.

Medan JPEG-formatet inte kan hantera transparens i sig är det helt möjligt att ha transparens med JPEG-filer med moderna webbläsare. Det är dock komplicerat. Det innebär att man använder SVG för att skapa en klippmask som hanterar transparensen. Med Photoshop kan du göra detta med pennverktyget och exportera sedan till Illustrator, där du kan konvertera pennaverktygssökvägen till en SVG.

Här är en mer detaljerad guide för hur du gör så.

Tricket är att göra två saker:

• JPG
• Klippet

JPG är enkelt nog. Skicka det direkt från Photoshop. Optimera.

Nu kan vi ställa in SVG. SVG tar gärna e en rastergrafik. SVG är känt för vektorgrafik, men det är ett mycket flexibelt bildformat.

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

För att få vägen exporterar vi banan som vi skapade med Pen-verktyget till Illustrator Nu har vi vägen där borta och det är lätt att exportera som SVG [.]

Nu har vi de sökdata vi behöver [.] Låt oss använda den inom a i SVG vi har startat. Tillämpa sedan den klippvägen till:

<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 är här ett verktyg som bara konverterar en PNG till en SVG med inbäddade JPEG: er . Fördelen med WebP är att den fungerar i Internet Explorer (sedan version 9) och Safari (sedan version 3), inklusive på iOS.

Som sagt är den vanliga standarden verkligen att bara färga JPEG-bakgrunden för att matcha webbplatsens eller för att använda optimerad 8-bitars PNG (med hjälp av ett verktyg som PNGQuant för att konvertera vanliga 32-bitars PNG).

Kommentarer

• I rättvisans namn är SVG med en klippmask inte jpg. Och en klippmask är en komplexitetsnivå som kan eller inte kan önskas.
• @Scott Jag håller med; det är inte ’ t. Men jag läser ’ inte frågan som kräver det. ’ säger inte en ” JPEG-fil som innehåller transparens ” men bara ” bilder för webben som JPEG med transparens, ” vilket är mer tvetydigt. Dessutom, även om det inte är vad OP eller deras klient menade, tror jag att informationen i mitt svar kan vara relevant för framtida läsare som söker efter och hittar denna fråga i framtiden. Det ’ är lika giltigt som att inkludera information om WebP eller föreslå användning av PNG.
• Om du behöver delvis transparens bör du använda en mask (som kan vara en separat gråskala PNG) istället för klippning.
• Det här är som att säga att du kan köra din bil över havet … om du lägger den på en båt. Kom igen.
• Att göra pennsteget i Photoshop bara för att exportera sökvägen till Illustrator för att exportera till SVG verkar som ett grovt missbruk av programmen – gör bara pennsteget i Illustrator. Med detta sagt verkar det som om det både komplicerar problemet och är för begränsande för moderna metoder (t.ex. du kan ’ inte ha delvis öppenhet med det här alternativet). Om det finns ’ bildformat, använd bara PNG. Om källbilden måste vara en JPG ska maskeringen göras med en gråmaskbildmask som vad Joey föreslår. Uteslutande av specifika behov bör det vara de enda två rimliga alternativen.

JPEG 2000 (även känd som JP2) är en förbättrad version av det ursprungliga JPEG-formatet (från 1992) som också har fullt stöd för transparens, men det har otäckt webbläsarsupport (endast Safari stöder det).

Jag håller med Lucian, använd bara PNG, det stöds extremt, och det finns många verktyg (pngcrush, optipng , pngout …) för att komprimera filer. Se här för en jämförelse.

När det gäller vad tylisirn sa, jag förstår oro för filstorlek, men överväg detta: det är normen för att webbsidor ska vara uppblåsta idag. Å andra sidan lämnar en snabb sidladdningstid ett bra intryck på användarna och har en positiv effekt på SEO .

Kommentarer

• relaterade: progressiv bildåtergivning
• @ beppe9000 tack för länken ! När jag läste det påminde jag mig om hur Facebook använder suddiga miniatyrer som platshållare medan den laddar ner den faktiska bilden. Det ’ är inte riktigt progressiv laddning, mer av en distraktion istället för tomt utrymme, men mikrotumnaturerna har fördelen att de tar en försumbar mängd utrymme (~ 200 byte). Denna teknik kan definitivt tillämpas på PNG, kanske till och med JPEG om den har stöd för anpassade metadata, men jag tror inte ’ att webbläsare skulle vara intresserade av att implementera den … engineering.fb.com/android/the-technology-behind-preview-photos
• Trevlig teknik på fb … Tja, jag tror det inte ’ t skalas mycket bra med innehåll som visas av olika enheter. Förmodligen är WebP ett mer tilltalande alternativ. Den här är också en bra läsning: developers.google.com/web/fundamentals/performance/…

Du kan ta bort bakgrunden dynamiskt med PHP och Imagick. (ta bort en fushia-färg till exempel). ~ du skapar en PNG / GIF vid körning från JPG (du kan cacha transparent bild i en mapp för att undvika överhettning av servern)

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

Kommentarer

• Ett coolt alternativ, men förmodligen inte relevant eftersom OP bara tillhandahåller bildfilen till en klient som inte utformar och är värd för sin webbplats ’ s backend för dem. Som sådan måste själva bilden stödja transparens.

På grund av JPEGs förlust av komprimering komprimering, att skapa en JPEG med en platt färgbakgrund för chroma-keying rekommenderas inte eftersom färgen kommer att blöda i omgivande områden.

Beroende på hur bilderna används, tillhandahåller en gråskala matt bild utöver en standard JPEG kan räcka, eftersom i JEPG-formatet lagras gråskalakomponenten i bilddata med en mycket högre upplösning än färgdata. Dessa måste kombineras med canvas API eller liknande.

Som andra har nämnt, skulle en bättre lösning vara att bara använda ett format som PNG, som naivt stöder en alfakanal och är webbläsarkompatibel.

Med tillkomsten av CSS3 mask-image -egenskap kan man tillhandahålla en extern alfamaskbild för JPEG: erna, vilket ger dem alfakanalen de saknar.

Kommentarer

• Jag var inte ’ jag var inte medveten om detta, trevligt att veta! Men det verkar inte ’ svara på frågan. Det verkar inte som ’ att OP är direkt involverad i webbutveckling men har träffat en vägg med en felinformerad begäran från en klient.
• Naturligtvis. Men för andra som söker liknande lösningar kan det vara användbart.

Bortsett från edge-cases presenteras i de andra svaren stöder inte JPEG för alla praktiska ändamål transparens.

De vanligaste formaten som stöder transparens är PNG, GIF och SVG.

Om inget av dessa filformat är lämpliga för klienten och en JPEG krävs av någon outlandisk anledning, då behöver du helt enkelt tillhandahålla en JPEG för varje användningsfall.

Om de gör en affisch så ska de berätta affischen färg och ge en JPEG-bakgrund som matchar. Om de bara skriver ut på papper ska en vit bakgrund vara bra. Om den kommer att användas på deras webbplats måste du ange en bakgrund som är lämplig för varje plats som används på webbplatsen.

Tips: se till att ta betalt för varje användningsfall

Kommentarer

• Att inkludera SVG i listan är något missvisande, eftersom det ’ är ett mycket annat format än de andra två.
• @ Abion47 Även IE9 stöder det . Jag skulle säga att alla tryckerier som är värda sitt salt kommer att begära ett SVG eftersom det låter dem spränga det så stort som de behöver.
• Du missförstår min poäng. En bild som började livet som en rasterbild kan inte sparas som en SVG så att den kan sparas som en PNG eller GIF. Om OP ’ s ursprungligen var i ett vektorformat, borde den absolut förvaras som ett vektorformat så länge som möjligt. Men om det ’ är en bildkomposition (till exempel i Photoshop) har SVG-fartyget sedan länge seglat såvida OP inte vill göra om hela projektet effektivt för att spara det som ett SVG.

Du kan skapa PNG-bild med transparens och sedan konvertera den till SVG som innehåller en färg information som JPEG och en alfakanal som en gråskalemask. Här är ett verktyg jag skrev för att göra det https://github.com/igrmk/transpeg

Ja, det här är möjligt.

Skapa bara en urklippsbana i panelen Banor. När du sparar filen som JPEG lagrar Photoshop klippvägen i avsnittet JPEG-metadata.

Observera att klippvägen endast kommer att ha effekt när din klient öppnar filen i Photoshop, inte i de flesta andra program, specifikt inte i webbläsare.

Kommentarer

• ” Min klient vill att jag ska tillhandahålla bilder för webben som JPEG ”
• @Scott OTOH, detta svar och JPEG2000 svarar faktiskt på frågan som skriven. i.kym-cdn.com/photos/images/original/000/909/991/48c.jpg
• @JollyJoker Nej de don ’ t, eftersom OP specifikt bad om bilder angående deras användning på webben, så varken Photoshop-specifika metadatabaserade masker eller JPEG-utökade bildformat med praktiskt taget obefintlig webbläsare stödet riktar sig verkligen till OP ’ s faktiska behov som skrivet i frågan .