Jak przygotować obrazy do umieszczenia na stronie internetowej?!

Czas czytania 4 minuty

To w jaki sposób umieścimy na naszej stronie w sklepie internetowym lub na blogu dowolną grafikę w brew pozorom nie jest takie łatwe.

Nie możemy bowiem wrzucić od tak dowolnej grafiki i oczekiwać że wszystko jest i będzie dobrze. Istnieje bowiem kilka aspektów na, które trzeba zwrócić uwagę. Tak by obraz był uzupełnieniem, dekoracją strony a nie problemem na niej.

Dlaczego trzeba zadbać o odpowiednią obróbkę zdjęcia przed umieszczeniem na stronie?!

Istnieje wiele powodów dla, których nie można tak po prostu dodać jakiegoś randomowego zdjęcia na stronę. I nie, nie mam na myśli sytuacji gdy zdjęcie nie pasuje tematycznie. Chodzi raczej o bardziej subtelne elementy jak:

W mojej pracy wielokrotnie miałam problemy wynikające z tego w jakiej formie dostałam zdjęcie. Część klientów bowiem nie przykłada uwagi do tego jakie ma zdjęcia – uważają, że skoro je mają to jest już postęp. Teraz pewnie odzywają się głosy by zaproponować klientowi sesję zdjęciową. I czasem faktycznie to dobre rozwiązanie, ale nie zawsze możliwe. Bo co jeśli problemem jest np. logo jakieś firmy / instytucji. Klient tylko takie dostał i nie da się tego przeskoczyć.

umieszczanie grafiki na stronie

W praktyce można więc nawet dostać naprawdę małą grafikę do wstawienia w nagłówek – z oczekiwaniem, że się ją w jakiś sposób powiększy. A to w większości przypadków jest nie możliwe bez utraty jakości zdjęcia. Powiększając za mocno obraz można też sprawić, że będzie bezużyteczny – bo np. nieczytelny.

Z dużymi grafikami można sobie jakość poradzić np. poprzez odpowiednie ich docięcie. Chociaż i tu może być istotne to czy obraz ma orientację pionową czy poziomą. Wszystko w praktyce bowiem zależy od tego jaką rolę miała by pełnić grafika na stronie.

Przykładowo obecnie przyjmuje się, że grafika w tle strony na monitory komputerów powinna mieć wymiary 1920×1080 pikseli (FullHD). Nie trudno się więc domyślić, że takie zdjęcie z pewnością wszędzie indziej będzie za duże. Co do wymiarów innych grafik to wymiary 800×600 pikseli (szerokość x wysokość) nadają się ponoć świetnie do galerii zdjęć.

Kompresja a waga i rozdzielczość – jakie mają znaczenie?

Większość z ludzi posiada strony w technologii np. RWD. Czyli takie, które dostosowują się do wielkości ekranu. Co z automatu oznacza, że bardzo często to samo zdjęcie wczytuje się na komputerze stacjonarnym i smartphone. Zdjęcie takie przeważnie dużo waży co w istotny sposób może przekładać się na szybkość wczytywania strony. Być może na komputerze stacjonarnym bądź laptopie będzie to ledwo zauważalne jednak na mobilnych sprawa ma się już zupełnie inaczej. Warto tu wspomnieć, że nikt nie lubi czekać. Jeśli strona zbyt długo się będzie wczytywać odwiedzający mogą ją opuścić. Poza tym szybkość wczytywania jest brana pod uwagę w algorytmie wyszukiwarki Google.

Na wagę zdjęcia czy jakiego innego obrazu mają wpływ również:

  • historia jego edycji – prawie każdy program w którym zapisujemy / edytujemy obraz zostawia po sobie w kodzie ślad
  • metoda kompresji – czyli sam sposób w jaki zapisano obraz
  • odpowiedni rozmiar – warto jest sprawdzić jakie wymiary ma dana grafika a jakie mieć powinna. Nie należy umieszczać na stronie za dużych zdjęć bo zbytnio ją przeciążają -> duże zdjęcia zazwyczaj więcej ważą
  • format zapisu – czy jest np.: JPG, PNG

