Jak zadbać o odpowiednie grafiki i zdjęcia na stronie internetowej?

Często spotykanym problemem występującym na stronach internetowych firm jest umieszczenie na nich grafik i fotografii, które spowalniają działanie witryny lub sprawiają negatywne wrażenie użytkowników podczas przeglądania serwisu. Gdzie łatwo o błąd w tym temacie? Zdjęcia na stronie są w zbyt dużej rozdzielczości, dodane pliki są w nieprzyjaznym internetowi formacie, a ich kompresja wpływa na jakość odbioru lub wielkość danego obrazu.

Rozmiar elementów graficznych. Jak przygotować zdjęcia do dodania na stronę?

Rozmiar obrazów graficznych ma wpływ na szybkość ładowania się strony na urządzeniach użytkowników, spowalnia transfer serwera, jest także jednym z istotnych parametrów branych pod uwagę przez Google podczas klasyfikowania wyników wyszukiwania. Powoli otwierające się grafiki są dla przyzwyczajonych do błyskawicznych rozwiązań internautów impulsem do opuszczenia takiej witryny, bo szybko powodują ich zniecierpliwienie. Mogą również sugerować słabą dbałość o potrzeby klientów, wskazywać na zapóźnienie technologiczne firmy czy wreszcie na nieumiejętność zadbania o własny biznes. Tworzy to negatywny wizerunek przedsiębiorstwa.

Co należy robić przy dodawaniu zdjęć:

• przed ich publikacją trzeba je zoptymalizować i dostosować rozmiar w pikselach,
• zmniejszyć wagę pliku, jego rozdzielczość,
• dobrać taki format pliku, który daje obrazowi możliwość przetwarzania przy zachowaniu jak najwyższej jakości.

Przy rozmiarze dobrze jest pamiętać, by nie przekraczać wartości 1920 (szerokość) i 1080 (wysokość) px; obecnie taki rozmiar jest optymalny dla wyświetlania pełnoekranowego na większości komputerów. Liczba pikseli oznacza jakość zdjęcia: im większa liczba, tym wierniejsze jest odtworzenie obrazu. Przy dodawaniu grafik na stronę ważniejsza jest szerokość pliku w pikselach, wysokość jest rekomendowana, może oczywiście być mniejsza.

Problemem może okazać się jednak dobranie rozdzielczości plików przy budowie strony responsywnej (dopasowującej się automatycznie do wielkości wyświetlacza). Dlaczego? Przy zmniejszaniu się rozmiaru ekranu, zmniejszać się też będzie rozmiar pliku graficznego, przez co straci on czytelność. W omawianym przypadku można zastosować dwa rozwiązania:

1. załadować grafikę o większej rozdzielczości, dzięki czemu przy skalowaniu grafika nie straci na jakości i do wszystkich typów urządzeń wykorzystamy jeden plik. Będzie on jednak cięższy i będzie otwierać się nieco wolniej
2. przygotować pliki do poszczególnych typów urządzeń (zwykle trzy sztuki o odpowiedniej wysokości i kadrowaniu), dzięki czemu poprawi się szybkość ładowania strony i zmniejszy się waga obrazów. Rozwiązanie to jest jednak bardziej czasochłonne, nie wybiorą go więc osoby pragnące szybko uruchomić swoją stronę

Z rozmiarem zdjęcia – jak już zostało to powiedziane – wiąże się waga pliku: im większy rozmiar, tym zdjęcie jest cięższe. Do publikacji w internecie wystarczy plik o wadze do 300 kB, większe obciążą transfer serwera i spowolnią stronę.

Zbudujemy Ci stronę, która sprzedaje. Sprawdź jak>>

Jaki format grafik stosować na stronie internetowej?

Jeśli zaś chodzi o format, to najczęściej spotykane są 4 rodzaje formatów: JPEG, PNG, SVG i kojarzony z mediami społecznościowymi GIF. Przed wybraniem warto poznać kilka istotnych szczegółów:

• format SVG chętnie wykorzystują webmasterzy, bo jest obsługiwanym przez przeglądarki formatem wektorowym, zapewnia wyraziste odwzorowanie krawędzi elementów, a zapisany w nim obraz można skalować Jest wydajny w różnych rozdzielczościach i rozmiarach, choć zawierający zbyt wiele szczegółów może tracić na estetyce przy pomniejszaniu. Obraz poddaje się animowaniu i ustawieniu maski transparentnej, jest też bardzo elastyczny jeśli chodzi o paletę kolorów i odcieni. Jest formatem o dużej zawartości kodu. Posiada profil przeznaczony na urządzenia mobilne
• format PNG jest formatem o charakterze bitmapowym o możliwości odtworzenia do 16 milionów kolorów, gradientów i obsługą kanału alfa, co pozwala na ustawienie zdjęcia w tle (ze stopniowaniem przezroczystości), lepsze wykończenie krawędzi oraz edytowanie palety kolorów. Zapewnia kompresję bezstratną (2-stopniowa kompresja), co ułatwia skalowanie obrazu bez utraty jakości, ale niektóre barwy lub odcienie mogą wpływać negatywnie na rozmiar i wagę pliku
• format JPEG jest niemal najpopularniejszym formatem grafiki stosowanym do użycia w internecie. Rozmiar i wagę pliku ma mniejszą, niż PNG, co nie obciąża strony przy jej ładowaniu. Najlepiej nadaje się do obsługi zdjęć (naturalne obrazy), szczególnie jeśli publikujemy ich duże ilości, w mniejszym stopniu do grafik. Bardzo dobrze odzwierciedla kolory (do 16 mln), jest formatem stratnym: po skompresowaniu pliku zdjęcie bezpowrotnie traci na jakości, więc jego późniejsza edycja, kopiowanie czy powiększanie na urządzeniu spowoduje pogorszenie wizualnej jakości obrazu
• format GIF jest najstarszym ze wszystkich, ale wciąż używanym formatem zapisu pliku graficznego. Poszczególne piksele obrazu mają zaindeksowane (przypisane) 256 kolorów, dzięki czemu plik, zwłaszcza w małym formacie, można mocno skompresować, jednak przy większej od 256 liczbie kolorów będzie stwarzał problemy z wiernością odwzorowania. Format GIF daje możliwość dwustopniowej transparentności (pełna barwa lub całkowita przezroczystość) oraz oferuje możliwość animowania poklatkowego obrazu. Najlepiej się sprawdza przy jednolitych kolorach i wyraźnych, ostrych krawędziach na elementach grafiki. Jest często wybierany do zobrazowania funkcyjnych elementów strony WWW: przycisków, ikon, logo itp.