JPEG met transparante achtergrond

JPG staat geen transparante achtergronden toe.

Het enige u kunt doen is een egale achtergrond in kleur hebben die in uw website zou passen: bijv. als de achtergrond van uw website wit is, laat dan JPGs maken met een witte achtergrond.

Anders moet u overwegen om op te slaan als PNG, wat echte transparantie toelaat.

Opmerkingen

• Is dit een goed idee om te proberen een overvloeiende achtergrondkleur in te stellen, aangezien deze misschien niet homogeen is?
• @Amessihel Nee, maar het is ‘ is de enige optie als JPG-indeling inderdaad vereist is en transparantie moet worden gesimuleerd.

JPEG ondersteunt helemaal geen transparantie.

De meest compatibele optie is om PNG te gebruiken, maar resulteert in grote bestanden voor fotos omdat het compressie zonder verlies is.

Een andere optie is om de nieuwe WebP-bestandsindeling te gebruiken die zowel lossless (zoals PNG) als lossy compressie (zoals JPEG) ondersteunt, en transparantie met beide mogelijk maakt. Ondersteuning voor WebP is relatief goed tegenwoordig, maar nog niet universeel (met name noch Safari noch IE ondersteunt maar Edge wel).

Opmerkingen

• Wat betreft WebP, denk ik meer in het bijzonder: Safari ondersteunt het momenteel helemaal niet (mobiel noch desktop ). Dat elimineert ~ 25% van het gehele marktaandeel van de browser, uiteraard inclusief alle iPhones.
• WebP-browserondersteuning .
• Waarom zou je transparantie nodig hebben in fotos met een hoge resolutie?
• @Crowley, overweeg een ” over ” pagina met fotos van het bedrijf ‘ s personeel.
• @Mark Ik kan nog steeds geen reden vinden om transparantie daar te gebruiken. De juiste keuze van de opnameachtergrond is veel netter.

Hoewel het JPEG-formaat “niet overweg kan met transparantie zelf, het is heel goed mogelijk om transparantie te hebben met behulp van JPEGs met moderne browsers. Het is echter ingewikkeld. Je moet SVG gebruiken om een uitknipmasker te maken dat de transparantie afhandelt. Met Photoshop kun je dit doen met het pengereedschap en exporteer vervolgens naar Illustrator, waar u het pad van de pentool kunt converteren naar een SVG.

Hier is een meer gedetailleerde gids voor hoe u dit moet doen dus.

De truc is om twee dingen te maken:

• De JPG
• De clipping

De JPG is eenvoudig genoeg. Voer die rechtstreeks uit vanuit Photoshop. Optimaliseer.

Nu kunnen we de SVG instellen. SVG is er graag mee bezig e een rasterafbeelding. SVG staat bekend om vectorafbeeldingen, maar het is een zeer flexibele afbeeldingsindeling.

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

Om het pad op te halen, exporteren we het pad dat we met het gereedschap Pen hebben gemaakt naar Illustrator. Nu hebben we het pad daarginds, en het is gemakkelijk te exporteren als SVG [.]

Nu hebben we de padgegevens die we nodig hebben [.] Laten we die gebruiken binnen a in de SVG die we zijn begonnen. Pas dan dat clip-pad ook toe op:

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

Als alternatief is hier een tool die gewoon een PNG omzet in een SVG met ingesloten JPEGs . Het voordeel ten opzichte van WebP is dat het werkt in Internet Explorer (sinds versie 9) en Safari (sinds versie 3), ook op iOS.

Dat gezegd hebbende, de gebruikelijke standaard is inderdaad om alleen de JPEG-achtergrond te kleuren om overeen te komen met die van de website, of om geoptimaliseerde 8-bits PNG te gebruiken (met behulp van een tool zoals PNGQuant om normale 32-bits PNGs te converteren).

Opmerkingen

