Jak zapisywać obrazy dla witryn

1. Wybierz odpowiedni format dla zdjęć.
2. Przygotowanie do publikacji JPG
3. GIF i PNG-8
4. PNG-24
5. Webp
6. Ogólne zalecenia
7. Wniosek

Webmasterzy dyrektorów - zdjęcia. Wyszukiwarki wymagają łatwego i szybkiego ładowania zdjęć, użytkownicy witryn i sieci społecznościowych nie chcą patrzeć na „zgniecione” piksele i obrzydliwe artefakty kompresji. Jak znaleźć kompromis między wymaganiami algorytmów wyszukiwania a ludźmi? Oto kilka wskazówek.

(Ostatnia aktualizacja dnia: 10/27/2018)

Wybierz odpowiedni format dla zdjęć.

Obrazy w pełnym kolorze, w tym miliony odcieni, można zapisywać tylko w dwóch głównych formatach: JPG i PNG-24. GIF i PNG-8 kategorycznie nie pasują: obie działają tylko z ograniczoną liczbą kolorów (do 256 w zależności od tabeli kolorów). Zarówno GIF, jak i PNG-8 są idealne do zapisywania rysunków, rysunków lub obrazów, które korzystają z bardzo ograniczonej palety. Nie zdjęcie!

• Funkcja zdjęć w formatach GIF i PNG-8 : w przeciwieństwie do JPG i PNG-24, nie powinny być skalowane. Natychmiast stracił jasność, są nieprzyjemne artefakty.
• Funkcje JPG i PNG-24 . PNG-24 należy wybrać, jeśli potrzebujesz najbardziej przystępnej jakości, niezależnie od rozmiaru. Inną różnicą tego formatu jest obsługa przezroczystości: możesz na przykład usunąć tło, aby umieścić fragment zdjęcia w tle, które już istnieje w witrynie. Jest to wygodne do umieszczania złożonych logo w kolorach gradientu i różnych kolorach. W większości przypadków musisz użyć jpg.

Wniosek Jeśli chcesz umieścić na stronie rysunek, zeskanowany dokument, rysunek - użyj GIF i PNG-8. W tym przypadku uzyskasz wysoką rozdzielczość i niewielką wagę. Użyj JPG, aby przesłać zdjęcia na stronę. W sieci społecznościowej lepiej jest pobrać PNG-24, ale więcej na ten temat poniżej.

Jest to zdjęcie zapisane w jednym z ośmiobitowych formatów.Aby przygotować zdjęcia do Internetu, użyj profesjonalnego oprogramowania. Polecam Adobe Photoshop lub jego analogi. Dlaczego Photoshop? Jego moduł Save for Web pozwala zobaczyć, jak obraz pogarsza się wraz ze wzrostem kompresji, i możesz wybrać właściwą równowagę między jakością a wagą obrazu. W tym samym oknie możesz zobaczyć, jak obraz będzie wyglądał na innych platformach, przejdźmy teraz do bardziej szczegółowych zaleceń.

Przygotowanie do publikacji JPG

Pierwszą rzeczą do nauczenia się jest to, że każde zapisanie w formacie JPG zwiększa liczbę artefaktów. Ten algorytm kompresuje przez uśrednienie jednorodnych pikseli. Im większa kompresja - im mniej szczegółów, odcieni, tym bardziej znane są znane „kwadraty”. Zapisz obraz jako jpg dla sieci w ostatniej chwili, przed publikacją. Wcześniej należy zapisać obraz w jednym z formatów bez kompresji stratnej: PSD, TIFF, a nawet PNG-24.

Przed zapisaniem obrazu w Internecie zmniejsz rozdzielczość zdjęcia. Aparat zapisuje zdjęcia z ppi 300 lub 240 (w zależności od ustawień aparatu), a wyświetlacze (z wyjątkiem siatkówki) rozumieją tylko 72 ppi. Nadmierna rozdzielczość zwiększa ciężar obrazu bez żadnych korzyści wizualnych. Wysoka rozdzielczość wymagana tylko do drukowania.

