Jakich formatów grafiki internetowej użyć?

Strony internetowe mogą zawierać grafiki w formacie JPEG, GIF, PNG, SVG. Których należy użyć i kiedy?

Kiedy używać JPG

• zdjęcia fotograficzne
• gdy kompresja nie ma znaczenia

Kiedy stosować PNG

• kiedy potrzebujesz przejrzystości
• kiedy masz wzory (tła)

Kiedy używać GIF

• kiedy potrzebujesz animacji zgodnej wstecz *
• gdy obraz składa się głównie z garstki kolorów (2-16) **
• gdy nie potrzebujesz przezroczystości i masz wzory (chociaż preferowane jest png)

_{* Wraz z pojawieniem się animacji CSS jako realnej opcji dla prawie wszystkich przeglądarek, stosowanie formatu .GIF jest coraz mniej popularnym formatem dla animacji internetowych. .jpg, .pngi .gifwszystkie można ustawić tak, aby miały funkcję „animowaną” za pomocą CSS. Chociaż animowane gify mogą być atrakcyjnie wykorzystywane w projektowaniu stron internetowych w niektórych przypadkach, wyjątki są rzadkie, więc najlepiej jest po prostu ich unikać.}

_{** ( .gifobrazy są ograniczone tylko do 256 kolorów w obrębie palety).}

(migracja z duplikatu pytania)

Zależy to całkowicie od rodzaju obrazu, który chcesz przechowywać.

• PNG to bezstratny format kompresji, który najlepiej nadaje się do grafiki wektorowej „bitowej” (tj. Grafiki z dużymi, regularnymi obszarami o tym samym kolorze i wyraźnie określonych krawędziach; grafika zawierająca czysty tekst).

• SVG to format wektorowy , najlepiej nadający się do przechowywania grafiki wektorowej (w skrócie, zbiory elementów geometrycznych zamiast zbiorów pikseli). SVG jest bez ograniczeń skalowalny, a grafika bitmapowa traci jakość po powiększeniu.

• JPG jest formatem stratnej kompresji (między innymi usuwa niuanse obrazu niewidoczne dla ludzkiego oka, aby zaoszczędzić miejsce). Najlepiej nadaje się do zdjęć; ze względu na metodę kompresji nie nadaje się do ilustracji wektorowych ani tekstu.

Kompatybilność z przeglądarkami:

• Grafiki PNG są obsługiwane we wszystkich przeglądarkach, z wyjątkiem IE 6, jeśli PNG zawiera przezroczystość alfa (przezroczyste części będą renderowane jako jednolicie szare), a wszystkie wersje IE, jeśli PNG znajduje się w elemencie HTML z kryciem mniejszym niż 100 % (ale to przypadek na krawędzi).

• SVG nie zawsze jest jeszcze opcją, ponieważ obsługa przeglądarki nie jest w tej chwili 100% . Mogą występować również inne różnice w zachowaniu normalnego <img>tagu. Użyj tego tylko, jeśli wiesz, co robisz.

• Standardowy JPG jest obsługiwany we wszystkich przeglądarkach, o ile jest zapisany w trybie RGB zamiast CMYK (jeśli twój program nie czyni rozróżnienia, prawdopodobnie jest to domyślny).

Powinieneś być świadomy kilku kluczowych czynników ...

Po pierwsze, istnieją dwa rodzaje kompresji: bezstratna i stratna .

• Bezstratny oznacza, że ​​obraz jest zmniejszony, ale bez uszczerbku dla jakości.
• Utrata oznacza, że ​​obraz jest (nawet) zmniejszony, ale ze szkodą dla jakości. Jeśli wielokrotnie zapisujesz obraz w formacie stratnym, jakość obrazu będzie się stopniowo pogarszać.

Istnieją również różne głębokości kolorów (palety): Kolor indeksowany i Kolor bezpośredni .

• Indeksowany oznacza, że ​​obraz może przechowywać tylko ograniczoną liczbę kolorów (zwykle 256), kontrolowanych przez autora, w czymś, co nazywa się mapą kolorów
• Bezpośrednie oznacza, że ​​możesz przechowywać wiele tysięcy kolorów, które nie zostały bezpośrednio wybrane przez autora

