Zaloguj się

Zarejestruj się

Panel Webmastera

Autor: Paweł Krzywina

Optymalizacja zdjęć (SEO) – jak wybrać zdjęcia na stronę internetową? 

Tworzenie strony internetowej to proces, podczas którego musisz zwrócić uwagę na wiele elementów. Od szablonu strony czy podstawowych funkcji, aż do zawartości i treści na stornie. Warto się skupić na dobrym dobrze zdjęć na stronę internetową. Są one ważne dla użytkowników (uzupełniają treść strony) i dla algorytmów wyszukiwarek (odpowiadają za semantykę strony). Jednak wiąże się z tym rodzajem treści na stronie jeszcze jedna kwestia. Optymalizacja grafik na stronie.

Z tego tekstu dowiesz się jak wybrać dobre zdjęcia na stronę internetową, skąd wziąć grafiki i zdjęcia za darmo oraz jak zoptymalizować je na stronie.

 

Dlaczego warto umieścić grafiki i zdjęcia na stronie internetowej?

 

Obraz to znana forma ekspresji.

Pozwala pokazać coś, co można opisać wieloma słowami – szybko, zrozumiale i przystępnie.

Projektując stronę internetową musisz pamiętać o grafikach i zdjęciach.

Zwłaszcza że poza kwestiami estetycznymi mogą mieć one wpływ na pozycję strony.

Chodzi oczywiście o semantykę strony i to, że roboty wyszukiwarek widzą na niej nie tylko tekst, ale też powiązane tematycznie obrazy.

Grafiki na stronie uzupełniają też cały projekt – począwszy od dobrego układu strony, poprzez dobry wybór fontów i kolorów na stronie, aż do dopełnienia tekstu.

Do tego pomagają utrwalić obraz marki strony w pamięci użytkowników.

 

Jakie powinny być zdjęcia na stronie internetowej (branding, historia, żart)?

 

W zależności od tego, jaki jest cel Twojej strony, musisz wybrać dla niej odpowiednie zdjęcia.

Możesz sięgnąć po zdjęcia z banków zdjęć – darmowych i płatnych – lub zrobić je samodzielnie.

Podobnie ma się sprawa z grafikami: możesz wykorzystać grafiki lub stworzyć własne, na przykład w Canvie lub Photoshopie.

Obrazy na stronie mogą opowiadać historię – Twoją lub Twojej firmy.

Jakie powinny być zdjęcia?

Konkretne, autentyczne, z legalnego źródła (czyli musisz mieć prawo do ich wykorzystania), nawiązujące do treści na stronie i Twojej marki.

W tych kilku słowach zamyka się ten temat, jednak rozwinę go trochę, żeby łatwiej było Ci zrozumieć te subtelne (bo to są subtelne) różnice.

 

Wykorzystanie grafik do brandingu (tworzenia marki) ułatwia zapamiętanie przez użytkowników.

Wyraźne logo, korzyść płynąca ze zdjęcia (dobrej jakości i po prostu ładnego) pomaga wbić się w pamięć odbiorcy.

Zobacz jak to robi Subway, znana sieć lokali z kanapkami na wynos i nie tylko.

 

subway - jakie zdjęcia dodać do strony www

 

Autentyczność zdjęć i grafik jest też bardzo ważna.

Na pewno kojarzysz grafiki i zdjęcia „zespołu”, które aż krzyczały „jestem generycznym zdjęciem ze stocka”.

Nie warto czegoś takiego dodawać do strony, bo z pewnością nie pomoże to wzbudzić zaufania odbiorców – wręcz przeciwnie.

Zobacz jaka jest różnica między generycznym, a w miarę autentycznym zdjęciem (też ze stocka).

 

jakie zdjęcia pasują do strony internetowej - autentyczne i nieautentyczne zdjęcia zespołu

 

Zdjęcia pomagają opisać coś konkretnie.

Grafika powinna uzupełniać to, co masz do powiedzenia i opowiedzenia na stronie.

