Twój e-mail
Zapisz się!
Zapisz się!
Udało się!
Podaj e-mail!

Blog

Tu dowiesz się, jak zrobić stronę internetową.

Chcesz być na bieżąco?

whitespace czyli jak wykorzystać przestrzeń na stronie internetowej

Robiąc stronę internetową 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.

Dołącz do ponad 140 tysięcy ludzi, którzy tworzą strony za darmo i bez kodowania

Zbuduj własną stronę www. Zacznij od pustego projektu lub wybierz
jeden z kilkudziesięciu darmowych szablonów. 


STWÓRZ SWOJĄ STRONĘ ZA DARMO 

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.

jak dodać zdjęcia do strony - przykład zdjęcia w nagłówku tekstu blogowego

 

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.

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.

wizualizacja danych - atrakcyjny sposób prezentacji informacji i liczb na stronie

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

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ęć (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.

 

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

 

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ą.

 

Optymalizacja zdjęć na stronie internetowej (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 stronie internetowej.

Sama optymalizacja zakłada kilka rzeczy:

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

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

  • dostosowanie rozmiaru grafik do ich miejsca na stronie (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ę ich szybkości ładowania i zmniejszy czas oczekiwania na pojawienie się całej strony w przeglądarce.

 

Jak duże powinny być zdjęcia na stronie internetowej?

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 program graficzny – 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).

 

Najlepsze formaty grafik i zdjęć na stronie internetowej (najpopularniejsze, ale też najlepiej robiące robotę)

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.

 

Jak zoptymalizować zdjęcia na stronie internetowej (kilka darmowych i 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 stronie, 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, czyli jak wykorzystać dobrze zdjęcia na stronie internetowej w pigułce

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 :).

Chcesz dowiedzieć się więcej o optymalizacji zdjęć na stronie www? Koniecznie przeczytaj te teksty:

Autor: Paweł Krzywina

 

28 września 2017

Blog

Darmowe szkolenie z tworzenia stron internetowych 

WYPRÓBUJ ZA DARMO

Wypróbuj nasz kreator stron internetowych i uzyskaj dostęp do darmowego szkolenia. Po rejestracji wyślemy Ci e-maila z linkiem do zapisu na szkolenie on-line. Na godzinnym szkoleniu dowiesz się jak samodzielnie stworzyć swoją stronę internetową!

Zdjęcia na stronę internetową – jak wybrać najlepsze i zoptymalizować? 

 

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.

Panel webmastera

KONTAKT

contact@webwavecms.com
+48 731 395 898

KREATOR

OFERTA

DLA KLIENTÓW

WEBWAVE

MATERIAŁY

Ta strona została stworzona w całości przy użyciu naszego kreatora stron www WebWave. Na tej stronie wykorzystujemy ciasteczka. Dowiedz się więcej.

PL

EN

POZNAJ NAS BLIŻEJ W SIECI

Zacznij Teraz

RO

ZACZNIJ TERAZ

PANEL WEBMASTERA

Logowanie