BMP - bezstratny / indeksowany i bezpośredni

To jest stary format. Jest bezstratny (żadne dane obrazu nie są tracone przy zapisywaniu), ale kompresja jest też niewielka lub wcale, co oznacza zapisywanie, ponieważ BMP powoduje BARDZO duże rozmiary plików. Może mieć palety indeksowane i bezpośrednie, ale to niewielka pociecha. Rozmiary plików są tak niepotrzebnie duże, że nikt tak naprawdę nigdy nie używa tego formatu.

Dobre dla: Naprawdę nic. Nie ma w czym BMP wyróżnia się, ani nie jest lepiej wykonywany przez inne formaty.

GIF - tylko bezstratny / indeksowany

GIF używa bezstratnej kompresji, co oznacza, że ​​możesz zapisywać obraz w kółko i nigdy nie stracić żadnych danych. Rozmiary plików są znacznie mniejsze niż BMP, ponieważ faktycznie używana jest dobra kompresja, ale może ona przechowywać tylko paletę indeksowaną. Oznacza to, że w większości przypadków w pliku może być maksymalnie 256 różnych kolorów. To brzmi jak niewielka ilość i tak jest.

Obrazy GIF mogą być również animowane i mają przezroczystość.

Dobre dla: logo, rysunków i innych prostych obrazów, które muszą być małe. Naprawdę używany tylko na stronach internetowych.

JPEG - Lossy / Direct

Obrazy JPEG zostały zaprojektowane w taki sposób, aby szczegółowe obrazy fotograficzne były jak najmniejsze, usuwając informacje, których ludzkie oko nie zauważy. W rezultacie jest to format stratny, a zapisywanie tego samego pliku w kółko spowoduje utratę większej ilości danych w miarę upływu czasu. Ma paletę tysięcy kolorów, a więc świetnie nadaje się do zdjęć, ale kompresja stratna oznacza, że ​​jest niekorzystna dla logo i rysunków: Nie tylko będą wyglądały na rozmyte, ale takie obrazy będą miały większy rozmiar pliku w porównaniu do GIF-ów!

Dobry dla: zdjęć. Również gradienty.

PNG-8 - Bezstratny / indeksowany

PNG to nowszy format, a PNG-8 (indeksowana wersja PNG) jest naprawdę dobrym zamiennikiem plików GIF. Niestety ma on jednak kilka wad: po pierwsze, nie może obsługiwać animacji takiej jak GIF (może, ale wydaje się, że obsługuje go tylko Firefox, w przeciwieństwie do animacji GIF obsługiwanej przez każdą przeglądarkę). Po drugie, ma pewne problemy z obsługą starszych przeglądarek, takich jak IE6. Po trzecie, ważne oprogramowanie, takie jak Photoshop, ma bardzo słabą implementację tego formatu. (Cholera, Adobe!) PNG-8 może przechowywać tylko 256 kolorów, takich jak GIF-y.

Dobre dla: Najważniejszą rzeczą, którą PNG-8 robi lepiej niż GIF-y, jest obsługa przezroczystości alfa.

Ważna uwaga: Photoshop w końcu dodał obsługę przezroczystości alfa w swoich najnowszych wersjach. Jeśli masz starszy, istnieją sposoby na konwersję plików Photoshop PNG-24 do PNG-8, zachowując jednocześnie ich przezroczystość. Jedną z metod jest PNGQuant , drugą jest zapisywanie plików za pomocą Fireworks .

PNG-24 - Bezstratny / Bezpośredni

PNG-24 to świetny format, który łączy bezstratne kodowanie z bezpośrednim kolorem (tysiące kolorów, podobnie jak JPEG). Pod tym względem jest bardzo podobny do BMP, z tym wyjątkiem, że PNG faktycznie kompresuje obrazy, dzięki czemu powstają znacznie mniejsze pliki. Niestety pliki PNG-24 nadal będą znacznie większe niż JPEG, GIF i PNG-8, więc nadal musisz się zastanowić, czy naprawdę chcesz z nich skorzystać.

