Grafiki na stronie internetowej – jaki powinny mieć rozmiar i format?

Rozmiar obrazów, zdjęć i innych elementów graficznych istotnie wpływa na wiele czynników związanych ze stroną – przede wszystkim na szybkość jej ładowania zarówno na urządzeniach stacjonarnych, jak i mobilnych. Zbyt duża waga spowalnia transfer serwera. Ma to niebagatelne znaczenie zarówno dla użytkowników, jak i samej wyszukiwarki. Dowiedz się, jaki jest optymalny rozmiar grafik, jakie są popularne formaty i co należy zrobić, zanim dodasz zdjęcia na swoją stronę WWW.

Dlaczego rozmiar zdjęć ma znaczenie?

Powody są dwa. Zbyt ciężkie grafiki spowalniają ładowanie się strony, co powoduje:

• zniecierpliwienie użytkowników, którzy są przyzwyczajeni do błyskawicznych rozwiązań. Zbyt długie oczekiwanie to impuls do opuszczenia przez nich witryny. Nie dość, że tracisz potencjalnych klientów, to jeszcze tracisz w ich oczach – firma, która nie dba o stronę, może być postrzegana jako ta, która prawdopodobnie nie inwestuje w nowoczesne rozwiązania i zaniedbuje własny biznes,

• niższą pozycję w wyszukiwarce – tracisz szansę do przebicie się wśród konkurencji i zostajesz w tyle. Szybkość ładowania się strony jest jednym z istotnych parametrów branych pod uwagę przez Google podczas klasyfikowania wyników wyszukiwania. Więcej o powolnym ładowaniu się strony przeczytasz w artykule.

Co musisz zrobić, zanim dodasz zdjęcia na stronę?

Przede wszystkim zwróć uwagę na rozmiar elementów graficznych, które chcesz umieścić na swojej stronie WWW. Rozmiar optymalny dla wyświetlania pełnoekranowego na większości komputerów to 1920 (szerokość) i 1080 (wysokość) px.

Warto wiedzieć, że liczba pikseli mówi o jakości zdjęcia – im większa liczba, tym wierniejsze jest odtworzenie obrazu. Przy dodawaniu grafik na stronę liczy się przede wszystkim szerokość pliku w pikselach. Jeśli chodzi o wysokość, to podana wartość jest jedynie zalecana, może być mniejsza.

Jeśli rozmiar grafik jest zbyt duży, podejmij odpowiednie kroki:

• przed publikacją zoptymalizuj grafiki i dostosuj rozmiar w pikselach,

• zmniejsz wagę pliku i jego rozdzielczość,

• wybierz odpowiedni format pliku, czyli taki, który umożliwia przetwarzanie przy zachowaniu jak najwyższej jakości.

Problematyczny może być dobór rozdzielczości plików w przypadku strony responsywnej, czyli takiej, która dopasowuje się do wielkości wyświetlacza. Trzeba wziąć pod uwagę to, że gdy zmniejsza się rozmiar ekranu, pomniejszeniu ulegają również grafiki. Może to odbić się na ich czytelności. Co zrobić w takim razie? Rozwiązaniem jest:

• załadowanie grafiki o większej rozdzielczości – dzięki temu mamy pewność, że skalowanie nie doprowadzi do utraty jakości. Ta opcja nie jest jednak bez wad – z jednej strony możemy wykorzystać jedno zdjęcie do wszystkich typów urządzeń, z drugiej taki plik będzie ważył więcej, a to oznacza, że ładowanie strony może być spowolnione,

• przygotowanie plików do różnych typów urządzeń – wymaga to przygotowania trzech sztuk o różnej wysokości i kadrowaniu. Może być to dobra opcja, bo nie wpływa na szybkość ładowania, ale jest czasochłonna.

Rozmiar zdjęcia to jednak nie wszystko, liczy się również waga. Im rozmiar będzie większy, tym grafika będzie ważyć więcej. Jakie pliki sprawdzą się na stronach internetowych? Takie o wadze do 300 kB. Gdy będą większe, obciążą transfer serwera, a witryna będzie ładować się wolniej.

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

Jakie są popularne formaty grafik?

Najpopularniejsze formaty grafik to:

• JPEG,

• PNG,

• SVG,

• WebP,

• GIF.

Ten ostatni kojarzony jest z mediami społecznościowymi. Czym charakteryzują się poszczególne formaty?

Format SVG

Chętnie wybierany, ponieważ ma wiele zalet –  jest to format wektorowy, a dodatkowo gwarantuje wyraziste odwzorowanie krawędzi elementów. Obraz zapisany w formacie SVG nadaje się do bezstratnego skalowania. Sprawdzi się w różnych rozdzielczościach i rozmiarach przede wszystkim na stronach WWW (ale także w plikach PDF). Jest elastyczny pod względem kolorów i odcieni. Ponadto posiada profil na urządzenia mobilne i nadaje się do tworzenia animacji.

Format PNG

Format PNG to format o charakterze bitmapowym o możliwości odtworzenia do 16 milionów kolorów, gradientów i obsługą kanału alfa. Oznacza to, że obraz może być częściowo przezroczysty, zupełnie przezroczysty lub nieprzezroczysty. Zapewnia lepsze wykończenie krawędzi niż GIF. Sprawdzi się w szczególności w takich elementach jak ikony, loga, przyciski na stronie.

Format JPEG

Wyjątkowo popularny w sieci. Rozmiar i wagę pliku ma mniejszą niż PNG, dlatego nie obciąża strony przy jej ładowaniu. Będzie idealny przy wielobarwnych fotografiach, które zawierają płynne przejścia między kolorami. Jest formatem stratnym, co oznacza, że po skompresowaniu pliku zdjęcie bezpowrotnie traci na jakości. Jego późniejsza edycja, kopiowanie czy powiększanie na urządzeniu wypływa na pogorszenie jakości.

Format GIF

To najstarszy z formatów, jednak nadal pozostaje w użyciu. Każdy piksel jest reprezentowany przez jeden z 256 kolorów, przy większej liczbie będzie stwarzał problemy z wiernością odwzorowania w przypadku skompresowania. Format ten obsługuje przezroczystość i oferuje możliwość animowania poklatkowego obrazu, dlatego obecnie stosuje się go wtedy, kiedy potrzebny jest efekt animacji.

Format WebP

Najnowocześniejszy sposób kompresji obrazów opracowany przez jednego z gigantów technologicznych. Jego głównym celem jest zmniejszenie rozmiaru plików graficznych bez utraty jakości, co przekłada się na szybsze ładowanie stron internetowych oraz oszczędność transferu danych.

WebP łączy w sobie zalety formatów JPEG, PNG i GIF, oferując jednocześnie lepszą kompresję oraz obsługę przezroczystości i animacji. Dzięki temu, obrazy w tym formacie są lżejsze od swoich odpowiedników, a jednocześnie zachowują wysoką jakość.

To, który z formatów wybierzesz, zależy od Twoich potrzeb i preferencji.