Nie zapisuj do publikacji na zdjęciu internetowym z redundantną rozdzielczością. Zwiększa to rozmiar, ale nie daje żadnych korzyści: współczynnik kompresji JPG dla publikacji w Internecie wynosi 80% i więcej (tj. 70, 60, 50% ...). Koncentruj się przede wszystkim na jakości, ale pamiętaj: dzisiaj maksymalna „waga” obrazu umieszczonego na stronie jako ilustracja wynosi około 250 kb. Trzymaj się tej liczby.

Zapisz się do naszego kanału Telegram, aby nie przegapić nowych artykułów i przepisów!
@aromaesthetica

Usuń metatagi z obrazów internetowych: informacje o autorze, prawa autorskie, informacje o aparacie itp. Znacznie zwiększają „wagę” obrazu.

Podczas zapisywania zaznacz pole wyboru „Progressive development”. Ten algorytm ładuje obraz w kilku przejściach. Użytkownik witryny widzi już ładujące się zdjęcie, które staje się coraz bardziej szczegółowe w miarę pobierania.

Czy powinienem dołączyć do profilu kolorów obrazu? Prawdopodobnie nie, jeśli konwertujesz zdjęcia na sRGB-1966. Przeglądarki mogą z nim współpracować tylko. Jeśli jednak Twój obraz zostanie zapisany w jednym z profesjonalnych formatów, wystąpią problemy z wyświetlaniem. Sam profil kolorów jest niewielkim plikiem tekstowym zintegrowanym z pojemnikiem z obrazem. Oczywiście, nieznacznie zwiększa to wagę pliku, więc lepiej wyciąć go wraz z metatagami.

GIF i PNG-8

Różnica między tymi formatami dotyczy licencjonowania i nie jest to nasz temat. Ponadto GIF może działać z animacją, ale PNG-8 nie. Jeśli obraz zawiera ograniczoną liczbę kolorów (od 1 do 256), a także obszary przezroczyste - zapisz w jednym z tych formatów.

Antyczny grawer zawiera minimum kolorów i jest zbudowany na uderzeniach. optymalnym formatem jest GIF lub PNG-8. Podczas zapisywania GIF i PNG-8, Photoshop oferuje kilka opcji. Po pierwsze: wybierz liczbę kolorów. Więcej kolorów - większa waga. Sprawdź, czy jakość nie zniknie, a ostrość nie zgubi się i kieruj się minimalną paletą rozmiarów.

Jeśli obraz nie wymaga przezroczystości - usuń zaznaczenie odpowiedniego pola.

W niektórych przypadkach trochę „szumu” musi zostać zmieszane w indeksowanym obrazie, aby ukryć artefakty. Służy do zapisywania plików GIF i PNG-8, utworzonych ze zdjęć i filmów (jeśli jest to GIF). „Photoshop” oferuje kilka rodzajów takich szumów, wybierz odpowiedni.

Przypomnę: GIF i PNG-8 nie powinny być skalowane! Zapisz je w rozmiarze, w jakim powinny być wyświetlane na monitorze.

PNG-24

W tym formacie jakość jest zachowywana, ponieważ kompresja nie jest zapewniona. Obsługiwana jest przezroczystość (kanał alfa).

Nigdy nie publikuj zdjęć na stronie w formacie PNG-24. Są to kilkakrotnie „twardsze” zdjęcia w formacie JPG. Rozmiar załadowanego obrazu ma bezpośredni wpływ na szybkość ładowania strony, a plik w formacie PNG-25 „waży” około 4-8 razy ten sam obraz w formacie JPEG bez widocznego pogorszenia (przy współczynniku kompresji 80%).

Jeśli przesyłasz zdjęcia w sieci społecznościowej (Facebook, Instagram, Vkontakte), powinieneś wybrać PNG-24. Powodem jest to, że podczas pobierania zdjęć, będą one nadal konwertowane i ukąszane przez sieci społecznościowe, co oznacza, że ​​jakość zdjęcia znów ucierpi. Nie możesz kontrolować stopnia kompresji, możesz tylko spróbować zmniejszyć ryzyko. W tym celu potrzebny jest format PNG-24 bez utraty jakości. We wszystkich innych przypadkach użyj bardziej odpowiednich formatów.

Webp

Ten format obrazu do publikacji w Internecie został opracowany przez Google prawie 10 lat temu. Jego główną zaletą jest to, że kompresuje pliki bez utraty jakości półtora raza silniej niż JPEG, a także obsługuje przezroczystość. Może zastąpić wszystkie bieżące formaty obrazów w Internecie. Wydawałoby się, dlaczego go nie użyć?