Mimo że PNG-24 pozwalają na kompresję tysięcy kolorów, nie są przeznaczone do zastępowania obrazów JPEG. Zdjęcie zapisane w formacie PNG-24 będzie prawdopodobnie co najmniej 5 razy większe niż równoważne zdjęcie JPEG, przy bardzo niewielkiej poprawie widocznej jakości. (Oczywiście może to być pożądany wynik, jeśli nie martwisz się rozmiarem plików i chcesz uzyskać obraz o najlepszej jakości).

Podobnie jak PNG-8, PNG-24 obsługuje również przezroczystość alfa.

SVG - bezstratny / wektorowy

Typ pliku, który obecnie zyskuje na popularności, to SVG, który różni się od wszystkich powyższych tym, że jest to format plików wektorowych (wszystkie powyższe są rastrowe ). Oznacza to, że faktycznie składa się z linii i krzywych zamiast pikseli. Po powiększeniu obrazu wektorowego nadal widać krzywą lub linię. Po powiększeniu obrazu rastrowego zobaczysz piksele.

Na przykład:

Oznacza to, że SVG jest idealny do logo i ikon, które chcesz zachować ostrość na ekranach Retina lub w różnych rozmiarach.

Ponadto pliki SVG są zapisywane przy użyciu XML, więc można je otwierać i edytować w edytorze tekstów, aby można było nimi manipulować w locie, jeśli chcesz. Na przykład, możesz użyć JavaScript, aby zmienić kolor ikony SVG na stronie internetowej podobnie jak w przypadku tekstu (tj. Nie potrzebujesz drugiego obrazu).

Mam nadzieję że to pomogło!

JPG:

Zalety :

• Dostępnych jest wiele różnych poziomów kompresji
• Łatwy w obsłudze za pomocą edytora wszystkich zdjęć

Niedogodności:

• Artefakty kompresji

Wykorzystuje:

• Duże zdjęcia lub obrazy z dużą ilością kolorów
• Gdy wymagana jest wysoka kompresja

PNG:

Zalety :

• Przejrzystość dzięki alfa!
• Dużo kolorów
• Może zastąpić jpg

Niedogodności:

• Mniej kompresji niż JPG (ale nie tak bardzo)
• Niezgodny z IE6 (i chyba 7) - w tym celu należy użyć łaty lub hacka. Ale kogo to obchodzi? Trzeba użyć;)

Wykorzystuje:

• Małe lub średnie zdjęcia / obrazy z dużą ilością kolorów
• Musisz użyć, jeśli chcesz przezroczystość gradientu
• Ikony
• Logo

GIF:

Zalety :

• Może być animowany
• Bardzo lekkie, jeśli używasz tylko niektórych kolorów (np. 8-16 lub 32 różnych kolorów)
• Przezroczystość

Niedogodności:

• Nie może mieć więcej niż 255 kolorów.
• Animowany gif może sprawić, że ludzie uciekną
• Brak alfa dla przejrzystości (jest przezroczysty czy nie!)

Wykorzystuje:

• Animowany gif (używam ich głównie w biuletynach)
• Ikony
• Animowany favicon \ o /
• Logo

Strony internetowe mogą zawierać grafiki w formacie JPEG, GIF, PNG, SVG. Których należy użyć i kiedy?

Dla zdjęć:

JPEG, jeśli nie ma potrzeby przejrzystości. PNG dla grafiki wymagającej przezroczystości.

Chociaż nie jest to w 100% prawda, jest to dobra zasada. Sprawdź inne odpowiedzi na to pytanie, aby dowiedzieć się więcej o innych formatach. Sprawdź także, który format obrazu rastrowego jest lepszy do cyfrowego wyświetlania obrazów, gdy nie ma przezroczystości; JPEG czy PNG? oraz wybór naszych znaczników formatu pliku , takich jak jpeg , png , gif i svg, aby dowiedzieć się więcej.

W przypadku grafiki:

SVG z Fallback PNG / JPEG.

Nie ma absolutnie żadnego powodu, aby nie dostarczać plików SVG w dzisiejszych czasach. Są one implementowane prawie dokładnie tak samo, jak każdy normalny obraz i znacznie bardziej wszechstronne.