• Eerlijk gezegd is SVG met een uitknipmasker niet jpg. En een uitknipmasker is een niveau van complexiteit dat al dan niet gewenst is.
• @Scott Ik ga akkoord; het is niet ‘ t. Maar ik heb ‘ niet gelezen dat de vraag dat vereist. Het ‘ zegt niet een ” JPEG-bestand met transparantie ” maar slechts ” afbeeldingen voor internet als JPEG met transparantie, ” wat meer dubbelzinnig is. Bovendien, zelfs als dat niet is wat het OP of hun cliënt bedoelde, denk ik dat de informatie in mijn Antwoord relevant kan zijn voor toekomstige lezers die deze vraag in de toekomst zoeken en vinden. Het ‘ is net zo geldig als informatie over WebP opnemen of het gebruik van PNG suggereren.
• Als je gedeeltelijke transparantie nodig hebt, moet je een masker gebruiken (wat zou kunnen een aparte PNG in grijstinten zijn) in plaats van knippen.
• Dit is hetzelfde als zeggen dat je met je auto over de oceaan kunt rijden … als je hem op een boot zet. Kom op.
• De penstap in Photoshop uitvoeren om het pad naar Illustrator te exporteren om naar SVG te exporteren, lijkt een grof misbruik van de programmas – doe gewoon de penstap in Illustrator. Dat gezegd hebbende, lijkt het erop dat het zowel het probleem te ingewikkeld maakt als te beperkend is voor moderne praktijken (je kunt bijvoorbeeld ‘ geen gedeeltelijke transparantie hebben met deze optie). Als er ‘ flexibiliteit is voor het afbeeldingsformaat, gebruik dan gewoon PNG. Als de bronafbeelding een JPG moet zijn, moet de maskering worden gedaan met een afbeeldingsmasker in grijswaarden, zoals Joey suggereert. Behoudens specifieke behoeften, zouden dat de enige twee redelijke opties moeten zijn.

JPEG 2000 (ook bekend als JP2) is een verbeterde versie van het originele JPEG-formaat (uit 1992) dat ook volledige ondersteuning biedt voor transparantie, maar het heeft verschrikkelijke browserondersteuning (alleen Safari ondersteunt het).

Ik ben het met Lucian eens, gebruik gewoon PNG, het wordt buitengewoon goed ondersteund en er zijn veel tools (pngcrush, optipng , pngout …) om bestanden te comprimeren. Zie hier voor een vergelijking.

Met betrekking tot wat tylisirn zei, begrijp ik de bezorgdheid over de bestandsgrootte, maar overweeg dit: het is de norm voor webpaginas die tegenwoordig opgeblazen zijn. Aan de andere kant laat een snelle laadtijd van de pagina een goede indruk achter bij gebruikers, en heeft een positief effect op SEO .

Opmerkingen

• gerelateerd: progressieve beeldweergave
• @ beppe9000 bedankt voor de link ! Tijdens het lezen werd ik eraan herinnerd hoe Facebook wazige miniaturen als tijdelijke aanduidingen gebruikt terwijl het de daadwerkelijke afbeelding downloadt. Het ‘ is niet echt progressief laden, meer een afleiding in plaats van lege ruimte, maar de microthumbnails hebben het voordeel dat ze een verwaarloosbare hoeveelheid ruimte innemen (~ 200 bytes). Deze techniek zou zeker kunnen worden toegepast op PNG, misschien zelfs JPEG als het ondersteuning biedt voor aangepaste metadata, maar ik denk niet dat ‘ niet denkt dat browsers geïnteresseerd zijn in het implementeren ervan … engineering.fb.com/android/the-technology-achter-preview-photos
• Leuke techniek bij fb … Nou, ik denk dat dat niet zo is ‘ t schaal zeer goed met inhoud die door verschillende entiteiten wordt bediend. Waarschijnlijk is WebP een aantrekkelijker alternatief. Deze is ook goed gelezen: developers.google.com/web/fundamentals/performance/…

Je kunt met PHP en Imagick de achtergrond dynamisch verwijderen. (verwijder bijvoorbeeld een fushia-kleur). ~ je maakt tijdens runtime een PNG / GIF van JPG (je kunt transparante afbeelding in een map opslaan om oververhitting van de server te voorkomen)

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

Reacties

• Een leuke optie, maar waarschijnlijk niet relevant aangezien OP alleen het afbeeldingsbestand levert aan een klant, die niet zijn website ‘ s backend voor hen ontwerpt en host. Als zodanig moet de afbeelding zelf transparantie ondersteunen.

Vanwege de verliesgevende compressie van JPEG compressie, wordt het maken van een JPEG met een egale kleurachtergrond voor chroma-keying niet aanbevolen, aangezien de kleur zal overlopen in de omliggende gebieden.

