Typowe przykłady typów obrazów w sieci to GIF, JPG, i PNG. Pliki SVG. Te różne formaty oferują projektantom stron internetowych różne opcje optymalizacji wizualnej atrakcyjności witryny.
Obrazy GIF
Użyj plików GIF dla obrazów, które mają małą, stałą liczbę kolorów. Pliki GIF są zawsze redukowane do nie więcej niż 256 unikalnych kolorów. Algorytm kompresji dla plików GIF jest mniej złożony niż dla plików JPG, ale gdy jest używany do płaskich kolorowych obrazów i tekstu, daje bardzo małe rozmiary plików.
Format GIF nie jest odpowiedni dla obrazów fotograficznych lub obrazów z kolorami gradientowymi. Ponieważ format GIF ma ograniczoną liczbę kolorów, gradienty i zdjęcia zostaną zapisane w postaci pasm i pikselizacji po zapisaniu jako plik GIF.
Obrazy JPG
Używaj obrazów JPG do zdjęć i innych obrazów, które mają miliony kolorów. Wykorzystuje złożony algorytm kompresji, który pozwala tworzyć mniejsze grafiki, tracąc część jakości obrazu. Nazywa się to kompresją „stratną”, ponieważ niektóre informacje o obrazie są tracone podczas kompresji obrazu.
Format JPG nie nadaje się do obrazów z tekstem, dużych bloków jednolitego koloru i prostych kształtów z ostrymi krawędziami. Dzieje się tak, ponieważ gdy obraz jest skompresowany, tekst, kolor lub linie mogą być rozmyte, co powoduje, że obraz nie jest tak ostry, jak zapisany w innym formacie.
Obrazy PNG
Format PNG został opracowany jako zamiennik formatu GIF, gdy okazało się, że obrazy GIF będą podlegać opłacie licencyjnej. Grafiki PNG mają lepszy stopień kompresji niż obrazy GIF, co skutkuje mniejszymi obrazami niż ten sam plik zapisany jako GIF. Pliki PNG oferują przezroczystość alfa, co oznacza, że możesz mieć obszary obrazów, które są w pełni przezroczyste lub nawet wykorzystują przezroczystość alfa. Na przykład cień wykorzystuje szereg efektów przezroczystości i byłby odpowiedni dla PNG (lub możesz po prostu zamiast tego użyć cieni CSS).
Obrazy PNG, takie jak GIF, nie nadają się do fotografii. Można obejść problem pasków, który ma wpływ na zdjęcia zapisane jako pliki GIF przy użyciu prawdziwych kolorów, ale może to skutkować bardzo dużymi obrazami. Obrazy PNG nie są również dobrze obsługiwane przez starsze telefony komórkowe i telefony z internetem.
Obrazy SVG
SVG oznacza skalowalną grafikę wektorową. W przeciwieństwie do formatów rastrowych, które można znaleźć w 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 przy zwiększaniu rozmiaru pliku. Są tworzone dla ilustracji, takich jak ikony, a nawet logo.
Przygotowywanie obrazów do dostarczenia przez Internet
Niezależnie od używanego formatu obrazu, upewnij się, że wszystkie obrazy w tej witrynie są that przygotowany do dostawy internetowej. Zbyt duże obrazy mogą spowolnić działanie witryny i wpłynąć na ogólną wydajność. Aby z tym walczyć, te obrazy muszą być zoptymalizowane znaleźć równowagę między wysoką jakością a najmniejszym możliwym rozmiarem pliku na tym poziomie jakości.
Wybór odpowiedniego formatu obrazów jest częścią bitwy, ale upewnienie się, że przygotowałeś te pliki, jest kolejnym krokiem w tym ważnym procesie dostarczania do sieci.