JPEG z przezroczystym tłem

JPG nie pozwala na przezroczyste tło.

Jedyna rzecz co możesz zrobić, to mieć płaskie kolorowe tło, które będzie wtapiać się w Twoją witrynę: np. jeśli tło Twojej witryny jest białe, utwórz pliki JPG z białym tłem.

W przeciwnym razie rozważ zapisanie w formacie PNG, który zapewnia prawdziwą przezroczystość.

Komentarze

• Czy warto spróbować ustawić mieszany kolor tła, ponieważ może nie być jednorodny?
• @Amessihel Nie, ale ' to jedyna opcja, jeśli format JPG jest rzeczywiście wymagany i należy symulować przezroczystość.

JPEG w ogóle nie obsługuje przezroczystości.

Najbardziej zgodną opcją jest użycie formatu PNG, ale daje to duże pliki dla zdjęć, ponieważ jest to kompresja bezstratna.

Inna opcja polega na użyciu nowego formatu plików WebP, który obsługuje zarówno kompresję bezstratną (np. PNG), jak i kompresję stratną (np. JPEG), oraz zapewnia przezroczystość w obu przypadkach. Obsługa WebP jest stosunkowo dobry w dzisiejszych czasach, ale jeszcze nie uniwersalny (w szczególności ani Safari, ani IE nie obsługują ale Edge to robi).

Komentarze

• Jeśli chodzi o WebP, to myślę bardziej: Safari obecnie w ogóle go nie obsługuje (na urządzeniach mobilnych ani na komputerach ). To eliminuje ~ 25% całego udziału w rynku przeglądarek, w tym oczywiście wszystkich iPhoneów.
• Obsługa przeglądarek WebP .
• Dlaczego potrzebna byłaby przezroczystość na zdjęciach w wysokiej rozdzielczości?
• @Crowley, rozważ ” o ” stronie ze zdjęciami pracowników firmy '.
• @Mark Nadal nie mogę znaleźć powodu, by używać tam przezroczystości. Właściwy wybór tła fotografowania jest o wiele przyjemniejszy.

Chociaż format JPEG nie obsługuje przezroczystość, jest całkowicie możliwe, aby uzyskać przezroczystość za pomocą plików JPEG w nowoczesnych przeglądarkach. Jest to jednak skomplikowane. Wymaga użycia SVG do utworzenia maski przycinającej, która obsługuje przezroczystość. W Photoshopie można to zrobić za pomocą narzędzia Pióro i następnie wyeksportuj do programu Illustrator, gdzie możesz przekonwertować ścieżkę narzędzia pióra na plik SVG.

Oto bardziej szczegółowy przewodnik , jak to zrobić więc.

Sztuczka polega na zrobieniu dwóch rzeczy:

• JPG
• Wycinek

JPG jest dość łatwe. Wykonaj to bezpośrednio z Photoshopa. Optymalizuj.

Teraz możemy ustawić SVG. SVG chętnie podejmie e grafikę rastrową. SVG jest znany z grafiki wektorowej, ale jest to bardzo elastyczny format obrazu.

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

Aby uzyskać ścieżkę, eksportujemy utworzoną przez nas ścieżkę do Illustrator. Mamy już ścieżkę i łatwo ją wyeksportować jako SVG [.]

Teraz mamy dane ścieżki, których potrzebujemy [.] Użyjmy tego w SVG, który rozpoczęliśmy. Następnie zastosuj tę ścieżkę klipu do:

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

Alternatywnie, oto narzędzie, które po prostu przekonwertuje PNG na SVG z osadzonymi plikami JPEG . Zaletą nad WebP jest to, że będzie działać w Internet Explorerze (od wersji 9) i Safari (od wersji 3), w tym na iOS.

To powiedziawszy, zwykłym standardem jest po prostu kolorowanie tła JPEG aby dopasować się do strony internetowej lub użyć zoptymalizowanego 8-bitowego PNG (za pomocą narzędzia takiego jak PNGQuant do konwersji zwykłych 32-bitowych plików PNG).

Komentarze