Na przykład w tekstach blogowych grafika powinna sygnalizować tematy związane z treścią i je uzupełniać.

Im bliżej są tematu i im lepiej go tłumaczą, tym większą wartość mają dla użytkowników.

Zobacz jak to robimy na naszym blogu, na przykład w tekście o personie strony.

 

 

Możesz też zrobić coś z przymrużeniem oka.

Każdy lubi się śmiać, nawet najwięksi ponuracy.

Wykorzystują to marki, które podchodzą do siebie z dystansem – nie tylko w reklamach, ale też w komunikacji wizualnej. Tworzą swego rodzaju internetowy żart graficzny. 

Widać to chociażby na przykładzie OldSpice, marki, która słynie z kreatywnych żartów – również z siebie.

 

old spice - jak największe marki traktują się z dystansem

 

Wizualizacja danych to kolejny przykład wykorzystania grafik na stronie.

Wyłapanie w tekście konkretnych statystyk może być trudne dla niektórych użytkowników, jednak zaprezentowanie danych – w formie infografiki czy interaktywnego banneru – pomaga zdobyć uwagę odbiorcy.

No i po prostu ładnie wygląda.

Tak pokazujemy statystyki naszego kreatora. W formie tekstu mogłyby być po prostu nudne lub nie przykuwać uwagi.

A tak – nudne liczby mogą być ciekawe.

 

 

O czym musisz pamiętać, wybierając dobre grafiki i zdjęcia na stronę www?

 

Najważniejszą rzeczą jest oczywiście ich legalność.

Musisz mieć prawo do użycia i opublikowania ich na stronie.

Są różne rodzaje licencji na wykorzystanie grafik i zdjęć, w zależności od miejsca, z którego je pobierasz.

Warto też się zainteresować tym, czym jest copyright.

Do tego zdjęcia muszą wyglądać naturalnie i być zwyczajnie ładne.

Takie podejście pomaga poprawić user experience i ogólne wrażenie użytkowników.

Złe grafiki mogą negatywnie wpłynąć na odbiór strony.

Więc jeśli masz zdjęcia na stronie, ale masz wrażenie, że coś z nimi jest nie tak, to musisz:

  • zadbać o poprawę jakości zdjęcia online (rozdzielczość odpowiednia dla rozmiaru);

  • może zamówić profesjonalną sesję zdjęciową lub zrobić lepsze zdjęcia samodzielnie;

  • poszukać zdjęć lepiej prasujących do tematu i celu strony wśród darmowych obrazów do publikacji.

 

To pomoże w optymalizacji konwersji strony i na pewno poprawi wrażenie, jakie wywrze Twoja strona na użytkownikach.

 

Jak sprawdzić, czy zdjęcie jest z internetu?

Jak spr

Pamiętaj, że użytkownicy mogą być podejrzliwy wobec dodanych przez Ciebie zdjęć. Nie staraj się więc udawać kogoś, kim nie jesteś lub sugerować, że jesteś autorem prac, z którymi nie masz nic wspólnego. Internauci mogą to naprawdę szybko zweryfikować. Wystarczy, że użyją takich programów jak:

  • Google Grafika (należy wybrać ikonę aparatu, wkleić link do zdjęcia lub przesłać obraz z komputera i... już. Prawdziwe źródło obrazu wyjdzie na jaw momentalnie),
  • Aplikacja Obiektyw Google,
  • TinEye. 

 

Skąd wziąć zdjęcia do strony internetowej (za darmo)?

 

W internecie znajdziesz kilka naprawdę bogatych darmowych stocków (baz darmowych zdjęć).

Różnią się one między sobą zawartością, jednak łatwo znajdziesz w nich to, czego szukasz.

Większość z nich działa w oparciu o licencje Creative Commons (najczęściej CC0, czyli domenę publiczną – to są darmowe zdjęcia).

Najlepsze darmowe bazy zdjęć to:

 