Tak więc przepływ pracy dla każdego nowoczesnego projektanta stron internetowych nie został całkowicie zmieniony, został zaktualizowany. Nadal przygotowujesz i podajesz PNG i JPEG do grafiki, ale są to tylko awarie, gdy SVG nie działa.

Co to jest SVG?

SVG oznacza Scalable Vector Graphic. Różnica między formatami SVG i innymi formatami opartymi na pikselach jest taka, że ​​dane dotyczące kompozycji grafiki są przechowywane jako obliczenia matematyczne. Gdy przeglądarka otwiera plik SVG, musi wykonać obliczenia w celu renderowania pliku SVG. Starsze przeglądarki nie mają funkcji wykonywania tych obliczeń ani obsługi plików SVG, ponadto starsze komputery mogły mieć problemy z wyświetleniem ciężkiej strony SVG, nawet gdyby mogły być używane 10 lat temu (czego nie mogły). Dane SVG są przechowywane w formacie szesnastkowym (base-16), co pozwala na optymalizację do bardzo małych rozmiarów plików w porównaniu do binarnego przechowywania danych w pikselach.

Oto niektóre zasoby, aby dowiedzieć się więcej o tym, jak osiągnąć technikę awaryjną:

1. Opanowanie użycia SVG dla sieci siatkówki, awarie ze skryptem PNG

2. Ponowny przepływ pracy SVG w celu zwiększenia wydajności i stopniowego rozwoju dzięki przejrzystym identyfikatorom URI danych

3. Sztuczki CSS - SVG Fallbacks

Poniższy fragment kodu JavaScript, skopiowany z pierwszego linku, jest wszystkim, czego potrzebujesz, aby wykryć obsługę SVG w większości, jeśli nie we wszystkich przeglądarkach, i zmienić nazwę pliku, aby zapewnić awarie PNG.

function supportsSVG() {
    return !! document.createElementNS && !! document.createElementNS('http://www.w3.org/2000/svg','svg').createSVGRect;  
}
if (!supportsSVG()) {
    var imgs = document.getElementsByTagName('img');
    var dotSVG = /.*\.svg$/;
    for (var i = 0; i != imgs.length; ++i) {
        if(imgs[i].src.match(dotSVG)) {
            imgs[i].src = imgs[i].src.slice(0, -3) + 'png';
        }
    }
}

<DA01>

Kiedy stosować SVG

• Ilekroć jest to możliwe, ponieważ zwykle jest to najmniejszy niezależny rozmiar pliku i rozdzielczość, co oznacza, że ​​może obsłużyć dowolny współczynnik pikseli urządzenia (na przykład ekrany siatkówki)
• Kiedy twoja grafika jest odpowiednia dla formatów plików wektorowych (w szczególności ikon)
• Gdy masz luksus kierowania tylko na nowoczesne przeglądarki (obsługa SVG jest stosunkowo nowa dla niektórych przeglądarek)

Kiedy używać czcionek ikon

• Gdy potrzebujesz obszernego zestawu ikon
• Kiedy, podobnie jak SVG, potrzebujesz zalet formatów plików wektorowych
• Gdy masz luksus kierowania tylko na nowoczesne przeglądarki (obsługa czcionek internetowych jest stosunkowo nowa dla niektórych przeglądarek)

</DA01>

Dlaczego SVG jest najlepszą opcją?

• Skaluj pięknie do dowolnego rozmiaru z jednego pliku (nie musisz obsługiwać @2x.jpgekranów siatkówki ani rozciągać grafiki)

• Bardzo często mniejsze rozmiary plików niż JPEG i PNG

• Prawie nigdy nie trzeba poświęcać jakości w logo

• Ułatwia projektowanie responsywne na wiele sposobów

Notatki

• Obsługa jest mniej powszechna w przypadku wbudowanych plików SVG, dlatego ze względów bezpieczeństwa najlepiej w tej chwili połączyć się z plikami za pomocą tagów graficznych. (Jeśli zamierzasz ponownie użyć grafiki w innym miejscu, np. Ikonach nawigacyjnych, i tak chcesz połączyć się z nią zewnętrznie, aby przeglądarka buforowała ją i oszczędzała czas wczytywania innych stron).