• Trzeba przyznać, że SVG z maską przycinającą to nie jpg. Maska przycinająca to poziom złożoności, który może być pożądany lub nie.
• @Scott Zgadzam się; nie jest to ' t. Ale nie ' nie czytam pytania jako wymagającego tego. Nie ' nie zawiera ” pliku JPEG zawierającego przezroczystość „, ale tylko ” obrazy do internetu w formacie JPEG z przezroczystością, ” co jest bardziej niejednoznaczne. Ponadto, nawet jeśli nie to miał na myśli OP lub jego klient, uważam, że informacje zawarte w mojej odpowiedzi mogą być istotne dla przyszłych czytelników, którzy będą szukać i znajdować to pytanie w przyszłości. ' jest tak samo ważne, jak dołączanie informacji o WebP lub sugerowanie użycia PNG.
• Jeśli potrzebujesz częściowej przezroczystości, powinieneś użyć maski (która może być oddzielnym plikiem PNG w skali szarości) zamiast przycinania.
• To tak, jakby powiedzieć, że możesz jeździć samochodem po oceanie … jeśli umieścisz go na łodzi. Chodź.
• Wykonywanie kroku piórem w programie Photoshop, aby wyeksportować ścieżkę do programu Illustrator w celu eksportu do formatu SVG, wydaje się rażącym nadużyciem programów – po prostu wykonaj krok pióra w programie Illustrator. To powiedziawszy, wydaje się, że zarówno komplikuje problem, jak i jest zbyt ograniczające dla nowoczesnych praktyk (np. Możesz ' nie mieć częściowej przejrzystości dzięki tej opcji). Jeśli istnieje ' elastyczność formatu obrazu, po prostu użyj PNG. Jeśli obraz źródłowy musi być JPG, maskowanie powinno być wykonane za pomocą maski obrazu w skali szarości, tak jak sugeruje Joey. Poza określonymi potrzebami powinny to być jedyne dwie rozsądne opcje.

JPEG 2000 (znany również jako JP2) to ulepszona wersja oryginalnego formatu JPEG (z 1992 r.), która również w pełni obsługuje przezroczystość, ale ma fatalna obsługa przeglądarek (obsługuje to tylko Safari).

Zgadzam się z Lucianem, po prostu używam PNG, jest bardzo dobrze obsługiwany i jest wiele narzędzi (pngcrush, optipng , pngout …) do kompresji plików. Zobacz tutaj dla porównania.

W odniesieniu do tego, co powiedział Tylisirn, rozumiem obawy dotyczące rozmiaru pliku, ale zastanów się: to jest w dzisiejszych czasach norma, że strony internetowe są rozdęte. Jednak z drugiej strony szybki czas ładowania strony pozostawia dobre wrażenie na użytkownikach, a ma pozytywny wpływ na SEO .

Komentarze

• related: progresywne renderowanie obrazu
• @ beppe9000 dzięki za link ! Podczas czytania przypomniało mi się, jak Facebook używa rozmytych miniatur jako symboli zastępczych podczas pobierania rzeczywistego obrazu. To ' naprawdę nie ładuje się progresywnie, bardziej rozprasza zamiast pustej przestrzeni, ale mikropęcherzyki mają tę zaletę, że zajmują znikomą ilość miejsca (~ 200 bajtów). Tę technikę z pewnością można zastosować do formatu PNG, może nawet JPEG, jeśli obsługuje niestandardowe metadane, ale nie ' nie sądzę, że przeglądarki byłyby zainteresowane jej implementacją … engineering.fb.com/android/the-technology-behind-preview-photos
• Dobra inżynieria na fb … Cóż, myślę, że tak nie jest ' t bardzo dobrze skaluje się z treścią obsługiwaną przez różne podmioty. Prawdopodobnie WebP jest bardziej atrakcyjną alternatywą. Ten też dobrze się czyta: developers.google.com/web/fundamentals/performance/…

Dzięki PHP i Imagick możesz dynamicznie usuwać tło. (na przykład usuń kolor fushia). ~ tworzysz PNG / GIF w czasie wykonywania z JPG (możesz buforować przezroczysty obraz w folderze, aby uniknąć przegrzania serwera)

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

Komentarze

• Fajna opcja, ale prawdopodobnie nieistotna, ponieważ OP tylko dostarcza plik obrazu do klient, który nie projektuje i nie hostuje swojej witryny ' dla nich. W związku z tym sam obraz musi obsługiwać przezroczystość.

Ze względu na stratną kompresję formatu JPEG nie zaleca się tworzenia pliku JPEG z płaskim kolorem tła do kluczowania kolorem, ponieważ kolor będzie się rozlewał na otaczające obszary.

W zależności od tego, jak obrazy są używane, oprócz standardowy JPEG może wystarczyć, ponieważ w formacie JEPG składnik danych obrazu w skali szarości jest przechowywany w znacznie wyższej rozdzielczości niż dane koloru. Musiałyby być połączone przy użyciu interfejsu API kanwy lub podobnego.

Jak wspominali inni, lepszym rozwiązaniem byłoby użycie formatu takiego jak PNG, który naiwnie obsługuje kanał alfa i jest kompatybilny z przeglądarkami.

Wraz z pojawieniem się właściwości CSS3 mask-image można było udostępnić obraz z maską alfa dla plików JPEG, przyznając im w ten sposób kanał alfa ich brakuje.

Komentarze

• Nie ' nie byłem tego świadomy, miło wiedzieć! Ale wydaje się, że nie ' nie odpowiada na pytanie. Nie wydaje się, że ' OP jest bezpośrednio zaangażowany w tworzenie stron internetowych, ale trafił na ścianę z błędnym żądaniem klienta.
• Oczywiście. Ale dla innych szukających podobnych rozwiązań może się to okazać przydatne.

Poza skrajnymi przypadkami przedstawiony w innych odpowiedziach JPEG do wszystkich praktycznych celów nie obsługuje przezroczystości.

Najpopularniejsze formaty, które obsługują przezroczystość to PNG, GIF i SVG.

Jeśli żaden z nich formaty plików są odpowiednie dla klienta, a plik JPEG jest wymagany z dowolnego dziwacznego powodu, po prostu musisz dostarczyć plik JPEG dla każdego przypadku użycia.

Jeśli robią plakat, poproś o przekazanie plakatu kolor i podaj plik JPEG z dopasowanym tłem. Jeśli po prostu drukują na papierze, powinno wystarczyć białe tło. Jeśli będzie używany w ich witrynie internetowej, będziesz musiał podać tło odpowiednie dla każdego miejsca używanego w witrynie.

Wskazówka: pamiętaj, aby pobierać opłaty za każdy przypadek użycia

Komentarze

• Umieszczenie pliku SVG na tej liście jest nieco mylące, ponieważ ' ma bardzo inny format niż pozostałe dwa.
• @ Abion47 Even IE9 obsługuje to . Powiedziałbym, że każda firma drukarska warta swojej soli poprosi o SVG, ponieważ pozwoli im to wysadzić tak duży, jak potrzebują.
• Źle rozumiesz mój punkt widzenia. Obraz, który zaczął istnieć jako obraz rastrowy, nie może zostać zapisany jako SVG w taki sposób, w jaki można go zapisać jako PNG lub GIF. Jeśli obraz OP ' był pierwotnie w formacie wektorowym, to należy bezwzględnie przechowywać go w formacie wektorowym tak długo, jak to możliwe. Ale jeśli ' jest kompozycją obrazu (na przykład w Photoshopie), to statek SVG już dawno odpłynął, chyba że OP chce skutecznie przerobić cały projekt, aby zapisać go jako SVG.

Możesz utworzyć obraz PNG z przezroczystością, a następnie przekonwertować go na SVG zawierający kolor informacje w formacie JPEG i kanał alfa jako maska w skali szarości. Oto narzędzie, które napisałem, aby to zrobić https://github.com/igrmk/transpeg

Tak, jest to możliwe.

Po prostu utwórz ścieżkę obcinania w panelu Ścieżki. Podczas zapisywania pliku jako JPEG, Photoshop przechowuje ścieżkę przycinającą w sekcji metadanych JPEG.

Zwróć uwagę, że ścieżka obcinania zadziała tylko wtedy, gdy klient otworzy plik w Photoshopie, a nie w większości innych programów, specjalnie nie w przeglądarkach internetowych.

Komentarze

• ” Mój klient chce, żebym dostarczył obrazy do internetu jako JPEG ”
• @Scott OTOH, ta odpowiedź i JPEG2000 faktycznie odpowiadają na pytanie jako pisemny. i.kym-cdn.com/photos/images/original/000/909/991/48c.jpg
• @JollyJoker Nie, oni nie ' t, widząc, że OP specjalnie poprosił o obrazy dotyczące ich wykorzystania w Internecie, więc ani maski oparte na metadanych specyficzne dla programu Photoshop, ani formaty obrazów rozszerzone na JPEG w praktycznie nieistniejącej przeglądarce wsparcie naprawdę odpowiada na rzeczywiste potrzeby OP ' zgodnie z pytaniem .