Jest jeszcze sporo innych stocków (na przykład VisualHunt, który działa bardziej jak wyszukiwarka, ale często te zdjęcia mają inne rodzaje licencji CC), podobnie jak sporo baz płatnych zdjęć (123RF, Shutterstock, iStock), jednak naprawdę darmowe zdjęcia na stronę weźmiesz z tych czterech stocków powyżej.

W WebWave udostępniamy też darmowy bank zdjęć i ikon z poziomu kreatora (prawie pół miliona zdjęć!). Wystarczy, że klikniesz na Bank Zdjęć i możesz dodać dowolną grafikę – zupełnie za darmo.

 

Dobra – skoro już omówiłem temat zdjęć na stronę internetową, pora zająć się ich optymalizacją.

 

Na czym polega optymalizacja zdjęć na stronę internetową (szybkość, rozmiar, format)

 

Zdjęcia na stronie internetowej są jednym z najcięższych elementów jeśli chodzi o czas ładowania i rozmiar.

Dlatego warto zadbać o optymalizację zdjęć na własnej stronie internetowej.

Sama optymalizacja zakłada kilka rzeczy:

  • wybór dobrego formatu zdjęć i grafik;

  • ich odpowiednie sformatowanie (rozdzielczość, poziom kompresji);

  • dostosowanie rozmiaru zdjęć na stronę internetową do ich miejsca w witrynie (też – bardzo ważne);

  • dbanie o nazwę plików i stosowanie opisów alternatywnych;

  • wykorzystanie lazy loading.

 

Optymalizacja zdjęć na stronie znacznie wpłynie na poprawę szybkości ładowania strony i zmniejszy czas oczekiwania na pojawienie się całej strony w przeglądarce.

 

Optymalizacja plików graficznych. Jak duże powinny być?

 

Wielkość grafik i zdjęć może być bardzo różna i niewątpliwie jest to najważniejszy czynnik wpływający na szybkość ładowania się strony internetowej.

Aparaty, te profesjonalne i w telefonach, mogą zapisywać obrazy w bardzo dużej rozdzielczości, co przekłada się na znaczny rozmiar plików, nawet po kilka megabajtów.

Musisz jednak dążyć do tego, żeby jak najbardziej je uszczuplić.

Żeby to uporządkować – zastanów się, jakiego rozmiaru grafik potrzebujesz na stronach.

Optymalny podział to:

  • duże zdjęcia i grafiki (w tle, nagłówki artykułów, na pełnoekranowych sliderach) – ich rozmiar nie powinien przekraczać 150 KB, a szerokość – 1600 pikseli;

  • średnie zdjęcia i grafiki (w treści strony, artykułów, galeriach) – ich rozmiar nie powinien przekraczać 80 KB, a szerokość – 1000 pikseli;

  • małe zdjęcia, grafiki i ikony (również logo; w innych miejscach na stronie, jako dodatek) – ich rozmiar nie powinien przekraczać 40 KB.

 

Pomoże Ci to w wybieraniu zdjęć na stronę i ich edycji.

Rozmiar czy poziom kompresji zdjęć zmienisz w popularnych i darmowych narzędziach graficznych: GIMP-ie (to półprofesjonalny graficzny program do powiększania zdjęć oraz ich pomniejszenia – darmowy) czy kombajnie do przeglądania zdjęć, takim jak InfranView.

W każdym z nich przytniesz obraz do konkretnych rozmiarów i wybierzesz poziom kompresji, który pomoże zmniejszyć ostateczną wagę pliku.

Więcej na temat przyśpieszania ładowania strony internetowej dowiesz się z tego artykułu.

Warto też wspomnieć o różnicy między grafikami.

Istnieją formaty rastrowe (czyli zapisujące grafiki jako ciąg pikseli o konkretnych rozmiarach; potocznie – bitmapa) i wektorowe.

Te pierwsze mają określoną jakość i można je powiększać do momentu, w którym widoczne są poszczególne piksele (.jpg, .png, .gif).

