Istnieje wiele formatów graficznych, które można stosować na stronach internetowych. Typowymi przykładami są GIF, JPG i PNG. Pliki SVG są również często używane w witrynach internetowych, dając projektantom stron internetowych jeszcze jedną opcję dla obrazów online.
Obrazy GIF
Użyj plików GIF dla obrazów, które mają małą, ustaloną liczbę kolorów. Pliki GIF są zawsze zredukowane do nie więcej niż 256 unikalnych kolorów. Algorytm kompresji plików GIF jest mniej skomplikowany niż w przypadku plików JPG, ale gdy jest używany na płaskich kolorowych obrazach i tekstach, generuje bardzo małe rozmiary plików.
Format GIF nie nadaje się do obrazów fotograficznych lub obrazów o kolorach gradientu. Ponieważ format GIF ma ograniczoną liczbę kolorów, gradienty i fotografie zostaną zakończone pasmowaniem i pikselizacją, gdy zostaną zapisane jako plik GIF.
W skrócie, używałbyś GIF-ów tylko dla prostych obrazów z kilkoma kolorami, ale możesz również użyć do tego celu PNG (więcej na ten temat wkrótce).
Obrazy JPG
Użyj obrazów JPG do zdjęć i innych obrazów, które mają miliony kolorów. Używa złożonego algorytmu kompresji, który pozwala tworzyć mniejsze grafiki, tracąc część jakości obrazu. Nazywa się to "stratną" kompresją, ponieważ niektóre informacje o obrazie są tracone po skompresowaniu obrazu.
Format JPG nie jest odpowiedni dla obrazów z tekstem, dużych bloków jednolitego koloru i prostych kształtów o wyraźnych krawędziach. Dzieje się tak dlatego, że po skompresowaniu obrazu tekst, kolor lub linie mogą się rozmazać, co powoduje, że obraz nie jest tak ostry, jak gdyby został zapisany w innym formacie.
Obrazy JPG najlepiej nadają się do zdjęć i obrazów, które mają wiele naturalnych kolorów.
Obrazy PNG
Format PNG został opracowany jako zamiennik formatu GIF, gdy okazało się, że obrazy GIF będą podlegać opłatom licencyjnym. Grafika PNG ma lepszą kompresję niż obrazy GIF, które dają mniejsze obrazy niż ten sam plik zapisany jako GIF. Pliki PNG oferują przezroczystość alfa, co oznacza, że możesz mieć obszary obrazów, które są albo w pełni przezroczyste, albo używają zakresu przezroczystości alfa. Na przykład cień wykorzystuje zakres efektów przezroczystości i byłby odpowiedni dla PNG (lub możesz po prostu zakończyć używanie cieni CSS zamiast).
Obrazy PNG, takie jak GIF, nie pasują do zdjęć. Możliwe jest obejście problemu z pasmowaniem, który wpływa na zdjęcia zapisane jako pliki GIF przy użyciu prawdziwych kolorów, ale może to skutkować bardzo dużymi obrazami. Obrazy PNG również nie są dobrze obsługiwane przez starsze telefony komórkowe i telefony z funkcjami.
Używamy PNG do każdego pliku wymagającego przejrzystości. Używamy również PNG-8 dla dowolnego pliku, który byłby odpowiedni jako GIF, wykorzystując ten format PNG.
Obrazy SVG
SVG oznacza Scalable Vector Graphic. W przeciwieństwie do formatów rastrowych, które można znaleźć w plikach JPG, GIF i PNG, pliki te wykorzystują wektory do tworzenia bardzo małych plików, które można renderować w dowolnym rozmiarze bez utraty jakości zwiększania rozmiaru pliku. Są tworzone dla ilustracji, takich jak ikony, a nawet logo.
Przygotowywanie obrazów do dostarczania w Internecie
Niezależnie od tego, jakiego formatu obrazu użyjesz, a Twoja strona internetowa z pewnością użyje wielu różnych formatów na wszystkich swoich stronach, musisz upewnić się, że wszystkie obrazy w tej witrynie są przygotowane do dostarczania w Internecie. Zbyt duże obrazy mogą powodować powolne działanie witryny i wpływać na ogólną wydajność. Aby temu zaradzić, obrazy te muszą być zoptymalizowane, aby znaleźć równowagę pomiędzy wysoką jakością i najniższym rozmiarem pliku na tym poziomie jakości.
Wybór właściwego formatu obrazów jest częścią bitwy, ale upewnienie się, że przygotowałeś te pliki jest kolejnym krokiem w tym ważnym procesie dostarczania stron internetowych.
Oryginalny artykuł Jennifer Kyrnin. Edytowane przez Jeremy'ego Girarda.