Afhankelijk van hoe de afbeeldingen worden gebruikt, levert een matbeeld in grijswaarden naast een standaard JPEG kan volstaan, omdat in het JEPG-formaat de grijswaardencomponent van de beeldgegevens wordt opgeslagen met een veel hogere resolutie dan de kleurgegevens. Deze zouden moeten worden gecombineerd met behulp van de canvas-API of iets dergelijks.

Zoals anderen al hebben gezegd, zou een betere oplossing zijn om gewoon een formaat als PNG te gebruiken, dat naïef een alfakanaal ondersteunt en browser-compatibel is.

Met de komst van CSS3 mask-image -eigenschap, zou men een externe alpha-maskerafbeelding voor de JPEGs kunnen leveren, waardoor ze het alfakanaal krijgen ze missen.

Opmerkingen

• Ik was me ‘ niet hiervan bewust, leuk om te weten! Maar het lijkt de vraag niet ‘ te beantwoorden. Het lijkt niet ‘ Het lijkt erop dat het OP direct betrokken is bij webontwikkeling, maar een muur heeft geraakt met een verkeerd geïnformeerd verzoek van een klant.
• Natuurlijk. Maar voor anderen die vergelijkbare oplossingen zoeken, kan dit nuttig zijn.

Afgezien van de randgevallen gepresenteerd in de andere antwoorden, ondersteunt een JPEG voor alle praktische doeleinden geen transparantie.

De meest gebruikelijke formaten die transparantie ondersteunen zijn PNG, GIF en SVG.

Als geen van deze bestandsformaten zijn geschikt voor de klant en een JPEG is vereist om welke bizarre reden dan ook, dan hoef je alleen maar een JPEG op te geven voor elk gebruik.

Als ze een poster maken, laat ze je dan de poster vertellen kleur en voorzie een JPEG van een bijpassende achtergrond. Als ze gewoon op papier afdrukken, zou een witte achtergrond prima moeten zijn. Als het op hun website wordt gebruikt, moet u een achtergrond opgeven die geschikt is voor elke plaats die op de website wordt gebruikt.

Hint: zorg ervoor dat u voor elk gebruik in rekening brengt.

Opmerkingen

• SVG opnemen in die lijst is enigszins misleidend, aangezien het ‘ een heel ander formaat is dan de andere twee.
• @ Abion47 Even IE9 ondersteunt het . Ik zou zeggen dat elke drukkerij die hun zout waard is, een SVG zal aanvragen, omdat ze deze zo groot kunnen opblazen als ze nodig hebben.
• Je begrijpt mijn punt verkeerd. Een afbeelding die zijn leven begon als een rasterafbeelding, kan niet worden opgeslagen als een SVG op de manier waarop deze kan worden opgeslagen als een PNG of GIF. Als de afbeelding van OP ‘ oorspronkelijk in een vectorformaat was, dan zou het absoluut zo lang mogelijk als vectorformaat bewaard moeten worden. Maar als het ‘ een beeldcompositie is (in Photoshop bijvoorbeeld), dan is het SVG-schip al lang vertrokken, tenzij OP het hele project effectief opnieuw wil uitvoeren om het op te slaan als een SVG.

U kunt een PNG-afbeelding met transparantie maken en deze vervolgens converteren naar SVG met een kleur informatie als JPEG en een alfakanaal als een grijswaardenmasker. Hier is een tool die ik heb geschreven om het te doen https://github.com/igrmk/transpeg

Ja, dit is mogelijk.

Maak gewoon een uitknippad aan in het Paden-paneel. Wanneer u het bestand opslaat als JPEG, slaat Photoshop het uitknippad op in de JPEG-metagegevenssectie.

Merk op dat het uitknippad alleen effect heeft wanneer uw cliënt het bestand opent in Photoshop, niet in de meeste andere programmas. specifiek niet in webbrowsers.

Opmerkingen

• ” Mijn klant wil dat ik lever afbeeldingen voor het web als JPEG ”
• @Scott OTOH, dit antwoord en de JPEG2000-versie beantwoorden de vraag eigenlijk als geschreven. i.kym-cdn.com/photos/images/original/000/909/991/48c.jpg
• @JollyJoker Nee ze don ‘ t, aangezien OP specifiek om afbeeldingen vroeg met betrekking tot het gebruik ervan op internet, dus noch Photoshop-specifieke metadata-gebaseerde maskers, noch JPEG-uitgebreide afbeeldingsindelingen met een vrijwel onbestaande browser ondersteuning echt adres OP ‘ s werkelijke behoeften zoals geschreven in de vraag .