) i oczekuj, że AlphaImageLoader wykona zadanie w przeglądarce Internet Explorer tak, jak powinno. Pamiętaj, że AlphaImageLoader wstawia twój obraz między tłem a pierwszym planem obiektu. Więc podczas gdy ładuje twój obraz w całej jego przezroczystej chwale, będzie również nadal ładował go jako obraz tła CSS i bez twoich cudownych półprzezroczystych pikseli.

Prawdziwe użycie AlphaImageLoader

Wróćmy do jednego z wcześniejszych przykładów i spróbujmy poprawnie załadować go w przeglądarce Internet Explorer. Pamiętasz Channel 49, stację telewizyjną w Topece? Jestem pewien - tak. Rysunek 5-21 pokazuje, jak witryna wygląda w przeglądarce Internet Explorer 6.

Rysunek 5-21
Nagłówek 49abcnews.com renderowany w Internet Explorerze 6 dla Windows z nienaruszoną przezroczystością PNG.

Kod HTML górnej sekcji związanej z pogodą wygląda tak, jak można się domyślić:

Widzisz obraz i jest to zdecydowanie PNG, nawet Internet Explorer ładuje go bezbłędnie. Sekretnym składnikiem tego jest JavaScript. Właściwie 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 niestandardowym idiomie firmy Microsoft wbudowanym w Internet Explorer. Komentarze warunkowe umożliwiają użycie kodu tylko dla znanych plików wersje internetowe Poszukiwacz. Kod jest ignorowany przez wszystkie inne przeglądarki, więc nie ma na nie żadnego wpływu. W żywiole na stronie www.49abcnews.com znajdziesz:

Dzięki pierwszej linii, jeśli lte IE6, ten skrypt zostanie uwzględniony w renderowanym dokumencie tylko wtedy, gdy jest pokazany w wersji Internet Explorer mniejszej lub równej (jest to oznaczone lte) 6. Wszystkie inne przeglądarki, w tym nowo przybyły Internet Explorer 7, całkowicie to zignorują ...

Więc co jest w pliku JavaScript fixWeatherPng.js? Spójrzmy:

Window.attachEvent ("onload", fixWeatherPng); function fixWeatherPng () (var img \u003d document.getElementById ("weatherImage"); var src \u003d img.src; img.style.visibility \u003d "hidden"; var div \u003d document.createElement ("DIV"); div.style. filter \u003d "progid: DXImageTransform.Microsoft. AlphaImageLoader (+ src +" ", sizing \u003d" scale ")"; // Niektóre style CSS specyficzne dla 49abcnews.com zostały pominięte ze względu na zwięzłość. img.replaceNode (div); )

Przeanalizujmy krok po kroku, co robi skrypt. Najpierw mówimy przeglądarce, że chcemy wykonać funkcję fixWeatherPng po załadowaniu strony. Reszta skryptu to sama funkcja.

Rozpoczynając, najpierw szukamy obrazu, z którym będziemy pracować, według jego atrybutu id i przechowujemy go w zmiennej img. Zapisujemy atrybut src (adres URL do pliku obrazu) w zmiennej src. Następnie ukrywamy element img, ustawiając właściwość widoczności CSS 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 wstawiania AlphaImageLoader - filtrowanie bitów w locie - ma swoją mocną, ale niezbędną stronę - nieprawidłowy CSS. Co więcej, poza znacznikiem (X) HTML będą istniały niesemantyczne elementy div. I chociaż wszystko to jest opisane w komentarzach warunkowych, nie ma szans na uszkodzenie innych przeglądarek przez kod Microsoftu. (przydatny bloger: Jeff stara się subtelnie wskazać tutaj „niezdarne” rozwiązanie firmy Microsoft)

Jeśli musisz zrobić coś złego, przynajmniej możesz to wyodrębnić i oddzielić od wszystkiego innego, gdzie nie jest potrzebne.

W areszcie

PNG, jako format graficzny, oferuje wiele zalet technicznych wykraczających poza te powszechnie używane w GIF. W rzeczywistości korzyści są tak duże, że PNG mógł już dawno dominować jako format graficzny niezwiązany z obrazami fotograficznymi. Niewystarczające wsparcie przeglądarki Internet Explorer dla niektórych z ważniejszych funkcji PNG, takich jak przezroczystość alfa, odstraszyło w rezultacie 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 wcześniejsze wersje prawie całkowicie obsługują PNG w sposób, w jaki może to zrobić GIF (z wyjątkiem oczywiście animacji). PNG prawie zawsze pokazuje mniejsze rozmiary plików, co umożliwia szybsze pobieranie i mniej zasobów.

Po drugie, Internet Explorer 7 oferuje pełne wsparcie dla przezroczystości alfa PNG. Efekty, które można uzyskać dzięki pełnej gamie opcji półprzezroczystych, są praktycznie nieograniczone. Spodziewam się, że projektanci, którzy znajdą ciekawe sposoby wykorzystania przezroczystości PNG, takie jak te opisane w tym artykule, otworzą drzwi na nowy poziom stylu, jakiego nigdy wcześniej nie było. Dałem ci kilka pomocnych pomysłów na to, co możesz stworzyć za pomocą przezroczystości PNG, ale nie poprzestawaj na tym. Szukać siebie!

Fragment książki 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.

Format obrazu PNG jest jednym z najpopularniejszych i umożliwia użytkownikom przechowywanie skompresowanych obrazów bez utraty ich jakości. PNG jest najczęściej używany do edycji grafiki lub w Internecie. Następnie przyjrzymy się kilku prostym sposobom otwarcia pliku tego formatu na komputerze.

Istnieje kilka różnych metod otwierania plików PNG do przeglądania i edycji. Wystarczy postępować zgodnie z poniższymi instrukcjami, a otwarcie obrazu nie będzie trudne.

Metoda 1: Przeglądarki obrazów

W Internecie jest wiele edytorów graficznych i specjalnego oprogramowania do przeglądania i edycji obrazów. Zapewniają użytkownikom dużą liczbę funkcji i narzędzi, dzięki czemu praca ze zdjęciami jest maksymalnie wygodna. Przyjrzyjmy się procesowi otwierania obrazu PNG na przykładzie programu GIMP:

Jeśli GIMP z jakiegoś powodu Ci nie odpowiada, sugerujemy zapoznanie się z pełną listą programów do przeglądania obrazów w naszym artykule pod linkiem poniżej. Tam na pewno znajdziesz coś odpowiedniego.

W przypadku, gdy wymagane jest wykonanie różnych manipulacji z otwartym obrazem, użyj specjalnych edytorów graficznych o zaawansowanej funkcjonalności i dużej liczbie różnych narzędzi. Możesz dowiedzieć się więcej na ich temat w naszym artykule pod poniższym linkiem.

Metoda 2: Standardowe narzędzie systemu Windows

Wszystkie wersje systemu operacyjnego Windows mają wbudowaną przeglądarkę obrazów. Może być również używany do otwierania plików PNG. Przyjrzyjmy się bliżej temu procesowi:

Jeśli potrzebujesz wszystkich obrazów PNG do otwierania za pomocą standardowej przeglądarki zdjęć systemu Windows, wykonaj następujące kroki:

Teraz domyślnie wszystkie pliki PNG będą otwierane w standardowej przeglądarce zdjęć. Aby zmienić program do otwarcia, wykonaj te same czynności, wybierając inne oprogramowanie.

W tym artykule omówiliśmy szczegółowo proste sposoby otwieranie obrazów PNG. Jak widać, w tym procesie nie ma nic skomplikowanego, a wszystko odbywa się dosłownie w kilku krokach.

Jesteś tutaj, ponieważ masz plik z rozszerzeniem kończącym się na .png. Pliki z rozszerzeniem .png mogą być uruchamiane tylko przez określone aplikacje. Możliwe, że pliki .png są plikami danych, a nie dokumentami lub multimediami , co oznacza, że \u200b\u200bw ogóle nie są przeznaczone do oglądania.

co to jest & nbsp.png & nbspfile?

Pliki PNG to skompresowane pliki obrazów rastrowych, zwykle implementowane dla elementów wizualnych znajdujących się na stronie internetowej, wśród innych grafik internetowych. Zawartość obrazu w tych plikach .png składa się z kolorów indeksowych zintegrowanych z obrazami bitmapowymi, a bezstratna kompresja obrazu cyfrowego i specyfikacje kodowania, które są zaimplementowane w tych plikach .png, są podobne do standardów kompresji zintegrowanych z plikami GIF. Znany również jako przenośna grafika sieciowa, format PNG został opracowany w celu zniesienia ograniczeń obrazów GIF w zakresie obsługi kolorów i licencjonowania patentów. Kanał przezroczystości tych plików PNG został ulepszony w celu wprowadzenia obsługi 8-bitowej. W tych plikach PNG obsługa CMYK nie jest dostępna.

jak otworzyć plik .png?

Uruchom plik .png lub dowolny inny plik na komputerze, klikając go dwukrotnie. Jeśli skojarzenia plików są skonfigurowane prawidłowo, aplikacja, która ma otwierać plik .png, otworzy go. Może być konieczne pobranie lub zakup odpowiedniej aplikacji. Możliwe jest również, że masz poprawną aplikację na swoim komputerze, ale pliki .png nie są jeszcze z nią powiązane. W takim przypadku podczas próby otwarcia pliku .png można wskazać systemowi Windows, która aplikacja jest odpowiednia dla tego pliku. Od tego momentu otwarcie pliku .png spowoduje otwarcie właściwej aplikacji.

aplikacje, które otwierają plik .png

Adobe Photoshop CS6 dla Microsoft Windows

Adobe Photoshop CS6 dla Microsoft Windows to oprogramowanie do edycji i zarządzania obrazami, które można pobrać na komputery z systemem Windows, a mianowicie Windows 7 (bez SP iz SP1) i Windows XP z SP3. To oprogramowanie ma nowe funkcje i narzędzia do łatwa, szybka, przyjemna i zaawansowana edycja obrazów cyfrowych. Jedną z funkcji, która sprawia, że \u200b\u200bten program jest niezawodny do edycji obrazu, jest silnik graficzny Adobe Mercury, który jest technologią silnika, która zapewnia szybszą i wysoką jakość działania. Narzędzia uwzględniające zawartość to nowe funkcje zaprojektowane do łatwego retuszowania obrazów, ponieważ można przycinać obrazy bez żadnego efektu, automatycznie korygować rozmycie lub szerokokątne krzywizny obiektywu, usuwać efekt czerwonych oczu i dostosowywać balans kolorów, taki jak jasność i kontrast. Ten edytor obrazów jest również wyposażony w funkcję automatycznego odzyskiwania, która może tworzyć kopie zapasowe niezapisanych obrazów, opcję zapisywania w tle, galerię rozmycia, narzędzie do przycinania, tworzenie wideo i wiele więcej. Dzięki tym wszystkim nowym ulepszonym funkcjom i nowoczesnemu, przyjaznemu interfejsowi użytkownika edycja zdjęć cyfrowych nigdy nie będzie tak przyjemna i łatwa bez programu Photoshop CS6.

Adobe Photoshop CS6 dla komputerów Mac

Adobe Photoshop CS6 dla komputerów Mac

Adobe Photoshop CS6 dla komputerów Mac jest wersją oprogramowania do zarządzania obrazami „Creative Suite” przeznaczonym wyłącznie dla komputerów Mac, w szczególności Mac OS X 10.6 do 10.7 w wersji 64-bitowej. Ten program do edycji obrazów jest dostarczany w pakiecie z nowym zestawem funkcji i narzędzi, takich jak silnik graficzny Mercury opracowany przez tę samą firmę w celu szybkiego i wysokiej jakości ulepszania obrazu, funkcje uwzględniające zawartość, intuicyjne, przeprojektowane narzędzia do projektowania filmów, przepływy pracy , Galeria rozmyć, narzędzie Kadrowanie i wiele więcej. Silnik graficzny Adobe Mercury działa w sposób, który sprawia, że \u200b\u200bzadanie edycji jest łatwe i szybkie do wykonania. Umożliwia to również udostępnianie i migrację obrazów z opcjami automatycznego odzyskiwania i zapisywania w tle. Nowe narzędzia Content-Aware zostały stworzone z myślą o łatwym i kontrolowanym sposobie retuszowania lub ulepszania obrazów, które dają bardziej satysfakcjonujące rezultaty. Zasadniczo umożliwia każdemu użytkownikowi automatyczną korektę obrazów, przycinanie ich i korygowanie krzywizn obiektywu szerokokątnego.

Płótno ACD Systems 14

Płótno ACD Systems 14

ACD Systems International Inc. jest twórcą ACD Systems Canvas 14, oprogramowania do obsługi grafiki technicznej, które umożliwia użytkownikom analizowanie danych, ulepszanie grafiki oraz łatwe i szybkie udostępnianie wszystkich informacji. Ten program zawiera w pełni funkcjonalne narzędzia, które pomagają użytkownikom w dokładnym tworzeniu grafiki technicznej i ilustracji. Składa się z narzędzi do edycji, które różnią się od edycji obrazu po narzędzia do ilustracji obiektów. Wszelkie wyniki stworzone przez ten program stanowią dobre prezentacje projektów, propozycji i innych celów dla dowolnej branży związanej z grafiką i inżynierią. Więcej na temat funkcji, użytkownicy mogą pracować z obrazami rastrowymi i grafiką wektorową przy użyciu tego samego pliku z opcją edycji poprzez zmianę rozmiaru i skalowanie obiektów, rysowanie kształtów, a także wstawianie obrysów i wypełnień lub szerokości. Istnieje również narzędzie do dodawania tekstów lub etykiet i wymiarów formatu, a także do tworzenia wykresów. Dzięki temu programowi użytkownicy mogą udostępniać gotowe projekty poprzez prezentacje lub publikacje.

Systemy ACD ACDS Patrz 15

Systemy ACD ACDS Patrz 15

ACD Systems ACDSee 15 to oprogramowanie fotograficzne zawierające organizator i przeglądarkę obrazów oraz program do edycji plików RAW / obrazów dla systemów Microsoft Windows i Mac OS X 10.6 (Windows XP z dodatkiem Service Pack 2, Vista, 7 i 8; Mac OS X 10.5, 10.6 , 10.7 i Mountain Lion). Został opracowany przez ACD Systems International, Inc. i pierwotnie dystrybuowana jako aplikacja 16-bitowa, która została później zaktualizowana do wersji 32-bitowej. Minimalne wymaganie sprzętowe dla tej aplikacji to procesor Intel Pentium III / AMD Athlon lub jego odpowiednik z 512 MB pamięci RAM (z 310 MB wolnego miejsca na dysku twardym), kartą graficzną o wysokiej rozdzielczości i rozdzielczości 1024 x 768 oraz nagrywarką CD / DVD. ACDSee zarządza i obsługuje pliki wideo i audio w formatach, które obejmują GIF, BMP, JPG, PNG, MP3, PSD, WAV, MPEG i TIFF. Użytkownicy mogą przeglądać, edytować, dodawać efekty oraz organizować kolekcje zdjęć i wideo, które można udostępniać online. Zdjęcia można porządkować, ponieważ są one importowane z aparatu lub innego urządzenia pamięci masowej. Oferuje również widok mapy i obsługę geotagowania, które umożliwiają użytkownikom przeglądanie lokalizacji obrazów z kamer z obsługą GPS. Funkcje takie jak szybkie przeglądanie, skanowanie, edycja i opcje tworzenia kopii zapasowych ułatwiają tworzenie zdjęć według daty i zdarzenia oraz przechowywanie kopii zapasowych na płytach CD, DVD i Blu-Ray.

Plik PNG to obraz bitmapowy zapisany w formacie Portable Network Graphic. Każdy obraz PNG zawiera paletę - zestaw używanych kolorów. Aby zmniejszyć rozmiar pliku, stosowana jest bezstratna kompresja za pomocą algorytmu Deflate. Używany głównie w Internecie jako obrazy do stron internetowych. Format został zaprojektowany w celu zastąpienia GIF-a, który oprócz swoich wad do 2004 roku posiadał ograniczenia w swobodnym użyciu oprogramowanie. Nowy format PNG rozwiązał te problemy. W szczególności implementuje obsługę 8-bitowego kanału alfa i obsługę głębi kolorów do 48 bitów. Podczas gdy w formacie GIF możliwa jest tylko pełna przezroczystość, a paleta kolorów jest ograniczona tylko do 256 kolorów (8-bitowych). Jednak w przeciwieństwie do swojego poprzednika ten format nie obsługuje animacji. W tym celu powstał kolejny format MNG. Nie ma również możliwości wykorzystania palety CMYK w plikach PNG, ponieważ format ten nie jest przeznaczony do profesjonalnej pracy z grafiką. Pliki PNG można otwierać w dowolnej przeglądarce i prawie każdym programie do przeglądania i edycji obrazów. W systemie Windows plik z rozszerzeniem PNG można otworzyć, klikając dwukrotnie.

Rozszerzenie pliku .png to grafika PNG. Przeglądanie i przetwarzanie obrazu rastrowego w formacie PNG jest możliwe za pomocą następujących programów: Microsoft Windows Photos, Microsoft Windows Photo Viewer, Microsoft Paint, Adobe Photoshop CC. Ponadto wymienione programy mogą konwertować obrazy, obrazy i rysunki w tym formacie.

Możesz otworzyć plik w formacie PNG za pomocą specjalnego oprogramowania, które zostało do tego przystosowane. Aby otworzyć ten format, pobierz jeden z proponowanych programów.

Rozszerzenie PNG to format pliku używany do przechowywania obrazów bez utraty jakości. Jest to najpopularniejszy format zdjęć w Internecie, specjalnie zaprojektowany do użytku w sieci.

Plik z rozszerzeniem PNG to plik Przenośna Grafika Sieciowa... Format wykorzystuje bezstratną kompresję i jest ogólnie postrzegany jako alternatywa dla GIF. Ale w przeciwieństwie do plików GIF, pliki PNG nie obsługują animacji.

Fotografie w skali szarości i pełnokolorowe mają format PNG, obsługiwane są warstwy przezroczyste. Kompresja PNG jest zwykle lepsza niż kompresja GIF. JPG ma czasem większą przewagę nad PNG, ale po tej kompresji na obrazach z tekstem lub wokół obszarów o wysokim kontraście mogą wystąpić artefakty.

Jak otworzyć plik PNG

Do otwierania plików PNG możesz użyć dowolnej przeglądarki internetowej lub edytora grafiki. Zarówno platforma Windows OS, jak i platforma Mac OS mają wbudowane mechanizmy przeglądania takich obrazów.

Do czego służy format PNG?

Png - przeglądarka fotografii systemu Windows domyślnie jest często używana do otwierania plików PNG, ponieważ jest to system program Windows... Ale istnieje wiele innych sposobów ich przeglądania.

Wszystkie przeglądarki (np. Chrome, Firefox, Internet Explorer i tak dalej) automatycznie wyświetli pliki PNG, które otworzysz w Internecie, co oznacza, że \u200b\u200bnie musisz pobierać każdego pliku PNG, który chcesz wyświetlić na swój komputer. Możesz także użyć przeglądarki do otwierania plików PNG znajdujących się już na komputerze, używając kombinacji klawisze Ctrl + O. Większość z tych programów obsługuje również przeciąganie i upuszczanie, więc możesz po prostu przeciągnąć plik PNG do przeglądarki, aby go otworzyć.

Istnieje również kilka opcji otwierania takich obrazów w trybie offline - są one wyjątkowe edytor graficzny... Kilka popularnych - XnView , IrfanView , Przeglądarka zdjęć FastStone , Dysk Google , Oko GNOME i gThumb. Aby edytować pliki PNG, możesz użyć prawie każdego z wymienionych programów, aplikacji Farba i Paint.NET, popularne narzędzie GIMP, a także dobrze znany Adobe Photoshop.

Konwertuj PNG

Pliki obrazów można konwertować na różne sposoby, na przykład konwertować do iz png za pomocą różnych programów i usługi online... Na przykład edytor Png - Photo Converter pozwala to zrobić.

Plik obrazu przechowywany w formacie Portable Network Graphic (PNG). Zawiera kolorową mapę bitową i stosuje kompresję bezstratną w pobliżu pliku .GIF, ale bez ograniczeń kopiowania. Zwykle używany do przechowywania grafiki do obrazów internetowych.

Format PNG (czytany jako png) powstał w odpowiedzi na ograniczenia format GIF, głównie w celu zwiększenia obsługi kolorów i zapewnienia formatu obrazu bez licencji patentowej. Oprócz tego, podczas gdy pliki GIF obsługują tylko nieprzezroczyste lub w pełni przezroczyste piksele, obrazy PNG mogą zawierać 8-bitowy kanał przezroczystości, który umożliwia zmianę kolorów z nieprzezroczystych na przezroczyste.

Obrazy PNG nie mogą być animowane jak obrazy GIF. Ale powiązany format .MNG można animować. Obrazy PNG nie zapewniają obsługi CMYK, ponieważ nie są przeznaczone do użytku w profesjonalnej grafice. Obrazy PNG są obsługiwane przez większość przeglądarek internetowych.

Mac OS X 10.4 i nowsze przechowuje zrzuty ekranu jako pliki PNG. Ubuntu Linux przechowuje również wydrukowane zrzuty ekranu w formacie PNG.

Typ MIME: image / png

Pobierz program do formatu PNG

W tym artykule chcę porozmawiać o jednej bardzo nieprzyjemnej funkcji Photoshopa, która objawia się podczas zapisywania przezroczystych obrazów w PNG24. Weźmy oryginalny obraz i skopiujmy jakiś fragment do PNG24. Zrobiłem to w ten sposób: używając narzędzia Polygonal Lasso wybrałem fragment, skopiowałem i wkleiłem do nowy dokumenta następnie zapisane przez Save for Web:

PNG24, 456 Kb

Jak dowiedzieliśmy się w pierwszej części, w PNG24 obraz składa się w rzeczywistości z dwóch warstw: RGB, która zawiera informacje o kolorze każdego piksela, oraz kanału alfa z informacją o ich przezroczystości.

Format graficzny PNG: przetwarzanie i przeglądanie

Logiczne jest założenie, że w całkowicie przezroczystych obszarach powinien być jakiś jeden kolor, aby lepiej zapakować obraz. Jednak tak właśnie zapisał Photoshop w warstwie RGB (widziałem to w edytorze Seashore):

I gołym okiem widać, że są tam duże fragmenty absolutnie niepotrzebnych informacji:

Jeśli nie chcesz korzystać z innych edytorów (np. Nie zauważyłem takiej usterki w Adobe Fireworks), proponuję prosty sposób na wyeliminowanie tej wady w Photoshopie. Naszym zadaniem jest zastąpienie wszystkich informacji w absolutnie przezroczystych obszarach jakimś jednym kolorem (najlepiej czarnym, aby nie wątpić, że te obszary będą miały najmniejszą wagę w bajtach).

1. Otwórz przykład w Photoshopie i wybierz obraz na warstwie: Ctrl + kliknij mały obrazek warstwy na palecie Warstwy.

2. Przejdźmy do trybu szybkiego maskowania (klawisz Q).

3. Za pomocą opcji Obraz → Dopasowania → Próg pozostaw tylko te piksele maski, których kolor był czarny. Aby to zrobić, przeciągnij suwak do skrajnej lewej pozycji.

4. Wyjdź z trybu szybkiego maskowania (klawisz Q) i odwróć zaznaczenie (Wybierz → Odwróć lub Ctrl + Shift + I). Zostały wybrane tylko absolutnie przezroczyste piksele.

5. Wypełnij zaznaczony obszar czernią (jest wiele sposobów, na przykład poprzez Edycja → Wypełnij).

6. Ponownie odwróć zaznaczenie i dodaj maskę do warstwy (ikona na palecie warstw).

7. Teraz robimy Save for Web i widzimy, jak obraz cudownie „schudł” o 122 KB.

Jeszcze raz powtarzam, że wszystkie akcje są bardzo wygodnie rejestrowane w Akcjach, po czym są wykonywane jednym naciśnięciem klawisza.

Ciąg dalszy nastąpi.

Rozmawiając z kolegami na różnych warsztatach iw studiu, doszedłem do wniosku, że dla wielu jedyną zaletą formatu PNG jest jego dobra przezierność. Jeśli przeszukujesz Internet w poszukiwaniu informacji o tym formacie, łatwo zauważyć, że twórcy stron internetowych są podzieleni na dwa obozy. Pierwsi piszą o tym, jak wspaniały jest ten format, z punktu widzenia czysto technicznych danych, niezrozumiałych dla zwykłych programistów i projektantów (na przykład o wyższości algorytmów kompresji deflate nad LZW), podczas gdy inni pozostawiają komentarze o różnym stopniu głupoty na temat bezużyteczności PNG, nie zawracając sobie nawet głowy zagłębianiem się w istota rzeczy opisanych w specyfikacji.

Spróbujmy dowiedzieć się, jakie są zalety tego formatu, aby dowiedzieć się, jak z nich korzystać podczas przygotowywania ilustracji do sieci.

Zacznijmy od terminologii. Przypuszczam, że większość czytelników używa Photoshopa i natknęła się na nazwy PNG-8 i PNG-24. Nie są to dwa różne formaty, ale tylko odmiany tego samego pliku PNG. Format umożliwia przechowywanie trzech typów obrazów: w skali szarości (do opisu obrazu używany jest jeden kanał - biały), w kolorze indeksowanym (używana jest paleta kolorów, jak w GIF) oraz truecolor (używane są trzy kanały - RGB).

Największą zaletą formatu PNG są oczywiście nowe algorytmy kompresji. Pamiętasz, że GIF skutecznie kompresuje tylko poziome, monochromatyczne obszary? Teraz możesz zapomnieć o tym ograniczeniu:

GIF, 2568 bajtów

PNG-24, 372 bajty

Drugą ważną korzyścią jest filtrowanie linii skanowania (lub filtry delta), które pozwala pakerowi PNG na uzyskanie znacznie wygodniejszych danych do kompresji.

Spójrzmy na przykład, jak one działają. Weźmy obraz 5 × 5 pikseli z gradientem poziomym i naszkicujmy, jak można go zapisać w pliku (każda liczba ma inny kolor).

Jak widać na przykładzie, koder GIF kompresowałby łańcuchy, które są słabo upakowane poziomo (ponieważ te same kolory są rozmieszczone w pionie). A oto jak koder PNG może konwertować te dane:

Przed każdą linią pojawiła się cyfra 2. Jest to filtr zastosowany do linii. W tym przypadku jest to filtr Up, który mówi dekoderowi: „Dla bieżącego piksela zwiększ wartość piksela i dodaj do niego aktualną wartość”. W naszym przypadku jest to 0, ponieważ kolory bieżącego i górnego piksela są takie same. Te dane można efektywniej spakować, jeśli mamy wystarczająco duży obraz.

Dlaczego napisałem mogą? Ponieważ w naszym wyidealizowanym przypadku następujący schemat byłby bardziej skuteczny:

Tutaj stosowany jest filtr 1 o nazwie Sub, który mówi dekoderowi: „Weź wartość piksela na lewo od bieżącego i dodaj do niej aktualną wartość”. W tym przypadku 1.

Po przefiltrowaniu wszystkie ciągi znaków (wraz z wartościami filtrów) są łączone w jedną sekwencję, która jest następnie kompresowana przez algorytmy deflate (ich omówienie wykracza poza zakres tego artykułu).

Sprawdźmy filtry:

Uważny czytelnik zauważy, że filtry są stosowane nie do całego pliku, ale do ciągów.

Format pliku PNG - co to jest?

To znaczy, że każdy ciąg może mieć twój filtr. Okazuje się, że można filtrować jeden obraz na 5 sposobów. Generalnie zadaniem dobrego kodera jest właśnie dobranie takich wartości filtru, przy których rozmiar pliku będzie minimalny. Niestety Photoshop nie zawsze dobrze wykonuje swoją pracę, dlatego na ratunek przychodzą różne narzędzia, takie jak OptiPNG i PNGCrush, które w dużej liczbie przebiegów wybierają różne metody filtrowania i strategie kompresji danych, tym samym znacznie zmniejszając objętość niektórych złożonych obrazów. Warto jednak pamiętać, że programy te nie gwarantują zmniejszenia rozmiaru każdego pliku, po prostu starają się znaleźć najlepszy sposób zakodowania danych.

Kolejna bolesna uwaga dla Photoshopa za to, że nie może zapisywać obrazów w trybie skali szarości, to znaczy nie może obniżyć głębi kolorów. Tutaj ponownie uratują nas wspomniane narzędzia, które w miarę możliwości zmniejszają głębię kolorów bez pogorszenia jakości obrazu.

PNG-24 (photoshop → truecolor), 8167 bajtów

PNG-24 (Photoshop + OptiPNG → skala szarości), 6132 bajtów

Przewaga odcieni szarości nad truecolor jest oczywista: na przykład biały w pierwszym przypadku zapisuje się (w notacji dziesiętnej) jako 255, aw drugim - 16777215.

Teraz, uzbrojeni w wiedzę na temat przechowywania danych w formacie PNG, możemy zastosować ją do przygotowania obrazów do sieci. Więcej na ten temat w kolejnych artykułach.

PNG (Portable Network Graphics), wymawiane jako „ping”, to format mapy bitowej do przechowywania informacji graficznych przy użyciu bezstratnej kompresji. PNG został stworzony, aby zarówno ulepszyć, jak i zastąpić GIF bezlicencyjnym formatem graficznym. PNG to międzynarodowy standard (ISO IEC 15948: 2003) i jest oficjalnie zalecany przez W3C.

Format PNG przechowuje informacje graficzne w postaci skompresowanej. Co więcej, kompresja ta odbywa się bez „strat”, w przeciwieństwie np. Do standardowego JPEG-a (nawet o najwyższej jakości).

Format PNG został zaprojektowany w celu zastąpienia starszego i prostszego formatu GIF oraz w pewnym stopniu do zastąpienia znacznie bardziej złożonego formatu TIFF.

Jeśli mówimy o projektowaniu stron internetowych, to w porównaniu z GIF ma następujące główne zalety:

Ulepszona kompresja: w większości przypadków obraz PNG jest mniejszy niż obraz GIF.
- Więcej kolorów w obrazie: Prawie nieograniczona liczba kolorów obrazu, podczas gdy limit dla GIF wynosi 256.
- Opcjonalna obsługa kanału alfa: podczas gdy GIF obsługuje tylko przezroczystość binarną, PGN umożliwia osiągnięcie nieograniczonej liczby efektów przezroczystości poprzez obsługę kanału alfa.

Jako wadę warto oczywiście zwrócić uwagę na brak wsparcia dla animacji typu GIF. Chociaż, oczywiście, istnieje podobny standard animacji zwany grafiką sieciową wielu obrazów (MNG), nie jest on rozpowszechniony, a zatem nie jest powszechnie obsługiwany przez nowoczesne przeglądarki.