Obraz PNG

PNG

Kolejnym typem formatu plików graficznych jest PNG (ang. Portable Network Graphic). W formacie png można dokonać bezstratnej kompresji plików graficznych poprzez redukcję ilości używanych kolorów. Jakość grafiki podczas kompresji nie ulega pogorszeniu, zmiany jedynie występują w ilości kolorów, które zostaną użyte. Dla przykładu zamiast trzech odcieni pomarańczowego używa się jednego.

png vs jpg loseless compression

  • PNG (z lewej) kompresja bezstratna, rozmiar 6KB
  • JPG (z prawej) kompresja stratna, rozmiar 24KB

Łatwo można dostrzec różnicę pomiędzy formatami png i jpg w grafice, która używa niewielkiej liczby kolorów (tak jak ta powyżej). Obraz jpg, jak widać, stracił sporo na jakości, a pomimo tego nadal jego rozmiar jest duży.

Przezroczystość

Z plikami w formacie PNG wiąże się również bardzo przydatna własność, mianowicie przezroczystość. Pozwala ona na zapisanie grafiki bez tła. Własność ta szczególnie przydatna jest, gdy chcemy zapisać nasze logo, bądź ikony. Tło na stronie możemy dowolnie zmieniać przy użyciu CSS, a gdybyśmy zapisali te grafiki z tłem musielibyśmy dodatkowo zmieniać tło w każdej grafice.

W programach graficznych przezroczystość zazwyczaj zaznaczona jest taką szachownicą, ale spokojnie nie zostanie ona wyświetlona na naszej stronie. Przydatna jest ona podczas projektowania.

przezroczystosc alpha channel kurs html png logo how 2 html

Przezroczystość zwana jest również kanałem alfa (ang. alpha channel). Przezroczystość możemy uzyskać zapisując pliki m.in. w formacie PNG oraz GIF. Pliki zapisane w formacie JPG zawsze zostaną zapisane z tłem.