Rastrowy format graficzny PNG pojawił się jako swego rodzaju majdan wolnych programistów przeciwko technologicznej oligarchii, zachłanności i żądzy zysku, które dławiły rozwój Internetu.
W połowie lat dziewięćdziesiątych ubiegłego wieku trwała pierwsza rewolucja internetowa. Konsorcjum ogólnoświatowa sieć W3C w wyniku bezkrwawego zamachu stanu usunęła legalnie wybrane (przekupując elektorat) Tymczasowe Przedstawicielstwo w osobie Microsoftu i Netscape. Ci ostatni nie byli w stanie dojść do porozumienia w sprawie standardów i sprowadzili młodą cywilizację cyfrową na skraj wojny przeglądarkowej.
Istnieje pilna potrzeba wprowadzenia powszechnej unifikacji technologii internetowych. Istniejący wówczas format graficzny GIF miał jednak małą, ale istotną wadę - posiadał licencję komercyjną, m.in. na technologię kompresji danych.
Jak zwykle nikt nie chciał płacić, dlatego też, aby uniknąć chaosu w sieci WWW, gdy strony jednego dewelopera nie mogą być przeglądane w przeglądarkach innego, grupa programistów-wolontariuszy stworzyła specyfikację PNG, która okazała się nie być gorszy od GIF i pod pewnymi względami miał znaczące zalety.
Cechy techniczne formatu PNG Ogólnie rzecz biorąc, jeśli przyjrzysz się uważnie, PNG różni się od GIF mniej więcej w ten sam sposób, w jaki MS Office różni się od LibreOffice. Oparty na grafice rastrowej z kompresją, indeksowaną paletą kolorów. Twórcy PNG wzięli jednak pod uwagę błędy GIF i udało im się je wyeliminować Nowa technologia od uciążliwych problemów przeszłości.
- Schemat kompresji danych PNG zapewnił, że oryginalny obraz był całkowicie bezstratny, niezależnie od poziomu kompresji.
- Wyższy poziom kompresji danych.
- W obrazie można było zastosować nieograniczoną liczbę kolorów. Dzięki temu udało się zapewnić jakość i realizm obrazu niemal na poziomie formatu fotograficznego JPEG.
- Obsługa wielopoziomowej przezroczystości warstw.
- Format PNG umożliwia zapisanie wszystkich pośrednich etapów edycji obrazu i przywrócenie dowolnego etapu bez utraty jakości.
Można powiedzieć, że jedyną wadą PNG jest brak możliwości zapisania kilku obrazów w jednym pliku, co nie pozwala na wykorzystanie tej technologii do tworzenia animowanych obrazów. Próbowano stworzyć wersje tego formatu z możliwością animacji, jednak nie było już na nie popytu – na początku XXI wieku wygasła licencja i format graficzny GIF stał się darmowy i można go było używać w dowolnym celu.
Zakres zastosowania PNG Przenośna grafika sieciowa z grubsza oznacza „przenośną grafikę sieciową”. Nawet w nazwie projektu zauważalna jest imitacja GIF - „format graficzny do wymiany przez sieci”.
Aby wyprzeć się mrocznej przeszłości, twórcy PNG rozpowszechnili w Internecie rekurencyjny akronim „Ping is Not a GIF”.
Ping to brytyjska wymowa PNG, w amerykańskim angielskim brzmi bardziej jak P-n-ji, dla rosyjskojęzycznego obserwatora - peenge.
Tak naprawdę rewolucyjny format opakowania grafiki okazał się bardzo dobry i dziś jest najpopularniejszy do przygotowywania zdjęć do publikacji na stronach internetowych, blogach i w sieciach społecznościowych dzięki swoim wyjątkowym właściwościom.
- Wieloplatformowy – czytany równie dobrze przez wszystkie typy nowoczesnych przeglądarek i edytorów graficznych.
- Ma niską wagę wysoka jakość Obrazy.
- Łatwo skompresowany w szerokim zakresie bez utraty jakości.
Oczywiście, jeśli do druku używasz formatu PNG, na przykład dużych kolorowych plakatów lub fotografii, gdzie wymagany jest realizm obrazu, format JPEG sprawdza się lepiej. Natomiast zamieszczając zdjęcia na stronach internetowych należy je oglądać na monitorach komputerów, zwłaszcza małych wyświetlaczach urządzenia mobilne, użytkownicy nie zauważą żadnej różnicy pomiędzy zdjęciem w formacie PNG i JPEG. Dokładniej, aby zauważyć różnicę, trzeba albo uważnie się przyjrzeć, albo być zawodowym fotografem.
W przypadku witryn internetowych ważniejsza jest niewielka waga obrazów, aby nie spowalniać ładowania stron internetowych.
Jeśli weźmiemy pod uwagę statystyki, że odwiedzający spędzają na stronach internetowych średnio kilka sekund, a treść nie jest szczegółowo badana, a powierzchownie skanowana jednym rzutem oka, to jakość obrazu PNG okazuje się być optymalny.
Zalety PNG w porównaniu z JPEG
Podczas procesu powtarzalnej kompresji i edycji obrazy w plikach JPEG ulegają zniekształceniu, pojawiają się kolorowe poświaty i mogą wypadać bloki pikseli.
Jeśli potrzebujesz opublikować na stronie internetowej bardzo przejrzysty schemat, z czytelnymi drobnymi szczegółami, czy infografiki - tutaj PNG daje zdecydowanie lepsze rezultaty niż JPEG, który jest optymalny do pakowania obrazów, w których głównym wymaganiem jest realizm - fotografie naturalnych krajobrazów, zwierzęta, ludzie.
Możliwość tworzenia przezroczystych warstw sprawia, że format PNG jest niezbędny do tworzenia logo, ikon, symboli i przycisków.
PNG posiada funkcję przechowywania metadanych - daty, godziny, miejsca powstania obrazu, informacji o autorze, posiadaczach praw autorskich itp. Warto o tym pamiętać, kiedy zamierzasz opublikować zdjęcie pożyczone z Internetu. Aby uniemożliwić Google zidentyfikowanie duplikatu, należy usunąć metadane z pliku (za pomocą edytora graficznego).
Darmowy konwerter obrazów online do formatu PNG Na tej stronie możesz łatwo przekonwertować prawie każdy obraz do formatu PNG, ustawić głębię kolorów od 1-bitowej do 64-bitowej, a także ustawić poziom kompresji.
Należy pamiętać, że aby zachować przezroczystość powstałego obrazu należy wykorzystać głębię z koloru RGBA. W w tym przypadku litera A oznacza kanał alfa, tj. przezroczysty.
Optymalizacja PNG Nie wszystkie programy tworzą pliki PNG o minimalnym rozmiarze pliku. Dlatego przed publikacją zdjęcia w serwisie zaleca się jego optymalizację. W tym celu możesz skorzystać z różnych narzędzi lub skorzystać z naszej usługi optymalizacji online. Po prostu wybierz obraz i kliknij „Optymalizuj”.
Co więcej, będąc formatem darmowym, PNG oferuje projektantom 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
- Większa głębia kolorów: PNG oferuje Truecolor do 48 bitów, podczas gdy w GIF mamy tylko 256 paletę kolorów
- Przezroczystość kanału alfa: Tam, gdzie GIF oferuje tylko przezroczystość binarną, PNG pozwala na praktycznie nieograniczone efekty przezroczystości, oferując kanał alfa dla przezroczystości
Warto zauważyć, że PNG nie pozwala na animację taką jak GIF. Istnieje jednak standard wieloobrazowej grafiki sieciowej (MNG), który na to pozwala, ale nie jest on powszechnie obsługiwany przez przeglądarki internetowe i edytory graficzne.
Dlaczego więc GIF jest nadal tak popularny? Prawdopodobnie zastanawiasz się, dlaczego PNG nie jest tak powszechnie używanym formatem w Internecie, skoro jest tak dobry, jak reklamowany. Odpowiedź jest w dużej mierze błędnym przekonaniem na temat formatu i obsługi przeglądarki.
Z powodu Internet Explorera 6 lub więcej wczesne wersje nie obsługują pełnego zakresu funkcji PNG (w tym przezroczystości kanału alfa), ludzie są przekonani (chociaż jest to błędne), że Internet Explorer w ogóle nie obsługuje PNG lub przynajmniej nie obsługuje przezroczystości. W rzeczywistości przeglądarki Internet Explorer 5 i 6 obsługują wystarczającą liczbę specyfikacji PNG, aby uczynić je funkcjonalnie równoważnymi (lub lepszymi) nieanimowanym obrazom GIF. Wszystkie inne wymienione przeglądarki, w tym Firefox, Netscape 6 i nowsze wersje, Mozilla, Opera 6 i nowsze wersje, Safari i Camino, w pełni obsługują przezroczystość PNG.
Oprócz tego błędnego przekonania na temat obsługi przeglądarek, wbudowana animacja GIF była (i nadal jest) głównym powodem jego sukcesu. Chociaż z biegiem lat wykorzystanie GIF stało się coraz mniej popularne w porównaniu do innych technologii (na przykład Flash), które coraz bardziej nadają się do animacji.
Przejrzystość jest kluczową cechą GIF i PNG i często jest powodem, dla którego projektant stron internetowych wybiera format, którego chce użyć. Chociaż format PNG oferuje bardziej wszechstronną obsługę przezroczystości, projektanci stron internetowych często muszą tworzyć wersje obrazów w formacie GIF, aby pasowały do starszych przeglądarek. Używając CSS, jest to możliwe (i nieco trywialne), wysyłając obrazy GIF dla starszych przeglądarek i wysokiej jakości obrazy PNG do przeglądarek, które je rozumieją. Jednak dla projektanta stron internetowych jest to podwójna praca, w wyniku czego ludzie podążają ścieżką najmniejszego oporu i nadal korzystają z 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 zastosowaniu znanego przepływu pracy. Uzbrojeni w kluczową wiedzę na temat PNG i tego, jak można go niezawodnie używać w przeglądarkach, możesz skorzystać ze wszystkich korzyści, jakie ma do zaoferowania.
A co z JPEGami? JPEG to kolejny wszechobecny format internetowy, który w większości przypadków, takich jak zdjęcia (i tym podobne), jest nawet lepszy niż PNG lub GIF. PNG nie ma na celu konkurować z JPEG. Podczas pracy ze zdjęciami kompresja JPEG tworzy znacznie mniejsze pliki niż PNG. Z drugiej strony format PNG tworzy mniejsze pliki, jeśli wewnątrz obrazów znajduje się tekst, linie artystyczne, logo, „płaskie” kolory itp.
Kilka świetnych przykładów użycia skromnego PNG Przyjrzyjmy się teraz, jak używać PNG w projektowaniu stron internetowych. Zebrałem wszystkie pliki dla każdego przykładu w osobnym folderze, dostępnym u znajomych ED.
Gradient W ciągu ostatnich kilku lat gradienty — płynne przejście między dwoma lub większą liczbą kolorów — stały się najlepszym przyjacielem projektantów stron internetowych. Szczególnie popularne są subtelne, subtelne wypełnienia gradientowe, które nie rzucając się w oczy, tworzą wrażenie głębi i tekstury.
Czasami GIF jest najlepszym wyborem dla gradientu. Jeśli gradientem jest proste przejście dwukolorowe, GIF sprawdza się w nim bezbłędnie. Jednak ograniczenie GIF do zaledwie 256 kolorów często powoduje zauważalne i niechlujne „pasy” wśród bardziej złożonych przejść gradientowych. Z drugiej strony JPEG może generować całkiem ładne gradienty, ale często kosztem większego rozmiaru pliku. Chociaż gradienty JPEG są na ogół całkiem dobre, należy pamiętać, że JPEG wykorzystuje kompresję stratną, co oznacza, że wynikowy obraz nigdy nie dorówna jakością obrazowi nieskompresowanemu.
Typowy styl gradientu tła, o którym mowa, jest używany w przypadku przycisków, bloków lub po prostu gdziekolwiek indziej. Może to wyglądać jak na rysunku 5-1. Zgodnie z ruchem wskazówek zegara, od lewego górnego rogu, widzimy oryginalny (nieskompresowany) obraz, wersję GIF, wersję PNG i JPEG. Widać, że wynikowy plik PNG ma najmniejszy rozmiar (515 bajtów). To cztery razy mniej niż obraz GIF. JPEG jest nieco większy niż PNG i ma 637 bajtów, a także ma niższą jakość ze względu na kompresję stratną (chociaż zdolność ludzkiego oka do wykrycia różnicy w jakości w tym prostym przykładzie pozostaje wątpliwa).
Rysunek 5-1
Panel Photoshopa - Zapisz do Internetu,
pokazujące różnice w rozmiarze pliku dla tego samego obrazu w różnych formatach
Obraz, który powinien działać na każdym tle Czasami trzeba stworzyć obraz, który będzie działał tak samo na różnych podłożach. Typowymi przykładami są logo i ikony. W takich sytuacjach tradycyjnie dominuje Pliki GIF, ale jest kilka powodów, dla których PNG może być więcej najlepszy wybór w tej sytuacji. PNG zwykle wygrywa pod względem rozmiaru pliku w przypadku logo lub innej prostej „sztuki”. Ponadto nieodłączna przezroczystość PNG sprawia proste stworzenie pojedyncze pliki, które działają na dowolnym tle. PNG oferuje binarną przezroczystość jak GIF, ale zapewnia także znacznie bardziej pożądaną opcję kanału alfa, w którym piksele mogą być częściowo przezroczyste, a nie tylko włączane lub wyłączane. Użycie tego ostatniego zwiększa rozmiar pliku, czasem nawet większy 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ły obraz z symbolami - szablony. Użyli białego symbolu na przezroczystym tle, co ogólnie mogło być całkiem skuteczne. W tym przypadku Twoje kolor tła CSS pojawi się w kwadratowym lub prostokątnym obszarze wokół symbolu, zamiast samego symbolu.
Zarówno Dan, jak i PJ użyli przezroczystego GIF-a zamiast PNG. To całkowicie pokryło ich potrzeby i musieli stworzyć obrazy pikselowe pasujące do stylu ikon. Używając PNG, możesz osiągnąć podobną technikę, ale z pewnymi zaletami w postaci wygładzania i częściowej przezroczystości do wykorzystania w bardziej szczegółowych ikonach.
OK, ale w jakich przeglądarkach to działa? Wiem, co myślisz: cała ta przezroczystość PNG wygląda dobrze, ale czy jest praktyczna?
Dobra wiadomość jest taka, że wszystko nowoczesne przeglądarki Obrazy PNG są w pełni obsługiwane, łącznie z przezroczystością kanału alfa, czego zalety pokazałem w przykładach. Safari (wszystkie wersje), Firefox (wszystkie wersje), Opera (wersje 6 i nowsze), Netscape (wersje 6 i nowsze) oraz Mozilla (wszystkie wersje) zrobią wszystko, o co ich poproszę. Ale jest jedna zła wiadomość - jedyna przeglądarka, o której jeszcze nie wspomniałem, a którą posiada większość Twoich użytkowników: Internet Explorer.
Internet Explorer 6 i starsze wersje nie obsługują przezroczystości kanału alfa wbudowanej w format PNG. Odkąd większość internautów dokonała wyboru przeglądarki (lub jej braku), ta ogromna dziura trzyma projektantów stron internetowych z dala od PNG. Jednak wraz z wydaniem przeglądarki Internet Explorer 7 uzyskaliśmy pełną obsługę przezroczystości PNG alfa we wszystkich głównych przeglądarkach. Co dalej? Czy są jakieś sposoby pracy z przezroczystością PNG alfa w przeglądarce Internet Explorer 6 i starszych wersjach? Jeśli więc chcesz skorzystać z tego efektu, nic Cię nie powstrzyma. Internet Explorer 6 i jego wcześniejsze wersje wymagają więcej uwagi niż to konieczne, ale jest to zdecydowanie możliwe.
Włamanie do przeglądarki Internet Explorer: AlphaImageLoader Internet Explorer jest wyposażony w różne filtry natywne. Są używane w CSS, ale nie stanowią żadnej części oficjalnej specyfikacji CSS. Innymi słowy, nie są one ujednolicone w Internecie. Niestety, Internet Explorer 6 i starsze wersje nie obsługują w pełni formatu PNG (który jest zalecany przez W3C), ale Microsoft ma filtr, który eliminuje tę wadę: AlphaImageLoader.
Według sekcji na oficjalnej stronie Microsoftu AlphaImageLoader „wyświetla obraz w granicach obiektu oraz pomię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ę, pod którą znajduje się zawartość obiektu, na który został nałożony. Obrazy PNG ładowane w ten sposób zachowują się bardziej jak obrazy tła niż obrazy pierwszego planu (chociaż w rzeczywistości „siedzą” na tle obiektu).
Zasadniczo możesz po prostu zastosować AlphaImageLoader w CSS na elementach img i cieszyć się efektem. Obraz zostanie załadowany jako pierwszy, przezroczystość pozostanie, ale następnie obraz zostanie ponownie załadowany - jako przednia zawartość obiektu - z nieprzezroczystymi obszarami (w ten sposób „zacieniając” twoją przezroczystą wersję).
Nie można użyć przezroczystego pliku PNG jako tła Obraz CSS dla elementu (X)HTML (powiedzmy dla ) i oczekuj, że AlphaImageLoader wykona zadanie poprawnie w przeglądarce Internet Explorer. Pamiętaj, że AlphaImageLoader wstawia obraz pomiędzy tłem a pierwszym planem obiektu. Tak więc, chociaż załaduje Twój obraz w całej jego przezroczystości, będzie także nadal ładować go jako obraz tła CSS, i bez twoich cudownych półprzezroczystych pikseli.
Prawdziwe wykorzystanie AlphaImageLoader Wróćmy do jednego z wcześniejszych przykładów i spróbujmy załadować go poprawnie w przeglądarce Internet Explorer. Pamiętacie Channel 49, stację telewizyjną w Topece? Jestem pewien, że tak. Rysunek 5-21 pokazuje, jak witryna wygląda w przeglądarce Internet Explorer 6.
Rysunek 5-21
Nagłówek 49abcnews.com, renderowany w przeglądarce Internet Explorer 6 dla systemu Windows, z nienaruszoną przezroczystością PNG.
Kod HTML górnej części pogody wygląda tak, jak mogłeś już zgadnąć:
Obecnie w Topece, KS:
82° Pochmurno
Uzyskaj prognozę i nie tylko...
Widzisz obraz i jest to na pewno plik PNG; nawet Internet Explorer ładuje go bezbłędnie. Sekretnym składnikiem jest JavaScript. Właściwie użyłem odrobiny skryptu DOM, aby na bieżąco usunąć element img i zastąpić go elementem div, który - jak się domyślacie - używa AlphaImageLoader. JavaScript jest opisany w komentarzach warunkowych, kolejnym przydatnym, ale całkowicie niestandaryzowanym idiomie firmy Microsoft wbudowanym w Internet Explorera. Komentarze warunkowe pozwalają na użycie kodu tylko dla wcześniej znanych Wersje internetowe Poszukiwacz. Kod jest ignorowany przez wszystkie inne przeglądarki, więc nie ma na nie żadnego wpływu. W elemencie witryny www.49abcnews.com znajdziesz:
Dzięki pierwszej linijce, jeśli lte IE6, skrypt ten zostanie uwzględniony w renderowanym dokumencie tylko wtedy, gdy będzie pokazany w wersji Internet Explorera mniejszej lub równej (oznacza to lte) 6. Wszystkie pozostałe przeglądarki, w tym nowo przybyła przeglądarka Internet Explorer 7 całkowicie to zignoruje.
Co zatem znajduje się w pliku JavaScript fixWeatherPng.js? Spójrzmy:
Window.attachEvent("onload", fixWeatherPng); funkcja 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 + "", size="scale"""; // Ze względu na zwięzłość pominięto niektóre style CSS specyficzne dla 49abcnews.com. img.replaceNode(div); )
Przeanalizujmy krok po kroku, co robi skrypt. Najpierw mówimy przeglądarce, że chcemy wykonać funkcję fixWeatherPng podczas ładowania strony. Pozostała część skryptu to sama funkcja.
Zacznijmy, najpierw szukamy obrazu, z którym będziemy pracować według jego atrybutu id i zapiszemy go w zmiennej img. Zapisujemy atrybut src (URL do pliku obrazu) w zmiennej src. Następnie ukrywamy element img poprzez odsłonięcie Właściwość CSS widoczność do ukrytej.
W rezultacie 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 wstawiania AlphaImageLoader - filtrowanie bitów w locie - ma swoją brzydką, ale niezbędną wadę - nieprawidłowy CSS. Co więcej, poza znacznikami (X)HTML będą znajdować się niesemantyczne elementy div. I dopóki wszystko to jest opisane w komentarzach warunkowych, nie ma szans, aby inne przeglądarki zostały uszkodzone przez kod Microsoftu. (handyblogger: tutaj Jeff próbuje subtelnie wskazać „niezdarne” rozwiązanie Microsoftu)
Jeśli musisz zrobić coś niepoprawnie, możesz przynajmniej wyodrębnić to i trzymać oddzielnie od wszystkiego innego, gdzie nie jest potrzebne.
W areszcie PNG, jako format graficzny, oferuje wiele zalet technicznych wykraczających poza te powszechnie stosowane w plikach GIF. W rzeczywistości zalety są tak duże, że PNG już dawno mógł zająć dominującą pozycję jako format grafiki inny niż zdjęcia. Niewystarczające wsparcie ze strony przeglądarki Internet Explorer dla niektórych więcej znaczące możliwości PNG, taki jak przezroczystość kanału alfa, odstrasza wielu twórców stron internetowych. Ale są dwa bardzo dobre powody, dla których nie powinieneś bać się PNG.
Po pierwsze: nawet Internet Explorer 6 i jego wcześniejsze wersje prawie całkowicie obsługują PNG w taki sam sposób, jak GIF (oczywiście z wyjątkiem animacji). PNG prawie zawsze tworzy mniejsze pliki, dzięki czemu mogą ładować się szybciej i zużywać mniej zasobów.
Po drugie: Internet Explorer 7 oferuje pełną obsługę przezroczystości PNG alfa. Efekty, jakie można osiągnąć dzięki pełnej gamie opcji półprzezroczystych, są praktycznie nieograniczone. Spodziewam się, że drzwi staną otworem dla projektantów, którzy znajdą ciekawe sposoby wykorzystania przezroczystości PNG na wzór opisanych w tym artykule. nowy poziom style, których nigdy wcześniej nie widziałeś. Podałem ci kilka przydatnych pomysłów na to, co możesz stworzyć dzięki przezroczystości PNG, ale na tym nie poprzestań. Szukać siebie!
Fragmenty z publikacji 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; opublikowane przez przyjaciół ED. Prawa autorskie Jeff Croft 2007. Wykorzystano za zgodą Apress, Inc.
PNG (Portable Network Graphics) to format grafiki rastrowej 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 najpopularniejszy format internetowy po JPG.
Wśród innych zalet warto zwrócić uwagę na:
- układ z przeplotem;
- wbudowana programowa korekcja palety kolorów i gamma.
Ta ostatnia pozwala osadzić w obrazie wszystkie niezbędne parametry wyświetlania, aby na wszystkich ekranach wyglądał tak, jak zamierzył autor.
Format ma 2 wersje:
- PNG-8 (schemat kolorów indeksu jest podobny do GIF);
- PNG-24 (pełna i pełna paleta kolorów symulująca JPEG).
Historia pochodzenia W 1995 roku, w dobie rozwoju wolnego Internetu, nagle pojawiło się pytanie o zastrzeżony charakter złożonego formatu GIF. Do wymiany danych graficznych potrzebny był równie niezawodny, ale darmowy i darmowy format sieć światowa. W tym czasie międzynarodowe konsorcjum W3C przedstawiło specyfikację PNG 1.0, zatwierdzoną już w 1996 roku.
Format powstał jako alternatywa dla GIF. Ten ostatni był „zamknięty” do 2004 roku, czyli miał szereg ograniczeń dotyczących swobodnego korzystania (wymagane prawa autorskie właściciela przy zapisywaniu, licencje patentowe przy wysyłaniu). PNG został pozbawiony takich niedociągnięć, implementując jednocześnie obsługę głębi kolorów do 48 bitów i 8-bitowy kanał alfa do transmisji obrazu.
Twórcom udało się stworzyć płynną przezroczystość kolorów, która jest niemożliwa w formacie GIF. W tym ostatnim paleta jest ograniczona do 8-bitowego kanału (256 kolorów) i obsługuje jedynie pełną przezroczystość.
Jak otwierać pliki PNG Dziś format graficzny można łatwo wyświetlić 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 własne narzędzia 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:
Windows 7-10 system operacyjny Rodzina Windowsów otwórz format PNG w następujący sposób:
- przeglądarka zdjęć;
- Farba MS;
- przeglądarka internetowa (tylko przeglądanie).
Android Mobilny system operacyjny ma następujące funkcje:
iOS Mobile cat dla Apple współpracuje z plikami PNG przy użyciu takiego oprogramowania.
Grafika komputerowa wypełniła już wszystko wokół nas, nawet zdjęcia oglądamy częściej na monitorze, telefonie czy ekranie telewizora, niż na papierze. Ale najciekawsze jest to, że sposoby przechowywania tych obrazów są bardzo różne. Istnieją dziesiątki formatów przechowywania obrazów, każdy ma swoje zalety i wady, ale najskuteczniejszymi i popularnymi z nich pozostają te, które zapewniają najwyższa jakość Poza tym plik okazuje się mały. Jednym z takich formatów jest format PNG. Co to za format i skąd się wziął?
Krótko o samym powodzie pojawienia się tego formatu przechowywania obrazów...
4 stycznia 1995 roku wyrażono pomysł stworzenia darmowego formatu, który zastąpi płatny GIF, a już w grudniu tego samego roku nowy format PNG był gotowy i zaproponowany do rozpatrzenia. Ówczesny format GIF umożliwiał uzyskanie bardzo małych plików, które wygodnie było używać na stronach internetowych. Ale wcześniej darmowy GIF nagle stał się płatny – właściciel patentu na niego, firma Unisys Corporation, zamierzała pobierać opłaty za każdy obraz wykorzystujący ten format. To był powód opracowania darmowego formatu o nazwie PNG, skrótu od angielskiego wyrażenia „przenośna grafika sieciowa”. Jak sama nazwa wskazuje, przeznaczony jest do użytku w sieci, ze względu na małe pliki, co pozwala na szybsze ładowanie stron z grafiką.
Jakie są zalety i wady formatu PNG w porównaniu z innymi, zwłaszcza jego głównym konkurentem, formatem GIF? Różnic jest wiele, ale przede wszystkim…
Format PNG wykorzystuje algorytm kompresji o nazwie Deflate, który sam w sobie jest oprogramowaniem typu open source, co oznacza, że jest całkowicie bezpłatny. Algorytm ten działa na zasadzie konwencjonalnego archiwizatora, skutecznie kompresując informację o gamie barw każdego piksela i to właśnie ten algorytm pozwala uzyskać dość mały plik. Dodatkowo w tym formacie można zapisywać obrazy pełnokolorowe, czyli takie, które wykorzystują aż 48 bitów na piksel – a jest to bardzo duża gama barw, większa nawet niż ludzkie oko jest w stanie dostrzec. Format GIF pozwala na użycie tylko 256 kolorów i odcieni - wystarczy dla najprostszych zdjęć, ale bardzo mało dla jakości fotograficznej.
Formaty PNG, GIF i TIFF wykorzystują tzw. kanał alfa. Oznacza to, że możesz sprawić, że niektóre części obrazu będą przezroczyste. Jednocześnie w formacie GIF odbywa się to bardzo prosto - tylko jeden z kolorów do wyboru jest przypisany jako przezroczysty i podczas oglądania obrazu po prostu nie jest widoczny - w ten sposób można uzyskać przezroczyste tło. Format TIFF jest pod tym względem bardziej przemyślany, ale jest bardzo rzadko używany – rozmiar pliku jest zbyt duży. Ale w formacie PNG kanał alfa jest wykonany mądrze - nie tylko zapewnia przezroczystość, ale ma także 256 stopni jasności. Oznacza to, że możesz łatwo przejść z całkowicie przezroczystego tła do pełnokolorowego obrazu, a jednocześnie uzyskać piękne efekty. Szczególnie pięknie wygląda na stronach internetowych. Jeśli przezroczystość nie jest potrzebna, możesz po prostu nie używać jej podczas zapisywania obrazu i uzyskać jeszcze mniejszy plik.
Niestety format PNG ma jedną, niezbyt istotną wadę - nie pozwala na zapisanie sekwencji obrazów, tzw. animacji. GIF pozwala to zrobić. Stało się tak dlatego, że w momencie tworzenia nowego formatu animacja praktycznie nie była nigdzie stosowana, a w 1995 roku nie było szczególnej potrzeby tworzenia kolorowych stron internetowych, dlatego animacja została wykluczona z projektu jako niepotrzebna. Dziś niszę animacji zajęła technologia Flash, która nie stanowi konkurencji dla żadnego konwencjonalnego formatu graficznego.
Jeśli format PNG jest tak dobry, to dlaczego nie stał się super popularny? Odpowiedź jest prosta – była słabo wspierana przez twórców innych programów. Miał na to szczególny wpływ fakt, że większość internautów korzystała z przeglądarki Internet Explorer, która nie „rozumiała” obrazów w formacie PNG, choć twórcy innych przeglądarek od razu wbudowali w nie taką obsługę. Sytuacja poprawiła się dopiero wraz z pojawieniem się Internet Explorera 7, ale czas na „promocję” już dawno minął.
Obecnie format PNG jest jednym z trzech najpopularniejszych i zalecanych formatów w technologiach internetowych, obok formatów GIF i JPG. A jeśli nie uznasz braku animacji za wadę, to wygrywa ona pod każdym względem w porównaniu z innymi. Wysokiej jakości obraz bez utraty jakości, mały plik, płynne przejścia do przezroczyste tło i bez naruszania niczyich praw autorskich – czego jeszcze potrzebuje twórca strony internetowej do szczęścia?
Aktualizacja: 18.08.2021
103583
Jeśli zauważysz błąd, zaznacz fragment tekstu i naciśnij Ctrl+Enter