Formaty wektorowe zapisują kształty w formie krzywych, przez co możesz je powiększać w nieskończoność bez straty jakości, ale nie zapiszesz w nich zdjęcia (.svg).

 

Jak optymalizować zdjęcia – jakich formatów użyć?

 

Do najważniejszych typów plików graficznych zaliczamy JPG, PNG, SVG oraz GIF.

Każdy ma swoje wady i zalety oraz powinien być wykorzystywany w konkretnych sytuacjach.

Programiści i projektanci bardzo często błędnie korzystają tylko z jednego rozszerzenia na stronie internetowej.

Przy wyborze formatu dla obrazu należy pamiętać do czego nasz plik będzie wykorzystywany i jakie będzie miał zastosowanie.

 

Do czego przydaje się na stronie format .jpg?

Format .jpg (znany także jako .jpeg) cieszy się największą popularnością w sieci i wykorzystuje się go do zdjęć produktów, fotografii czy banerów.

Nadają się one do takich prac, ponieważ jest idealnym kompromisem między jakością zdjęcia a rozmiarem.

Jest to też jeden z najczęściej używanych formatów grafik i zdjęć w internecie.

 

Do czego wykorzystać format .png na stronie?

Największą zaletą formatu .png jest możliwość ustawienia przezroczystego tła (nie da się tego zrobić w .jpg).

Jest to format rastarowy, w którym często są zapisywane grafiki wektorowe.

Świetnie się sprawdza też do publikacji grafik zawierających tekst i obrazów bez gradientów.

Co ważne, pozwala na bezstratną kompresję, jednak gdy zapisujesz zdjęcia w tym formacie, będą one miały znacznie większy rozmiar niż gdy zapiszesz je w formacie .jpg.

 

Ruchome obrazki, czyli do czego przydaje się dziś na stronach internetowych format .gif?

Chociaż .gif stracił już swoją dużą popularność (a była jeszcze 10 lat temu spora!), to nadal bywa wykorzystywany do zdjęć o małej różnorodności kolorów.

Największą zaletą formatu .gif jest to, że może zawierać więcej niż jedną klatkę.

Dlatego najczęściej używany jest do krótkich animacji.

 

Format .svg, czyli grafiki wektorowe na stronie www (responsywne!)

Jest również format .svg, który jest powszechnie używany do publikacji grafik wektorowych w internecie.

Dzięki temu, że grafiki (i kształty) są zapisywane jako krzywe, możesz je powiększać do woli, bez straty jakości obrazu.

Niestety – nie zapiszesz w tym formacie zdjęć, a jedynie ikony, kształty czy proste projekty banerów, bez zdjęć.

Jego ogromną zaletą jest niewielka waga plików i nieskończone możliwości powiększania.

Chociaż jest to powszechnie odczytywany przez przeglądarki format, to nadal wiele programów do robienia stron nie pozwala na jego wykorzystanie.

W WebWave bez kłopotu wykorzystasz ten format.

 

 

 

Zacznij teraz 

Ponad 600 000 ludzi tworzy strony za darmo, bez kodowania i przy wsparciu AI. Zobacz, jakie to proste

Optymalizacja grafik na stronie i optymalizacja obrazów – kilka darmowych, skutecznych narzędzi

Istnieje wiele narzędzi, płatnych i bezpłatnych, dzięki którym zoptymalizujemy swoje zdjęcia. Poniżej prezentujemy skuteczne i – co najważniejsze – darmowe rozwiązania.

 

TinyPNG, czyli wrzuć, skompresuj i niech panda się cieszy

Chociaż nazwa może być nieco myląca, TinyPNG umożliwia optymalizację zarówno grafik w formacie .png jak i .jpg.

Wystarczy załadować pliki z dysku, a aplikacja automatycznie skompresuje zdjęcia.

Możesz dodać jednorazowo do 20 zdjęć o wadze do 5 MB każde.

tinypng - optymalizacja zdjęć na stronie

 

Optimizilla,czyli sprawdź jakość, wybierz kompresję, a potem ściągnij mniejsze grafiki

