JPEG con sfondo trasparente

JPG non consente sfondi trasparenti.

Lunica cosa quello che puoi fare è avere uno sfondo di colore piatto che si fonde con il tuo sito web: es. se lo sfondo del tuo sito web è bianco, crea file JPG con uno sfondo bianco.

In caso contrario, devi considerare il salvataggio come PNG, che consente la vera trasparenza.

Commenti

• È una buona idea provare a impostare un colore di sfondo per la fusione poiché potrebbe non essere omogeneo?
• @Amessihel No, ma ‘ è lunica opzione se il formato JPG è effettivamente richiesto e la trasparenza deve essere simulata.

JPEG non supporta affatto la trasparenza.

Lopzione più compatibile è usare PNG, ma produce file di grandi dimensioni per le fotografie perché è una compressione senza perdita di dati.

Unaltra opzione consiste nellutilizzare il nuovo formato di file WebP che supporta sia la compressione senza perdita (come PNG) che la compressione con perdita (come JPEG) e consente la trasparenza con entrambi. Il supporto per WebP è relativamente buono in questi giorni, ma non ancora universale (in particolare né Safari né IE supportano esso, ma Edge lo fa).

Commenti

• Per quanto riguarda WebP, penso più in particolare: Safari attualmente non lo supporta affatto (mobile né desktop ). Ciò elimina circa il 25% dellintera quota di mercato dei browser, inclusi ovviamente tutti gli iPhone.
• Supporto browser WebP .
• Perché è necessaria la trasparenza nelle fotografie ad alta risoluzione?
• @Crowley, considera una pagina ” su ” con fotografie dello staff dellazienda ‘.
• @Mark Non riesco ancora a trovare una ragione per usare la trasparenza. La scelta corretta dello sfondo della ripresa è molto più ordinata.

Anche se il formato JPEG non può “t gestire trasparenza stessa, è del tutto possibile avere la trasparenza utilizzando JPEG con i browser moderni. Tuttavia è complicato. Implica lutilizzo di SVG per creare una maschera di ritaglio che gestisce la trasparenza. Con Photoshop, puoi farlo con lo strumento penna e quindi esporta in Illustrator, dove puoi convertire il percorso dello strumento penna in un SVG.

Ecco una guida più dettagliata su come fare quindi.

Il trucco sta nel fare due cose:

• Il JPG
• Il ritaglio

Il JPG è abbastanza facile. Invialo direttamente da Photoshop. Ottimizza.

Ora possiamo configurare SVG. SVG è felice di accettare e unimmagine raster. SVG è noto per la grafica vettoriale, ma “è un formato di immagine molto flessibile.

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

Per ottenere il percorso, esportiamo il percorso che abbiamo creato con lo strumento Penna in Illustrator. Ora abbiamo il percorso laggiù ed è facile esportarlo come SVG [.]

Ora abbiamo i dati di percorso di cui abbiamo bisogno [.] Usiamoli allinterno di a nellSVG che abbiamo iniziato. Quindi applica il percorso del clip anche a:

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

In alternativa, ecco uno strumento che convertirà semplicemente un PNG in un SVG con JPEG incorporati . Il vantaggio rispetto a WebP è che funzionerà in Internet Explorer (dalla versione 9) e Safari (dalla versione 3), anche su iOS.

Detto questo, lo standard usuale è infatti quello di colorare solo lo sfondo JPEG in modo che corrisponda a quello del sito Web o per utilizzare PNG a 8 bit ottimizzato (utilizzando uno strumento come PNGQuant per convertire i normali PNG a 32 bit).

Commenti

• In tutta franchezza, SVG con una maschera di ritaglio non jpg. E una maschera di ritaglio è un livello di complessità che può o non può essere desiderato.
• @Scott Sono daccordo; non è ‘ t. Ma non ‘ leggo la Domanda perché lo richiede. ‘ non dice un ” file JPEG contenente trasparenza ” ma solo ” immagini per il Web come JPEG con trasparenza, ” che è più ambigua. Inoltre, anche se questo non è ciò che intendeva lOP o il suo cliente, credo che le informazioni nella mia risposta possano essere rilevanti per i futuri lettori che cercheranno e troveranno questa Domanda in futuro. ‘ è valido tanto quanto includere informazioni su WebP o suggerire luso di PNG.
• Se hai bisogno di una trasparenza parziale, dovresti usare una maschera (che potrebbe essere un PNG separato in scala di grigi) invece di ritagliare.
• Questo è come dire che puoi guidare la tua macchina sulloceano … se la metti su una barca. Andiamo.
• Eseguire il passaggio penna in Photoshop solo per esportare il percorso in Illustrator per lesportazione in SVG sembra un grosso uso improprio dei programmi: basta eseguire il passaggio penna in Illustrator. Detto questo, sembra che sia troppo complicato il problema e sia troppo limitante per le pratiche moderne (ad esempio, con questa opzione non puoi ‘ avere una trasparenza parziale). Se ‘ è flessibile nel formato dellimmagine, utilizza semplicemente PNG. Se limmagine di origine deve essere un JPG, la mascheratura dovrebbe essere eseguita con una maschera di immagine in scala di grigi come suggerisce Joey. Salvo esigenze specifiche, queste dovrebbero essere le uniche due opzioni ragionevoli.

JPEG 2000 (noto anche come JP2) è una versione migliorata del formato JPEG originale (dal 1992) che ha anche il pieno supporto per la trasparenza, ma ha abissale supporto browser (solo Safari lo supporta).

Sono daccordo con Lucian, usa solo PNG, è estremamente ben supportato e ci sono molti strumenti (pngcrush, optipng , pngout …) per comprimere i file. Vedere qui per un confronto.

Riguardo a ciò che ha detto tylisirn, capisco la preoccupazione per la dimensione del file, ma considera questo: è la norma per le pagine web di essere gonfio, in questi giorni. Tuttavia, daltra parte, un tempo di caricamento della pagina veloce lascia una buona impressione sugli utenti e ha un effetto positivo sulla SEO .

Commenti

• related: rendering progressivo dellimmagine
• @ beppe9000 grazie per il collegamento ! Durante la lettura mi è venuto in mente come Facebook utilizza miniature sfocate come segnaposto mentre scarica limmagine reale. ‘ non è realmente un caricamento progressivo, è più una distrazione invece che uno spazio vuoto, ma le microtumbnails hanno il vantaggio di occupare una quantità trascurabile di spazio (~ 200 byte). Questa tecnica potrebbe sicuramente essere applicata a PNG, forse anche JPEG se supporta metadati personalizzati, ma non ‘ credo che i browser sarebbero interessati a implementarla … engineering.fb.com/android/the-technology-behind-preview-photos
• Nice engineering at fb … Beh, penso di no ‘ t scala molto bene con i contenuti offerti da entità diverse. Probabilmente WebP è unalternativa più interessante. Anche questa è una buona lettura: developers.google.com/web/fundamentals/performance/…

Con PHP e Imagick puoi rimuovere lo sfondo dinamicamente. (rimuovi un colore fucsia per esempio). ~ crei un PNG / GIF in fase di esecuzione da JPG (puoi memorizzare nella cache unimmagine trasparente in una cartella per evitare il surriscaldamento del server)

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

Commenti

• Unopzione interessante, ma probabilmente non rilevante in quanto OP si limita a fornire il file immagine a un cliente, che non progetta e ospita il backend del proprio sito Web ‘ per loro. In quanto tale, limmagine stessa deve supportare la trasparenza.

A causa della natura di compressione con perdita di JPEG compressione, la creazione di un JPEG con uno sfondo di colore piatto per il chroma-keying non è consigliata poiché il colore si spargerà nelle aree circostanti.

A seconda di come vengono utilizzate le immagini, fornire unimmagine opaca in scala di grigi oltre a un JPEG standard può essere sufficiente, poiché nel formato JEPG la componente in scala di grigi dei dati dellimmagine viene memorizzata a una risoluzione molto più alta rispetto ai dati del colore. Questi dovrebbero essere combinati utilizzando lAPI canvas o simili.

Come altri hanno già detto, una soluzione migliore sarebbe usare semplicemente un formato come PNG, che ingenuamente supporta un canale alfa ed è compatibile con il browser.

Con lavvento della proprietà CSS3 mask-image, si poteva fornire unimmagine di maschera alfa esterna per i JPEG, garantendo loro il canale alfa mancano.

Commenti

• ‘ non ne ero consapevole, bello saperlo! Ma ‘ non sembra rispondere alla domanda. ‘ non sembra che lOP sia direttamente coinvolto nello sviluppo web, ma ha colpito un muro con una richiesta male informata da un client.
• Ovviamente. Tuttavia, per altri che cercano soluzioni simili, questo potrebbe rivelarsi utile.

A parte i casi limite presentato nelle altre risposte un JPEG per tutti gli scopi pratici non supporta la trasparenza.

I formati più comuni che supporteranno la trasparenza sono PNG, GIF e SVG.

Se nessuno di questi i formati di file sono adatti al cliente e un JPEG è richiesto per qualsiasi motivo stravagante, allora devi semplicemente fornire un JPEG per ogni caso duso.

Se stanno facendo un poster, chiedi loro di dirti il poster colore e fornire un JPEG con uno sfondo da abbinare. Se stanno semplicemente stampando su carta, uno sfondo bianco dovrebbe andare bene. Se verrà utilizzato sul loro sito Web, sarà necessario fornire uno sfondo adatto a ciascun luogo utilizzato sul sito Web.

Suggerimento: assicurarsi di addebitare ogni caso duso

Commenti

• Includere SVG in quellelenco è in qualche modo fuorviante, visto che ‘ è un formato molto diverso dagli altri due.
• @ Abion47 Even IE9 lo supporta . Direi che qualsiasi azienda di stampa degna di questo nome richiederà un SVG poiché gli consentirà di farlo esplodere quanto necessario.
• Hai frainteso il mio punto di vista. Unimmagine che è nata come immagine raster non può essere salvata come SVG nel modo in cui può essere salvata come PNG o GIF. Se limmagine di OP ‘ era originariamente in un formato vettoriale, allora dovrebbe essere assolutamente mantenuta come formato vettoriale il più a lungo possibile. Ma se ‘ è una composizione di immagini (in Photoshop, ad esempio), la nave SVG ha navigato da tempo a meno che OP non voglia rifare efficacemente lintero progetto per salvarlo come un SVG.

Puoi creare unimmagine PNG con trasparenza e poi convertirla in SVG contenente un colore informazioni come JPEG e un canale alfa come maschera in scala di grigi. Ecco uno strumento che ho scritto per farlo https://github.com/igrmk/transpeg

Sì, è possibile.

Basta creare un tracciato di ritaglio nel pannello Tracciati. Quando si salva il file come JPEG, Photoshop memorizza il percorso di ritaglio nella sezione dei metadati JPEG.

Tieni presente che il percorso di ritaglio avrà effetto solo quando il tuo client apre il file in Photoshop, non nella maggior parte degli altri programmi, specificamente non nei browser web.

Commenti

• ” Il mio cliente vuole che io fornisca immagini per il Web come JPEG ”
• @Scott OTOH, questa risposta e quella JPEG2000 in realtà rispondono alla domanda come scritto. i.kym-cdn.com/photos/images/original/000/909/991/48c.jpg
• @JollyJoker No, don ‘ t, visto che OP ha chiesto specificamente immagini riguardo al loro utilizzo sul Web, quindi né maschere basate su metadati specifiche di Photoshop né formati di immagine estesi JPEG con browser praticamente inesistente supporta realmente le reali esigenze di OP ‘ come scritto nella domanda .