Formaty obrazów SVG, PNG i JPG: plusy i minusy. Obraz PNG - jak otworzyć, edytować i konwertować plik Co oznacza format png
Ogłoszenie
Format pliku obrazu rastrowego PNG
Pliki PNG (powszechnie nazywane „pingami”) to pliki w formacie, który zawiera mapy bitowe. Format obrazu PNG został pierwotnie utworzony jako przejście z formatu GIF, ponieważ oba mają możliwość wyświetlania przezroczystego tła. Kolejnym podobieństwem między tymi formatami jest użycie indeksowanych kolorów i bezstratnej kompresji. Jednak pliki PNG mają różne zestawy ograniczeń praw autorskich. Co więcej, w przeciwieństwie do obrazów GIF, pliki PNG nie obsługują animacji. Na stronie Online-onvert.com możesz łatwo i całkowicie bezpłatnie.
Informacje techniczne o plikach PNG
Obrazy PNG są najlepsze rozwiązanie(w porównaniu do plików GIF) ze względu na to, że te pierwsze wykorzystują między innymi 8-bitowy kanał przezroczystości, a także obsługują 24-bitowe kolory RGB, obrazy RGB i skalę szarości. Pliki PNG zostały opracowane w celu ułatwienia procesu przesyłania ich przez Internet. Jako nieprofesjonalny format obrazu PNG nie obsługuje innych przestrzeni kolorów.
Ponadto, jako darmowy format, PNG oferuje projektantowi stron internetowych różne praktyczne zalety w porównaniu z GIF:
Lepsza kompresja: w przypadku większości obrazów PNG osiąga mniejszy rozmiar pliku niż GIF
Świetna głębia kolorów: PNG oferuje truecolor do 48 bitów, podczas gdy w GIF mamy tylko 256 palety kolorów
Przezroczystość kanału alfa: Podczas gdy GIF oferuje tylko przezroczystość binarną, PNG pozwala na prawie nieograniczone efekty przezroczystości, oferując kanał alfa dla przezroczystości.
Należy zauważyć, że PNG nie pozwala na animację, tak jak robi to GIF. Istnieje jednak standard wieloobrazowej grafiki sieciowej (MNG), który to umożliwia, ale nie jest on powszechnie obsługiwany przez przeglądarki internetowe i edytory obrazów.
Dlaczego więc GIF jest wciąż tak popularny?
Prawdopodobnie zastanawiasz się, dlaczego format PNG nie jest tak powszechnie używany w sieci, jeśli jest tak dobry, jak reklamowany. Odpowiedzią jest w większości błędne przekonanie na temat formatu i obsługi przeglądarki.
Z powodu Internet Explorer 6 lub więcej wczesne wersje nie obsługują pełnego zakresu funkcji PNG (w tym przezroczystości kanału alfa) ludzie mogą wierzyć (chociaż to nieprawda), że Internet Explorer w ogóle nie obsługuje PNG, a przynajmniej nie obsługuje przezroczystości. W rzeczywistości Internet Explorer 5 i 6 obsługują wystarczająco dużo specyfikacji PNG, aby funkcjonalnie odpowiadać (lub bardziej) nieanimowanym obrazom GIF. Wszystkie inne wymienione przeglądarki, w tym Firefox, Netscape 6 i nowsze, Mozilla, Opera 6 i nowsze, Safari i Camino, w pełni obsługują przezroczystość PNG.
Oprócz tego błędnego przekonania na temat obsługi przeglądarek, wbudowany animacja gif był (i nadal jest) głównym powodem jego sukcesu. Chociaż z biegiem lat korzystanie z GIF stało się mniej popularne w porównaniu z innymi technologiami (np. Flash), które coraz bardziej nadają się do animacji.
Przejrzystość jest kluczową cechą plików GIF i PNG i często jest powodem, dla którego projektant stron internetowych wybiera format, którego chce użyć. Chociaż PNG oferuje bardziej wszechstronną obsługę przezroczystości, projektanci stron internetowych często muszą tworzyć wersje GIF obrazów, aby pasowały do starszych przeglądarek. Przy użyciu CSS jest to możliwe (i nieco trywialne), wysyłając obrazy GIF dla starszych przeglądarek i wysokiej jakości pliki PNG do przeglądarek, które je rozumieją. Ale to podwójna praca dla projektanta stron internetowych, w wyniku czego ludzie stawiają na najmniejszy opór i nadal używają obrazów GIF.
Przyjrzeliśmy się więc kilku powodom, dla których GIF jest nadal tak popularny, ale większość z nich opiera się na niezrozumieniu koncepcji lub użyciu znanego przepływu pracy. Uzbrojony w kluczową wiedzę na temat PNG i tego, jak można go niezawodnie używać w przeglądarkach, możesz skorzystać ze wszystkich oferowanych przez niego korzyści.
A co z JPEG?
JPEG to kolejny wszechobecny format internetowy i w większości przypadków, takich jak zdjęcia (lub tym podobne), jest nawet lepszy niż PNG lub GIF. PNG nie ma konkurować z JPEG. Kompresja JPEG sprawia, że pliki są znacznie mniejsze niż PNG podczas pracy ze zdjęciami. Z drugiej strony, PNG tworzy mniejsze pliki, gdy wewnątrz obrazów znajduje się tekst, linie artystyczne, logo, „jednolite” kolory itp.
Kilka świetnych przykładów użycia skromnego PNG
Teraz spójrzmy, jak używać PNG w projektowaniu stron internetowych. Wszystkie pliki dla każdego przykładu zebrałem w osobnym folderze dostępnym u znajomych ED.
Gradient
W ciągu ostatnich kilku lat gradient — płynne przejście między dwoma lub więcej kolorami — stał się najlepszym przyjacielem projektanta stron internetowych. Szczególnie popularne są wyrafinowane, ledwo do odróżnienia wypełnienia gradientowe, które bez rzucania się w oczy tworzą wrażenie głębi i faktury. Czasami GIF jest najlepszym wyborem dla gradientu. Jeśli gradient jest prostym dwukolorowym przejściem, GIF działa w nim bezbłędnie. Jednak ograniczenie GIF-a do tylko 256 kolorów często tworzy zauważalne i niechlujne „pasma” wśród bardziej złożonych przejść gradientowych. Z drugiej strony JPEG może generować całkiem zgrabne gradienty, ale często kosztem większego rozmiaru pliku. I chociaż gradienty JPEG są ogólnie wystarczająco dobre, pamiętaj, że JPEG używa kompresji stratnej, co oznacza, że wynikowy obraz nigdy nie będzie odpowiadał jakości nieskompresowanego obrazu.
Typowy styl gradientu tła, o którym mowa, jest używany do przycisków, pól lub po prostu gdziekolwiek indziej. Może to wyglądać jak na rysunku 5-1. Zgodnie z ruchem wskazówek zegara, od góry po lewej, widzimy oryginalny (nieskompresowany) obraz, wersję GIF, wersję PNG i JPEG. Widać, że PNG ma najmniejszy rozmiar (515 bajtów) w wyniku. To cztery razy mniej niż obraz gif. JPEG jest nieco większy niż PNG i ma 637 bajtów, a także jest gorszej jakości ze względu na kompresję stratną (chociaż ludzkie oko jest w stanie określić różnicę w jakości prosty przykład pozostaje pytanie).
Rysunek 5-1 Panel Photoshopa - Zapisz do Internetu, pokazywanie różnic rozmiar pliku dla tego samego obrazu w różnych formatach
Obraz, który powinien działać na każdym tle
Czasami konieczne jest stworzenie obrazu, który zachowuje się tak samo na różnych podłożach. Typowymi przykładami są logo i ikony. W takich sytuacjach tradycyjnie dominowały Pliki GIF, ale istnieje kilka powodów, dla których PNG może być więcej najlepszy wybór w tej sytuacji. PNG ma tendencję do wygrywania w rozmiarze pliku dla logo lub innej prostej „sztuki”. Ponadto nieodłączna przezroczystość PNG sprawia, że prosta kreacja pojedyncze pliki, które działają na dowolnym tle. PNG oferuje przezroczystość binarną, taką jak GIF, ale zapewnia również znacznie bardziej pożądaną opcję z kanałem alfa, w którym piksele mogą być częściowo przezroczyste, a nie tylko być włączone lub wyłączone. Użycie tego ostatniego zwiększa rozmiar pliku, czasami nawet bardziej niż GIF z przezroczystością binarną, ale pozwala na wygładzenie krawędzi obrazu i sprawia, że umieszczenie go na tle jest bardziej eleganckie.
Jednak przerobiłem ich koncepcję, używając białego obrazu z symbolami szablonu. Użyli białego symbolu na przezroczyste tło, co z reguły może być całkiem skuteczne. W tym przypadku Twoje tło kolor CSS pojawi się w kwadratowym lub prostokątnym obszarze wokół symbolu, zamiast samego symbolu.
Zarówno Dan, jak i PJ używali przezroczystego GIF-a zamiast PNG. To całkowicie pokryło ich potrzeby i musieli stworzyć pikselowe obrazy dla stylu ikon. Dzięki PNG możesz uzyskać podobną technikę, ale z dodatkową korzyścią, jaką jest antyaliasing i częściowa przezroczystość, do wykorzystania w bardziej szczegółowych ikonach.
No dobrze, ale w jakich przeglądarkach to działa?
Wiem, o czym myślisz: cała ta przezroczystość PNG wygląda dobrze, ale czy jest to praktyczne?
Dobrą wiadomością jest to, że wszyscy nowoczesne przeglądarki pełne wsparcie Obrazy PNG, w tym przezroczystość kanału alfa, której zalety pokazałem na przykładach. Safari (wszystkie wersje), Firefox (wszystkie wersje), Opera (wersje 6 i nowsze), Netscape (wersje 6 i nowsze) i Mozilla (wszystkie wersje) zrobią z hukiem wszystko, o co ich poproszę. Ale zła wiadomość to jedyna przeglądarka, o której jeszcze nie wspomniałem: Internet Explorer.
Internet Explorer 6 i starsze wersje nie obsługują przezroczystości kanału alfa osadzonego w formacie PNG. Ponieważ większość internautów dokonała wyboru przeglądarki (lub nie wyboru), ta ziejąca dziura trzymała projektantów stron internetowych z dala od PNG. Jednak wraz z wydaniem Internet Explorera 7 otrzymaliśmy pełną obsługę przezroczystości PNG w wersji alfa we wszystkich głównych przeglądarkach. Co dalej, czy istnieją sposoby pracy z przezroczystością PNG alfa w Internet Explorer 6 i starszych? Jeśli więc chcesz użyć tego efektu, nic Cię nie powstrzyma. Internet Explorer 6 i wcześniejsze wersje wymagają więcej niż wystarczającej uwagi, ale jest to zdecydowanie możliwe.
Hack dla Internet Explorera: AlphaImageLoader
Internet Explorer jest dostarczany z różnymi natywnymi filtrami. Są używane w CSS, ale nie są częścią oficjalnej specyfikacji CSS. Innymi słowy, nie są one standaryzowane w sieci. Niestety Internet Explorer 6 i starsze wersje nie obsługują w pełni formatu PNG (co jest zalecane przez W3C), Microsoft ma filtr, który naprawia tę wadę: AlphaImageLoader.
Zgodnie z sekcją na oficjalnej stronie Microsoftu, AlphaImageLoader „wyświetla obraz w granicach obiektu i między tłem obiektu a jego zawartością”. Innymi słowy, AlphaImageLoader ładuje obraz PNG z pełną przezroczystością, ale ładuje go jako własną warstwę, poniżej której znajduje się zawartość obiektu, na którym został zastosowany. Obrazy PNG załadowane w ten sposób zachowują się bardziej jak obrazy tła niż obrazy pierwszego planu (chociaż w rzeczywistości "siedzą" na wierzchu tła obiektu).
Ogólnie rzecz biorąc, możesz po prostu zastosować AlphaImageLoader w CSS na elementach img i cieszyć się rezultatem. Obraz zostanie załadowany jako pierwszy, przezroczystość pozostanie, ale potem obraz zostanie załadowany ponownie - jako przednia zawartość obiektu - z nieprzezroczystymi obszarami (a więc "zacieniowanie" twojej przezroczystej wersji).
Nie możesz używać przezroczystego PNG, takiego jak zdjęcie w tle CSS dla elementu (X)HTML (powiedzmy dla
) i oczekuj, że AlphaImageLoader wykona zadanie poprawnie w Internet Explorerze. Pamiętaj, że AlphaImageLoader wstawia obraz między tłem a pierwszym planem obiektu. Dlatego, chociaż załaduje twój obraz w całej jego przezroczystości, będzie również ładował go jako tło obraz css i bez twoich cudownych półprzezroczystych pikseli.
Prawdziwe wykorzystanie AlphaImageLoader
Wróćmy do jednego z wcześniejszych przykładów i spróbujmy go poprawnie załadować w Internet Explorerze. Pamiętasz kanał 49, stację telewizyjną w Topece? Jestem pewien, że tak. Rysunek 5-21 przedstawia wygląd witryny w przeglądarce Internet Explorer 6.
Rysunek 5-21 Nagłówek 49abcnews.com renderowany w Internet Explorer 6 dla Windows, z nienaruszoną przezroczystością PNG.
Wygląda na to, że kod HTML góry związanej z pogodą już się domyślasz:
Obecnie w Topece, KS: 82° Pobierz prognozę i nie tylko...
Widzisz obraz i to zdecydowanie PNG, nawet Internet Explorer ładuje go bezbłędnie. Sekretnym składnikiem tego jest JavaScript. W rzeczywistości użyłem trochę skryptów DOM, aby usunąć element img w locie i zastąpić go elementem div, który - zgadłeś - używa AlphaImageLoader. JavaScript jest opisany w komentarzach warunkowych, kolejnym przydatnym, ale całkowicie niestandaryzowanym idiomie firmy Microsoft wbudowanym w Internet Explorer. Komentarze warunkowe pozwalają na użycie kodu tylko dla znanego Wersje internetowe poszukiwacz. Kod jest ignorowany przez wszystkie inne przeglądarki, więc nie ma na nie żadnego wpływu. W żywiole
stronie www.49abcnews.com, znajdziesz:
Dzięki pierwszej linii, jeśli lte IE6, ten skrypt zostanie uwzględniony w renderowanym dokumencie tylko wtedy, gdy zostanie wyświetlony w przeglądarce Internet Explorer w wersji mniejszej lub równej (określonej przez lte) 6. Wszystkie inne przeglądarki, w tym nowo przybyły Internet Explorer 7 całkowicie to zignoruje.
Więc co znajduje się w pliku JavaScript fixWeatherPng.js? Spójrzmy:
Window.attachEvent("onload", fixWeatherPng); function fixWeatherPng() ( var img = document.getElementById("weatherImage"); var src = img.src; img.style.visibility = "ukryty"; var div = document.createElement("DIV"); div.style. filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(+ src + "", sizing="scale")"; // Niektóre style CSS specyficzne dla 49abcnews.com zostały pominięte dla zwięzłości. img.replaceNode(div); )
Przeanalizujmy krok po kroku, co robi skrypt. Najpierw mówimy przeglądarce, że chcemy wykonać funkcję fixWeatherPng podczas wczytywania strony. Reszta skryptu to sama funkcja.
Na początek najpierw szukamy obrazu, z którym będziemy pracować, według jego atrybutu id i przechowujemy go w zmiennej img. Przechowujemy atrybut src (URL do pliku obrazu) w zmiennej src. Następnie ukrywamy element img, ustawiając właściwość CSS widoczności na hidden.
W końcu zastępujemy oryginalny element img (który jest ukryty) nowo utworzonym elementem div, do którego pomyślnie dołączono AlphaImageLoader.
Używanie skryptów DOM do wstrzykiwania AlphaImageLoader - filtrowanie bitów w locie - ma swoją złą, ale konieczną stronę - zły CSS. Ponadto niesemantyczne elementy div będą zawarte poza znacznikami (X)HTML. I tak długo, jak to wszystko jest opisane w komentarzach warunkowych, nie ma szans na uszkodzenie innych przeglądarek przez kod Microsoftu. (handyblogger: tutaj Jeff próbuje subtelnie wskazać „niezdarne” rozwiązanie firmy Microsoft)
Jeśli musisz zrobić coś nie tak, przynajmniej możesz to wydobyć i oddzielić od wszystkiego, co tego nie potrzebuje.
W areszcie
PNG, jako format graficzny, oferuje wiele zalet technicznych, wykraczających poza te powszechnie stosowane w plikach GIF. W rzeczywistości korzyści są tak duże, że PNG mógł już dawno przejąć rolę formatu graficznego niezwiązanego z obrazami fotograficznymi. Brak obsługi przez Internet Explorer niektórych ważniejszych funkcji PNG, takich jak przezroczystość kanału alfa, zniechęcił wielu twórców stron internetowych. Są jednak dwa bardzo dobre powody, dla których nie powinieneś bać się PNG.
Po pierwsze, nawet Internet Explorer 6 i wcześniejsze wersje prawie całkowicie obsługują PNG, jeśli chodzi o możliwości GIF (oczywiście z wyjątkiem animacji). PNG prawie zawsze pokazuje mniejszy rozmiar pliku, dzięki czemu ładują się szybciej i zużywają mniej zasobów.
Po drugie, Internet Explorer 7 oferuje pełną obsługę przezroczystości PNG w wersji alfa. Efekty, które można osiągnąć dzięki pełnej gamie półprzezroczystych opcji, są prawie nieograniczone. Oczekuję, że projektanci, którzy znajdą ciekawe sposoby wykorzystania przezroczystości PNG, na wzór tych opisanych w tym artykule, otworzą drzwi na nowy poziom stylów, których nigdy wcześniej nie widziano. Podałem ci kilka przydatnych pomysłów na to, co możesz stworzyć z przezroczystością PNG, ale nie poprzestawaj na tym. Szukać siebie!
Fragment z Web Standards Creativity autorstwa Camerona Adamsa, Marka Boultona, Andy'ego Clarke'a, Simona Collisona, Jeffa Crofta, Ethana Marcotte'a, Dereka Featherstone'a, Iana Lloyda, Dana Rubina i Roba Weycherta; wysłane przez przyjaciół ED. Copyright Jeff Croft 2007. Wykorzystano za zgodą Apress, Inc.
Plik PNG (z angielskiego Portable Network Graphic) odnosi się do obrazów bitmapowych. Format PNG zawiera określoną paletę kolorów używanych w rysunku. Podobny format graficzny jest dość często używany w sieci WWW przy osadzaniu na stronach internetowych różnych obrazów. Korzystając z algorytmu kompresji Deflate, mapy bitowe, które mają rozszerzenie Plik PNG, są dostępne do kompresji bez widocznej utraty jakości.
Rozwinięty podany format plik do zastąpienia formatu GIF, ponieważ ten ostatni wymagał płatnej oprogramowanie. Wśród właścicieli zasobów internetowych obrazy PNG słyną z doskonałej wydajności w porównaniu z podobnymi formatami. PNG obsługuje głębię kolorów do 48 bitów. Główną różnicą między GIF-em jest to, że takie plik graficzny ograniczone tylko do 8 bitów (łącznie 256 kolorów). Należy pamiętać, że w przeciwieństwie do GIF, PNG nie obsługuje efektów animacji.
Możesz otworzyć plik PNG w praktycznie dowolnej przeglądarce. Na sali operacyjnej system Windows, PNG można otworzyć za pomocą prostego dwukrotnego kliknięcia, aby wyświetlić obrazy. Ten format obrazu działa również w dowolnej przeglądarce internetowej. Jeśli użytkownik potrzebuje zmienić zapisany obrazek na wersję PNG, wystarczy użyć narzędzi do edycji obrazu, takich jak Adobe Photoshop lub Microsoft Windows Photos, a także Corel PaintShop lub ACD Systems.
To rozszerzenie pliku jest bardzo popularne i zawiera wszystkie niezbędne informacje graficzne dla dobrej jakości pełnokolorowych obrazów.
PNG (Portable Network Graphics) to rastrowy format graficzny zawierający 8-bitową paletę kolorów. Algorytm kompresji Deflate opracowany dla plików PNG zmniejsza rozmiar zapisanego obrazu bez utraty jakości obrazu końcowego.
W tym artykule dowiesz się również, jak otworzyć plik PNG.
Charakterystyka
PNG to drugi po JPG najpopularniejszy format internetowy.
Wśród innych zalet warto zwrócić uwagę:
układ z przeplotem;
wbudowana programowa korekcja palety kolorów i gamma.
Ta ostatnia pozwala na wszycie w obraz wszystkich niezbędnych parametrów wyświetlania, tak aby wyglądał na wszystkich ekranach zgodnie z zamierzeniami autora.
Format ma 2 wersje:
PNG-8 (gama kolorów indeksu podobna do GIF);
PNG-24 (pełna i pełna paleta kolorów naśladująca JPEG).
Historia wystąpienia
W 1995 roku, w dobie rozwoju darmowego Internetu, gwałtownie pojawiła się kwestia własnościowego charakteru złożonego formatu GIF. Do wymiany danych graficznych potrzebny był równie niezawodny, ale darmowy i darmowy format ogólnoświatowa sieć. W tym czasie specyfikacje PNG 1.0, zatwierdzone już w 1996 roku, zostały zaprezentowane w międzynarodowym konsorcjum W3C.
Format powstał jako alternatywa dla GIF. Ta ostatnia do 2004 roku była „zamknięta”, to znaczy posiadała szereg ograniczeń swobodnego użytkowania (wymagane prawa autorskie właściciela przy zapisywaniu, licencje patentowe przy publikowaniu). PNG został pozbawiony takich niedociągnięć, implementując obsługę głębi kolorów do 48 bitów i 8-bitowego kanału alfa do przesyłania obrazów.
Twórcom udało się stworzyć płynną przezroczystość kolorów, co w GIF-ie jest niemożliwe. W tym ostatnim paleta jest ograniczona do kanału 8-bitowego (256 kolorów) i obsługuje tylko pełną przezroczystość.
Jak otwierać pliki PNG?
Dziś format graficzny wyświetla się bez problemów w przeglądarce internetowej i standardowe środki aby wyświetlić grafikę. Mówiąc bardziej szczegółowo, obraz jest następujący: każdy system operacyjny ma swój własny zestaw narzędzi do pracy z formatem. Przyjrzyjmy się bliżej, jak otworzyć format PNG.
online
Aby przeglądać pliki w Internecie, użyj następującego oprogramowania:
Okna 7-10
Systemy operacyjne z rodziny Windows otwierają format PNG w następujący sposób:
przeglądarka zdjęć;
MS Farba;
przeglądarka internetowa (tylko podgląd).
Android
Mobilny system operacyjny ma następujące narzędzia:
iOS
Mobile cat dla Apple współpracuje z plikami PNG przy użyciu takiego oprogramowania.
PNG (Portable Network Graphics), wymawiane „ping” to rastrowy format przechowywania grafiki, który wykorzystuje bezstratną kompresję. PNG został stworzony zarówno w celu ulepszenia, jak i zastąpienia formatu GIF formatem obrazu, który nie wymaga licencji. PNG to Międzynarodowy standard(ISO IEC 15948:2003) i oficjalnie zalecane przez W3C.
Format PNG przechowuje informacje graficzne w postaci skompresowanej. Co więcej, kompresja ta odbywa się bez „strat”, w przeciwieństwie do np. standardowego JPEG (nawet przy najwyższym poziomie jakości).
Format PNG ma zastąpić przestarzały i prostszy format GIF, a także, do pewnego stopnia, zastąpić znacznie bardziej złożony format TIFF.
Jeśli mówimy o projektowaniu stron internetowych, to w porównaniu z GIF-em ma on następujące główne zalety:
Ulepszona kompresja: w większości przypadków rozmiar obrazu PNG jest mniejszy niż GIF. - Więcej kolorów na obraz: Praktycznie nieograniczona liczba kolorów na obraz, podczas gdy limit GIF wynosi 256. - Opcjonalna obsługa kanału alfa: Podczas gdy GIF obsługuje tylko przezroczystość binarną, PGN pozwala osiągnąć nieograniczoną liczbę efektów przezroczystości dzięki obsłudze kanału alfa.
Jako wadę warto oczywiście zwrócić uwagę na brak wsparcia dla animacji, np. GIF. Chociaż oczywiście istnieje podobny standard animacji o nazwie Multiple-image Network Graphics (MNG), nie jest on powszechnie używany i dlatego nie jest obsługiwany przez masowo nowoczesne przeglądarki.