• IE nie obsługuje SVGZskompresowanego formatu dostępnego dla grafiki SVG. Aby uzyskać największą kompatybilność między przeglądarkami i najnowszymi poprzednimi wersjami, najlepiej jest użyć SVG 1.0tego momentu.

• Nadal możesz tworzyć arkusze sprite za pomocą SVG w taki sam sposób, jak w przypadku innych formatów obrazów, ale zamiast używać rzeczywistych wartości pikseli w celu zdefiniowania współrzędnych xiy każdego obrazu, użyj wartości procentowych.

  Co z przypadkami, w których wartości procentowe nie są wystarczająco dokładne?

  Powinieneś zbudować arkusz duszka, aby móc podzielić szerokość i wysokość przez 100 i uzyskać liczby całkowite lub liczby z maksymalnie 1 miejscem dziesiętnym. Na przykład, jeśli układasz 7 10px x 10pxikon razem w arkuszu duszka, nie twórz płótna, które jest 70px x 10px.

  Dlaczego? Ponieważ dzieląc 100 przez 7, otrzymujesz 14.285714285714285714285714285714, co jako zaokrąglony procent z pewnością spowodowałoby gdzieś niedoskonałą matematykę.

  Zamiast tego utwórz 80px x 10pxpłótno i nie martw się o puste 12,5%. Ikony będą miały przyrosty dokładnie o 12,5%, co, oczywiście, jest o wiele łatwiejsze w obsłudze.

Powinieneś używać .jpeg do zdjęć lub obrazów z dużą ilością kolorów. Typ pliku .gif jest przydatny w przypadku obrazów animowanych lub tam, gdzie wymagana jest przezroczystość, ale zmniejsza się w użyciu. Najpopularniejszym formatem jest .png, który może również zapewniać przezroczystość alfa i większy zakres kolorów niż typ pliku .gif. Aby uzyskać bardziej szczegółowy przegląd, zapoznaj się z artykułem Jonathana Snooka, Który format obrazu jest najlepszy .

Przyjemną formułą może być użycie JPEG do zdjęć i PNG do wszystkiego innego.

Oczywiście, jeśli masz grafikę, która nie wymaga przezroczystości alfa i ma mniej niż 256 kolorów, GIF może zaoszczędzić trochę przepustowości, ale na pewno jest w drodze.

Używam PNG do prawie wszystkiego, ponieważ nie ma artefaktów kompresji, które robi JEPG, i jest prawie uniwersalnie kompatybilny w dzisiejszych czasach (widziałem kilka edytorów witryn, którzy nie biorą go dobrze, takich jak komputerowa wersja oprogramowania SiteBuilder Homestead, ale o to chodzi).

Powinieneś wybrać obraz w bazie na poziomie kompresji / jakości, którą chcesz osiągnąć.

W sieci chodzi o szybkość pobierania informacji, a mniejszy jest rozmiar obrazu, tym lepiej dla szybkości ładowania strony.

JPG : Dla obrazów z milionem kolorów (fotografia)

PNG i GIF : dla przejrzystości i niewielkiej ilości kolorów. Używam go tylko w 64/128 różnych kolorach, ale ogólnie poniżej 256. (ikony, obrazy wektorowe, które muszą być rastrowe, kolory o wysokim kontraście, gradienty z kilkoma kolorami)

Jak wybrać pomiędzy PNG a GIF?

Przede wszystkim sprawdź optymalizację kompresji / jakości i wybierz, kto daje lepszy wynik przy mniejszej wadze. Nadal używam ogólnie GIF-ów, a czasem lepiej niż PNG dla tego samego rodzaju obrazów. Nie rozróżniaj jednego formatu od drugiego, po prostu sprawdź ten, który wygląda lepiej dla twojej optymalizacji.

