W jakim formacie należy zapisać obraz, aby mógł być wyświetlony na stronie internetowej z zachowaniem przezroczystości?
A. JPG
B. CDR
C. PNG
D. BMP
Pytanie z egzaminu CKE, styczeń 2020 (arkusz EE.09-SG-20.01).
Format PNG jest tutaj właściwym wyborem, bo obsługuje przezroczystość, czyli tzw. kanał alfa. W praktyce oznacza to, że obraz może mieć nie tylko kolory pikseli, ale też informację o tym, które fragmenty są całkiem przezroczyste albo częściowo półprzezroczyste. To jest bardzo ważne na stronach WWW, np. przy ikonach, logo, przyciskach, grafikach interfejsu, elementach nakładanych na tło albo obrazkach używanych w CSS. PNG jest formatem rastrowym, powszechnie obsługiwanym przez przeglądarki i zgodnym z normalnymi praktykami webowymi. Plik zwykle osadza się w HTML jako obraz o typie MIME image/png, albo wykorzystuje w stylach CSS jako tło. Moim zdaniem warto pamiętać, że PNG najlepiej sprawdza się przy grafikach z ostrymi krawędziami, tekstem, ikonami i płaskimi kolorami. Do zdjęć częściej używa się JPG lub WebP, bo mogą dać mniejszy rozmiar pliku, ale JPG nie zachowa przezroczystości. Dobra praktyka jest taka, żeby dobierać format do zastosowania: PNG dla przezroczystości i jakości bezstratnej, JPG dla fotografii, SVG dla prostych grafik wektorowych, jeśli da się je zapisać jako wektory.
W tym pytaniu kluczowe jest rozróżnienie między formatem obsługiwanym przez przeglądarkę a formatem, który dodatkowo potrafi przechować przezroczystość. JPG jest bardzo popularny w internecie, ale został zaprojektowany głównie do zdjęć i kompresji stratnej. Dobrze zmniejsza rozmiar fotografii, jednak nie zapisuje kanału alfa, więc tło obrazka nie może być prawdziwie przezroczyste. Częsty błąd polega na tym, że ktoś widzi plik JPG z białym tłem i uznaje, że tło jest przezroczyste, a to tylko zwykłe białe piksele. BMP też nie jest dobrym wyborem na stronę WWW. To format rastrowy kojarzony raczej z prostym zapisem bitmap, często dużymi plikami i słabą praktycznością w publikowaniu internetowym. Nawet jeśli niektóre odmiany bitmap mogą przechowywać dodatkowe informacje, nie jest to standardowy, sensowny wybór do webu. CDR to z kolei format projektowy programu CorelDRAW, czyli plik roboczy grafiki wektorowej, a nie typowy format do bezpośredniego wyświetlania w przeglądarce. Przeglądarki nie traktują CDR jako standardowego obrazu osadzanego w HTML. Z mojego doświadczenia wynika, że najczęściej myli się format źródłowy projektu z formatem eksportu. Grafikę można przygotować w Corelu, Photoshopie czy innym narzędziu, ale na stronę trzeba ją wyeksportować do formatu webowego. Jeśli zależy nam na przezroczystości, bezpiecznym i klasycznym wyborem jest PNG, ewentualnie w nowszych projektach WebP lub SVG, zależnie od rodzaju grafiki.