Jak widać obrazy mają trochę nie widocznych na pierwszy rzut oka informacji. Nie są one jednak tak istotne jak odpowiednia metoda kompresji.

Rodzaje stosowanych kompresji zdjęć

Kompresja Bezstratna

Kompresja bezstratna polega na zapisie zdjęć bez widocznej utraty jakości obrazu. Kompresję tego typu stosuje się dla formatów np.

  • PNG,
  • TIFF.

Kompresja Stratna

W kompresji stratnej z kolei zmniejszamy wagę zdjęcia poprzez pogorszenie jego jakości. Spowodowane jest to redukcją pikseli w obrazie, możemy mieć również do czynienia z redukcją kolorów. W efekcie zdjęcie nie jest już tak ostre jak wcześniej.

Zmniejszanie wagi obrazu

Kiedy nasze zdjęcie ma już odpowiednie wymiary (indywidualnie dobrane do potrzeb strony internetowej lub bloga). Warto pomyśleć o tym by było ono jak naj lżejsze jednocześnie przy zachowaniu w miarę dobrej kompresji – szczególne jeśli chcemy mieć na stronie kilka zdjęć.

Na początek warto wspomnieć, że za zwyczaj grafiki w formacie PNG są dużo cięższe od tych w JPG. Dlatego też o ile obraz nie posiada w sobie przezroczystości warto zapisać go w formacie JPG. I być może podczas tego zapisu ustawić jakość zamiast nie na 10 tylko na 9 /8 (100% na 90% / 80%).

Zmiana rozdzielczości obrazu na przykładzie Gimp

Co do obiektów / grafik z przezroczystością aktualnie często zapisywane są one w formacie SVG. Czyli w jednym z formatów, które poleca sam Google.

Zmiana wagi obrazu w Internecie

W internecie dostępnych istnieje wiele stron z pomocą, których również można zmniejszyć wagę zdjęcia.

Optimizilla - strona z pomocą, której można optymalizować wagę obrazu
przykładowa strona z możliwością optymalizacji wagi obrazu – https://imagecompressor.com/pl/

Przykładowe strony:

Jedyne co trzeba zrobić to przesłać pliki.

Nie zapomnij o odpowiednich znacznikach!

Kolejnym istotnym aspektem jest fakt, że tak naprawdę tylko my ludzie widzimy to co znajduje się na zdjęciu. Wyszukiwarki internetowe tak naprawdę tego nie potrafią. Uznają więc one, że zdjęcie powiązane jest z treścią strony. Co nie koniecznie jest słuszne. Dlatego warto jest pomyśleć o opisaniu obrazu.

Do tego celu służy znacznik alt=””.

przykładowy Opis alternatywny obrazu
<img src="2/ID-10043443-m.jpg" alt="Opis alternatywny" />

Zawartość tego znacznika nie tylko informuje wyszukiwarki o tym co „przedstawia obraz”, ale także w razie braku samej grafiki wyświetla się w jej miejscu.

Innym znacznikiem, o którym warto pomyśleć jest TITLE. Znacznik ten można dodać praktycznie do każdego elementu, ale najczęściej robi się to właśnie dla grafik.

Podsumowanie

Z pewnością można by jeszcze wiele powiedzieć na ten temat. Ja jednak w tym monecie skończę. I odeślę was do linków, które dodałam w tym wpisie. Dzięki nim będziecie mogli uzupełnić swoją wiedzę o aspekty, które tutaj pominęłam. Jednocześnie chciałam zaznaczyć, że waga oraz jakość zdjęcia od 2021 roku będzie odgrywała istotną rolę. Jako jeden z parametrów branych przez Google do określania jakości strony internetowej. Dlatego optymalizacja zdjęcia będzie jeszcze ważniejsza.