• Wybierz GIF: dla animowanych obrazów w nie więcej niż 256 kolorach
• Jeśli nie potrzebujesz animacji, możesz wybrać PNG. Wybierz odpowiedni PNG: Istnieją 2 rodzaje 8-bitowe i 24-bitowe. 8bit jest lepszą wersją GIF-a bez animacji dla jakości / kompresji (ale, jak powiedziałem, nie zawsze, sprawdź to, kiedy zapisujesz dla Internetu). 24bit nie ma kompresji (więc używaj go tylko w celu uzyskania specjalnego efektu graficznego) i ma zasadę alfa do korzystania z przezroczystości kolorów (stare przeglądarki IE nie obsługują tego, jeśli nie zastosujesz specjalnego filtra lub zachowania .htc na stronie ).

Widzę z różnych artykułów 90% projektantów stron internetowych nadal uważa, że ​​PNG jest tylko formatem bezstratnym . Wielu specjalistów nawet nie wie o istnieniu PNG-8.

Ale oczywiście PNG-8 jest tym, czego powinni używać w sieci zamiast PNG-32. Ponieważ zapewnia 2x-5x mniejsze rozmiary plików z akceptowalną jakością.

Czasami trudno jest zdecydować, która kompresja jest lepsza dla obrazu. Na przykład, jeśli nie jest to zdjęcie, ale ma wiele kolorów i gradientów. To narzędzie pozwala wizualnie porównać oba stratne formaty i wybrać najlepszy wariant.

Oto ładne narzędzie do porównywania stratnych formatów PNG i JPEG: PNG vs JPEG

Główne formaty grafiki internetowej to GIF, JPG i PNG. Ważne jest, aby znać różnice i wybrać najlepszy format dla każdego obrazu, aby zdjęcia wyglądały dobrze i były tak kompaktowe, jak to tylko możliwe, aby szybko pojawiły się na ekranie użytkownika witryny.

GIF - graficzny format informacji

Format graficzny GIF jest najlepszy dla obrazów zawierających tylko kilka kolorów: wykresy, wykresy lub tekst ustawiony jako grafika. Im mniej kolorów używasz, tym wydajniejsze są pliki GIF. Pliki GIF ...

• może zawierać do 256 kolorów.

• obsługuje funkcję o nazwie przezroczystość, w której jeden z 256 kolorów jest ustawiony jako przezroczysty. Dzięki temu grafika nie wygląda tak, jakby znajdowała się w ramkach, ponieważ tło pliku jest niewidoczne, co pozwala na wyświetlenie tła strony internetowej.

• może być animowany. Wewnątrz jednego pliku jest przechowywanych wiele ramek obrazu i indeks określający, jak długo każda ramka powinna być wyświetlana. Animowany GIF jest traktowany jako standardowy plik obrazu, więc jest ładowany standardowym znacznikiem.

• są bezstratne, co oznacza, że ​​proces kompresji nie obniża jakości obrazu.

• może być z przeplotem, dzięki czemu wydaje się, że zanikają, od niższej do wyższej jakości podczas ładowania. To daje odwiedzającym coś do obejrzenia podczas oczekiwania.

• nie są dobre dla zdjęć - tracisz jakość, a pliki nie będą zwarte. Do zdjęć używaj formatu grafiki JPG.

JPG - Joint Photographic Experts Group

Format graficzny JPG jest najlepszy dla obrazów o wielu kolorach, takich jak fotografie lub zeskanowane dzieła sztuki. Pliki JPG ...

• może zawierać do 16 milionów kolorów.

• obsługuje zmienną kompresję. Możesz zastosować mniej więcej kompresję do każdego pojedynczego obrazu. Im więcej kompresji zastosujesz, tym więcej tracisz jakości. Chociaż rozmiary plików mogą być dość małe za pomocą tego formatu graficznego, często trzeba iść na kompromis między rozmiarem pliku a jakością obrazu. Nowsze oprogramowanie graficzne zapewnia podgląd przed zapisaniem - pozwala to eksperymentować z różnymi poziomami kompresji, aby wybrać najlepszy kompromis między jakością a rozmiarem pliku.