Główny problem formatu WebP (brzmi „veppi”): nie wszystkie przeglądarki go czytają. Teraz, w 2018 r., Tylko Chrome i Opera sobie z tym poradzą, ale Microsoft Explorer, Microsoft Edge, Firefox i Safari tego nie rozumieją. Dlatego będziesz musiał zastąpić obrazy tego formatu obrazami tradycyjnych formatów w Internecie. I to jest dokładnie dwa razy więcej zdjęć, które będą musiały przesłać na serwer.

Kolejny problem: rzeczywista realizacja pracy z tym formatem oznacza także konwersję w locie, która znacząco obciąża początkowy przebieg strony internetowej. Innymi słowy, stosunek „tekst / kod HTML” zmienia się w kierunku HTML. To jest złe dla optymalizacji pod kątem wyszukiwarek. Okazuje się więc: z jednej strony zdjęcia ładują się szybciej, ale nie z każdą przeglądarką, i trzeba przechowywać zdjęcia w dwóch formatach. Z drugiej strony strona staje się cięższa.

Format obrazu dla Internetu WebP może mieć wspaniałą przyszłość: naprawdę silniej kompresuje obrazy. Zdjęcia o wysokim stopniu kompresji stają się nieco bardziej zabłocone, nie znaleziono innych artefaktów kompresji. Ale korzystanie z tego formatu jest teraz tematem do refleksji webmastera. Osobiście nie jestem jeszcze gotowy do korzystania z tego formatu.

Ogólne zalecenia

Podczas zapisywania pliku do publikacji na stronie, nadaj mu znaczącą nazwę opisującą jego zawartość. Wyszukiwarki zwracają na to uwagę. Nazwa powinna być zapisana w transliteracji, spacje należy zastąpić myślnikami. Wszystkie słowa w tytule - z małą literą.

Przy zmniejszaniu rozmiaru zdjęcia użyj algorytmu wyostrzania. Jeśli wiesz, jak pracować z algorytmami wyostrzania - przedwzmacnij go ręcznie, zanim zmniejszysz rozmiar zdjęcia. Przeczytaj więcej o poprawie ostrości i szczegółowości. spójrz tutaj .

Nie umieszczaj skalowanych obrazów. Skontaktuj się z webmasterem, w jakim rozmiarze jest potrzebna szerokość i wysokość obrazu, a następnie zapisz zdjęcie do publikacji w tym rozmiarze. CMS może automatycznie skalować obraz, ale w rezultacie strona będzie ważyć znacznie więcej niż to konieczne. Ma to duży wpływ na szybkość witryny, aw rezultacie - na jej miejsce w wynikach wyszukiwania. Lub, jako opcja, CMS rozciąga obraz do żądanego rozmiaru, wygląda źle.

Te same „kwadraty”, artefakty algorytmu kompresji. Czy lubisz tę jakość? Nie polecam automatycznych „optymalizatorów” zdjęć na podstawie zaleceń Google Speed ​​Test. Tak, radykalnie zmniejszą wagę obrazów, ale oszczędzą oczy odwiedzających. Tak i własny biznes: jakość treści wizualnych wpływa na postrzeganie witryny i jej konwersję. Gorsza percepcja - mniej pieniędzy w kieszeni. Lepiej jest poświęcić trochę czasu na przygotowanie pełnej zawartości, warto.

Wniosek

Aby zachować równowagę jakości i małego rozmiaru pliku, zapisuj obrazy do ręcznego opublikowania w Internecie. Podejdź do wyboru ostatecznego formatu świadomie, jeśli masz wątpliwości - wybierz JPG. Tak, co roku pojawiają się nowe zoptymalizowane formaty, ale nie są one obsługiwane przez wszystkie przeglądarki i systemy zarządzania treścią. JPG to uniwersalny format ilustracji tekstowych.

Podsumowanie

Tytuł artykułu

Jak zapisywać obrazy dla witryn

Opis

Jak wybrać format zdjęć do publikacji w Internecie, jakie ustawienia zastosować, aby obraz wyglądał dobrze, ale nie spowalnia witryny pobierania? Zalecenia robocze.

Autor

Wiktor Pietrow

Wydawca

aromaesthetica.ru