Optimizilla, podobnie jak TinyPNG, pozwala na dodanie na skompresowanie kilku obrazów PNG i JPG za jednym zamachem.

Po przesłaniu plików z dysku i automatycznej optymalizacji, możesz pobrać nowe, lżejsze pliki.

Aplikacja udostępnia użytkownikom podgląd oryginalnego obrazu i jego nowej skompresowanej wersji, dzięki czemu sprawdzisz, czy obraz nie traci dużo na jakości.

 

Ezgif, czyli przyśpiesz ładowanie gif-ów na swojej stronie

W przypadku optymalizacji plików w formacie .gif warto wybrać Ezgif.

Aplikacja pozwala też na kompresję PNG i JPG.


Zdjęcia na stronie internetowej a pozycjonowanie i SEO


Jeśli już piszę o zdjęciach na własnej stronie internetowej, to warto wspomnieć też o ich roli dla SEO.

Dobrze nazwane i opisane zdjęcia mogą poprawić pozycję w wynikach wyszukiwania.

Na co zwrócić uwagę?

Trzeba zadbać o nazwy plików.

Jeśli opisujesz je jako „Zdjecie1” czy „123”, to popełniasz błąd.

Roboty wyszukiwarek, skanując stronę internetową, mogą przeczytać tekst, ale nie widzą obrazów (jeszcze).

Nazwa pliku zawiera informacje o zawartości obrazka, a żeby roboty mógł prawidłowo go interpretować, dlatego powinniśmy nazwać nasz plik np. „palac-kultury.jpg” zamiast „DSC123.jpg”.

Zwłaszcza jeśli na grafice jest Pałac Kultury i Nauki.

Z tego samego powodu trzeba uzupełniać opisy alternatywne grafik.

Nie są one widoczne dla użytkownika strony, ale dają wyszukiwarkom podstawowe informacje o obrazie.

Umieszczając plik graficzny na stronie warto dodać w jego opisie frazę kluczową, powiązaną z frazą strony.

Jeśli piszesz tekst grafikach na stronie, to warto umieścić w opisach alternatywnych grafik powiązaną frazę.

Alternatywny tekst poprawia też dostępność strony i pozwala niewidomym poruszać się po niej.

Nazwy plików i tekst alternatywny są szczególnie istotne dla pozycjonowania w przypadku sklepów internetowych.

 

Podsumowanie – jak wykorzystać zdjęcia na stronie internetowej

Optymalizacja zdjęć jest jedną z najszybszych metod przyśpieszenia strony internetowej.

Poprawia user experience i wpływa na pozycję strony w wynikach wyszukiwania.

Jeśli Twoja strona ładuje się długo lub nie przynosi oczekiwanej konwersji, to koniecznie przyjrzyj się obrazom.

Może wystarczy je odchudzić i lepiej dopasować do tematyki, żeby strona działała szybciej, a użytkownicy chętniej realizowali jej cel?

 

Chcesz zrobić szybką stronę, do której dodasz świetne zdjęcia i grafiki, a to wszystko pokażesz użytkownikom w dobrze zoptymalizowanej formie gotowej strony? Koniecznie sprawdź możliwości naszego kreatora stron :). To nic nie kosztuje :).

Zacznij teraz 

Zacznij teraz 

28 września 2017

Zacznij teraz 

Popularne artykuły. 

Jak zrobić sklep internetowy?

Jak zrobić landing page?

Jak zrobić stronę internetową?

Kreator stron www WebWave umożliwia tworzenie stron www z pełną swobodą. Strony internetowe możesz tworzyć zaczynając od czystej karty lub wykorzystując szablony www. Strona www bez kodowania? To łatwe - zacznij już teraz.

contact@webwavecms.com
+48 731 395 898

Porozmawiaj z nami na czacie
Od godziny 08:00 do 24:00

          

Ta strona została stworzona w kreatorze WebWave.

Znajdziesz nas na: