JPEG cu fundal transparent

JPG nu permite fundaluri transparente.

Singurul lucru puteți face este să aveți un fundal de culoare plată care să se integreze în site-ul dvs. web: de ex. dacă fundalul site-ului dvs. web este alb, atunci creați JPG-uri cu un fundal alb.

În caz contrar, trebuie să luați în considerare salvarea ca PNG, ceea ce permite o transparență adevărată.

Comentarii

• Este o idee bună să încercați să setați o culoare de fundal de amestecare, deoarece s-ar putea să nu fie omogenă?
• @Amessihel Nu, dar ‘ este singura opțiune dacă formatul JPG este într-adevăr necesar și transparența trebuie simulată.

JPEG nu acceptă deloc transparența.

Cea mai compatibilă opțiune este utilizarea PNG, dar rezultă fișiere mari pentru fotografii, deoarece este o compresie fără pierderi.

O altă opțiune este să folosiți noul format de fișier WebP care acceptă atât compresia fără pierderi (cum ar fi PNG), cât și compresia cu pierderi (cum ar fi JPEG) și permite transparența cu ambele. Asistența pentru WebP este relativ bun în aceste zile, dar încă nu universal (în special nici Safari, nici IE acceptă aceasta, dar Edge o face).

Comentarii

• În ceea ce privește WebP, cred mai ales: Safari în prezent nu o suportă deloc (mobil și desktop) ). Aceasta elimină aproximativ 25% din întreaga cotă de piață a browserului, incluzând evident toate iPhone-urile.
• Asistență pentru browser WebP .
• De ce ar fi nevoie de transparență în fotografiile de înaltă rezoluție?
• @Crowley, ia în considerare o ” despre pagina ” cu fotografii ale personalului companiei ‘.
• @Mark încă nu găsesc motiv folosind transparența acolo. Alegerea corectă a fundalului de fotografiere este o modalitate mult mai ordonată.

În timp ce formatul JPEG nu poate fi gestionat transparență în sine, este în întregime posibil să aveți transparență utilizând JPEG-uri cu browsere moderne. Este totuși complicat. Implică utilizarea SVG pentru a crea o mască de tăiere care să gestioneze transparența. Cu Photoshop, puteți face acest lucru cu instrumentul stilou și apoi exportați în Illustrator, unde puteți converti calea instrumentului stilou într-un SVG.

Iată un ghid mai detaliat despre cum să faceți deci.

Trucul este să faci două lucruri:

• JPG
• Decuparea

JPG-ul este suficient de ușor. Afișați acest lucru chiar din Photoshop. Optimizați.

Acum putem configura SVG. SVG este încântat să ia un grafic raster. SVG este cunoscut pentru grafica vectorială, dar este un format de imagine foarte flexibil.

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

Pentru a obține calea, exportăm calea pe care am creat-o cu instrumentul Pen la Illustrator. Acum avem calea acolo și este „ușor de exportat ca SVG [.]

Acum avem datele de cale de care avem nevoie [.] Să „folosim cele din cadrul SVG pe care le-am început. Apoi, de asemenea, aplicați calea clipului în:

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

Alternativ, iată un instrument care va converti doar un PNG într-un SVG cu JPEG încorporate . Avantajul față de WebP este că va funcționa în Internet Explorer (începând cu versiunea 9) și Safari (începând cu versiunea 3), inclusiv pe iOS.

Acestea fiind spuse, standardul obișnuit este într-adevăr să colorați doar fundalul JPEG pentru a se potrivi cu cel al site-ului web sau pentru a utiliza PNG optimizat pe 8 biți (folosind un instrument precum PNGQuant pentru a converti PNG-uri obișnuite pe 32 de biți).

Comentarii

• În mod corect, SVG cu o mască de tăiere nu jpg. Și o mască de tăiere este un nivel de complexitate care poate sau nu poate fi dorit.
• @ Scott Sunt de acord; nu este ‘ t. Dar nu ‘ nu am citit întrebarea ca fiind necesară. Nu ‘ nu spune un ” fișier JPEG care conține transparență ” ci doar ” imagini pentru web ca JPEG cu transparență, ” care este mai ambiguu. În plus, chiar dacă nu asta au vrut să spună OP sau clientul lor, cred că informațiile din Răspunsul meu pot fi relevante pentru viitorii cititori care caută și găsesc această Întrebare în viitor. ‘ este la fel de valid ca includerea informațiilor despre WebP sau sugerarea utilizării PNG.
• Dacă aveți nevoie de transparență parțială, ar trebui să utilizați o mască (care ar putea fie o PNG separată în tonuri de gri) în loc de tăiere.
• Este ca și cum ai spune că poți conduce mașina peste ocean … dacă o pui pe o barcă. Haideți.
• Efectuarea pasului stilou în Photoshop doar pentru a exporta calea către Illustrator pentru exportul în SVG pare o utilizare greșită a programelor – pur și simplu faceți pasul stiloului în Illustrator. Acestea fiind spuse, acest lucru pare că ambele complică excesiv problema și este prea limitativ pentru practicile moderne (de exemplu, nu puteți ‘ să aveți transparență parțială cu această opțiune). Dacă există ‘ flexibilitate în formatul imaginii, atunci utilizați doar PNG. Dacă imaginea sursă trebuie să fie un JPG, atunci mascarea trebuie făcută cu o mască de imagine în tonuri de gri, așa cum sugerează Joey. Cu excepția nevoilor specifice, acestea ar trebui să fie singurele două opțiuni rezonabile.

JPEG 2000 (cunoscut și sub numele de JP2) este o versiune îmbunătățită a formatului JPEG original (din 1992) care are, de asemenea, suport complet pentru transparență, dar are suport pentru browser abisal (numai Safari îl acceptă).

Sunt de acord cu Lucian, doar folosește PNG, este extrem de bine acceptat și există multe instrumente (pngcrush, optipng , pngout …) pentru a comprima fișiere. Consultați aici pentru o comparație.

În ceea ce privește ceea ce a spus tylisirn, înțeleg îngrijorarea cu privire la dimensiunea fișierului, dar ia în considerare acest lucru: este norma pentru ca paginile web să fie umflate, în aceste zile. Cu toate acestea, pe de altă parte, timpul de încărcare rapidă a paginii lasă o impresie bună asupra utilizatorilor și are un efect pozitiv asupra SEO .

Comentarii

• legate de: redare progresivă a imaginilor
• @ beppe9000 mulțumesc pentru link ! În timp ce îl citeam, mi-a fost amintit cum Facebook folosește miniaturi neclare ca substituenți în timp ce descarcă imaginea reală. Nu ‘ nu este o încărcare cu adevărat progresivă, mai degrabă o distragere a atenției în loc de spațiu gol, dar microtubele au avantajul de a lua o cantitate neglijabilă de spațiu (~ 200 octeți). Această tehnică ar putea fi aplicată cu siguranță PNG, poate chiar JPEG dacă are suport pentru metadate personalizate, dar nu cred că ‘ nu cred că browserele ar fi interesate să o implementeze … engineering.fb.com/android/the-technology-behind-preview-photos
• Inginerie frumoasă la fb … Ei bine, cred că nu ‘ nu se potrivește foarte bine cu conținut difuzat de diferite entități. Probabil WebP este o alternativă mai atrăgătoare. Aceasta este și o lectură bună: developer.google.com/web/fundamentals/performance/…

Puteți elimina dinamic fundalul cu PHP și Imagick. (de exemplu, eliminați o culoare fushia). ~ creați un PNG / GIF în timp de execuție din JPG (puteți cache imaginea transparentă într-un folder pentru a evita supraîncălzirea serverului)

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

Comentarii

• O opțiune interesantă, dar probabil nu este relevantă deoarece OP oferă doar fișierul imagine către un client, care nu proiectează și nu găzduiește backend-ul pentru site-ul web ‘. Ca atare, imaginea în sine trebuie să susțină transparența.

Datorită naturii de compresie cu pierderi a JPEG comprimare, nu este recomandată crearea unui JPEG cu un fundal de culoare plat pentru tastarea cromului, deoarece culoarea va sângera în zonele înconjurătoare.

În funcție de modul în care sunt utilizate imaginile, furnizarea unei imagini mată în tonuri de gri în plus față de un JPEG standard poate fi suficient, deoarece în formatul JEPG componenta în tonuri de gri a datelor imaginii este stocată la o rezoluție mult mai mare decât datele color. Acestea ar trebui combinate folosind API-ul canvas sau similar.

După cum au menționat alții, o soluție mai bună ar fi să folosiți doar un format precum PNG, care acceptă naiv un canal alfa și este compatibil cu browserul.

Odată cu apariția proprietății CSS3 mask-image, s-ar putea furniza o imagine mască alfa externă pentru JPEG, acordându-le astfel canalul alfa le lipsește.

Comentarii

• Nu eram ‘ conștient de acest lucru, plăcut să știu! Dar ‘ nu pare să răspundă la întrebare. ‘ nu pare că OP este direct implicat în dezvoltarea web, dar a lovit un perete cu o cerere dezinformată de la un client.
• Desigur. Dar, pentru alții care caută soluții similare, acest lucru s-ar putea dovedi util.

În afară de marginile-cazuri prezentat în celelalte răspunsuri, un JPEG pentru toate scopurile practice nu acceptă transparența.

Cele mai comune formate care vor susține transparența sunt PNG, GIF și SVG.

Dacă niciunul dintre acestea formatele de fișiere sunt potrivite pentru client și un JPEG este necesar din orice motiv extraordinar, atunci trebuie pur și simplu să furnizați un JPEG pentru fiecare caz de utilizare.

Dacă fac un poster, cereți-i să vă spună posterul color și oferă un JPEG cu un fundal pe măsură. Dacă pur și simplu imprimă pe hârtie, atunci un fundal alb ar trebui să fie bine. Dacă va fi utilizat pe site-ul lor web, va trebui să furnizați un fundal adecvat fiecărui loc utilizat pe site.

Sugestie: asigurați-vă că taxați pentru fiecare caz de utilizare

Comentarii

• Includerea SVG în lista respectivă este oarecum înșelătoare, având în vedere că ‘ este un format foarte diferit de celelalte două.
• @ Abion47 Chiar IE9 îl acceptă . Aș spune că orice companie de tipografie care își merită sarea va solicita un SVG, deoarece îi va lăsa să explodeze cât de mare are nevoie.
• Înțelegeți greșit ideea mea. O imagine care a început viața ca imagine raster nu poate fi salvată ca SVG în modul în care poate fi salvată ca PNG sau GIF. Dacă imaginea OP ‘ a fost inițial într-un format vectorial, atunci ar trebui păstrată absolut ca format vector cât mai mult timp posibil. Dar dacă ‘ este o compoziție de imagine (în Photoshop, de exemplu), atunci nava SVG a navigat de mult, cu excepția cazului în care OP dorește să refacă efectiv întregul proiect pentru a-l salva ca un SVG.

Puteți crea o imagine PNG cu transparență și apoi o puteți converti în SVG care conține o culoare informații ca JPEG și un canal alfa ca o mască în tonuri de gri. Iată un instrument pe care l-am scris pentru ao face https://github.com/igrmk/transpeg

Da, acest lucru este posibil.

Doar creați o cale de tăiere în panoul Căi. Când salvați fișierul ca JPEG, Photoshop stochează calea de tăiere în secțiunea de metadate JPEG.

Rețineți că calea de tăiere va avea efect numai atunci când clientul dvs. deschide fișierul în Photoshop, nu în majoritatea celorlalte programe, în mod special nu în browserele web.

Comentarii

• ” Clientul meu vrea să vă furnizez imagini pentru web ca JPEG ”
• @Scott OTOH, acest răspuns și cel JPEG2000 răspund de fapt la întrebare ca scris. i.kym-cdn.com/photos/images/original/000/909/991/48c.jpg
• @JollyJoker Nu ei nu ‘ t, văzând că OP a cerut în mod specific imagini cu privire la utilizarea lor pe web, deci nici măști bazate pe metadate specifice Photoshop-ului și nici formate de imagine extinse JPEG cu browser practic inexistent asistența răspunde într-adevăr nevoilor reale ale OP ‘ așa cum este scris în întrebare .