• występują w trzech typach: podstawowym lub standardowym, zoptymalizowanym podstawowym lub standardowym zoptymalizowanym i progresywnym. Linia bazowa została zaprojektowana dla przeglądarek, które uważamy za starożytne (takich jak Internet Explorer wersja 1). Zoptymalizowana linia bazowa oferuje większą kompresję w porównaniu ze standardową linią bazową i praktycznie każda przeglądarka dzisiaj może odczytać taki obraz. Progresywny JPG, podobnie jak plik GIF z przeplotem, buduje się podczas pobierania, przechodząc od surowej reprezentacji obrazu do gotowego wyglądu. Chociaż jest to niezły format grafiki internetowej, starsze przeglądarki nie obsługują tego formatu.

• nie nadają się do obrazów zawierających tylko kilka kolorów, takich jak tekst ustawiony jako grafika lub obrazy z obszarami o płaskich kolorach. Jeśli używasz JPG do tych grafik, będą one większe niż to konieczne i będą wyglądać na „cętkowane”.

PNG - progresywna grafika sieciowa

PNG to najnowszy format grafiki internetowej. Pliki PNG ...

• są obsługiwane przez wszystkie nowoczesne przeglądarki. Pliki te mogą nie pojawiać się w starszych przeglądarkach, więc użycie tego formatu graficznego może spowodować, że niektórzy odwiedzający twoją stronę nie będą mogli zobaczyć twoich zdjęć.

• są kompaktowe i wszechstronne i mogą łączyć najlepsze cechy GIF i JPG, takie jak możliwość posiadania przezroczystego tła lub możliwość przechowywania obrazów w milionach kolorów.

• nadal nie są powszechnie używane, głównie dlatego, że nie są obsługiwane przez starsze przeglądarki.

Kiedy stosować który?

Wybór odpowiedniego formatu grafiki internetowej może zapewnić, że obrazy będą wyglądać dobrze i szybko pojawiać się na komputerze użytkownika. Wybór niewłaściwego formatu powoduje, że zdjęcia wyglądają źle i pobieranie trwa wieczność.

Najczęstszym błędem graficznym, jaki ludzie popełniają w Internecie, jest użycie niewłaściwego formatu grafiki dla swoich obrazów. Ale wybór jest naprawdę bardzo prosty ...

• Jeśli grafika ma wiele kolorów (np. Zdjęcie), wybierz JPG.

• Jeśli grafika ma kilka kolorów, wybierz GIF. Korzystając z GIF-a, wypróbuj zoptymalizowane palety zawierające tylko używane kolory - mogą przycinać pliki o połowę.

W idealnym świecie sprowadzałoby się to do tego:

JPEG - Do obrazów rastrowych i fotografii

PNG - w przypadku grafiki wektorowej (np. Logo itp.)

Niestety, Internet Explorer 6 (wciąż niestety duża liczba użytkowników) nie obsługuje przezroczystości obrazów PNG. Więc jeśli PNG zawiera przezroczystość, może wystąpić problem. Na szczęście istnieje hack, którego można użyć do obejścia tego problemu, choć nie w elegancki sposób:

http://24ways.org/2007/supersleight-transparent-png-in-ie6 http://www.alistapart.com/articles/pngopacity/

(EDYCJA: Myślę też, że nawet IE 7 ma problemy z niektórymi funkcjami PNG.)

Pliki GIF mają tylko dwie zalety w stosunku do PNG:

1. (Prawie) doskonałe wsparcie przeglądarki (chociaż brak przejrzystości, więc nie jest to duża zaleta)
2. Mogą być animowane, jednak animowane grafiki powinny być wykorzystywane oszczędnie w projektowaniu stron internetowych.

EDYCJA: PNG jest zawsze lepszy niż GIF, jeśli jest obsługiwany i użyteczny, ponieważ PNG jest formatem otwartym.

Jak najbardziej wskazano, JPEG jest dobry do fotografii, a PNG do grafiki z tekstami i wykresami. GIF ma tę jedyną zaletę, że obsługuje animację, z której należy korzystać bardzo ostrożnie.

Dobrą wskazówką jest wyeksportowanie obrazu jako JPEG i PNG. Prawie zawsze format, który jest lepszy dla twojej grafiki, daje mniejszy plik. Zdjęcia stają się mniejsze niż JPEG, a wykresy mniejsze niż PNG. Więc jeśli nie jesteś pewien, który wybrać, może to być dobry decydent.