Autor: Kaja Rowicka i Julia Mądraszewska
Jak wybrać zdjęcia i grafiki na swoją stronę internetową? Optymalizacja zdjęć pod SEO
Projektowanie stron internetowych to nie tylko kodowanie lub składanie jej elementów w kreatorze. To również treści - zarówno te tekstowe jak i graficzne. Praktycznie niemożliwe jest stworzenie witryny www bez żadnych grafik ani zdjęć. Dlaczego? Dana strona byłaby bardzo męcząca do czytania i szybko nudziła wzrok czytelnika.
Dlatego też jednym z dwóch głównych powodów umieszczania obrazów w witrynie jest przyciągnięcie uwagi użytkownika i nadanie charakteru stronie.
Drugim, czasami nawet istotniejszym elementem jest bycie zauważonym przez indeksujące roboty Google, dzięki którym możesz zwiększyć ruch z wyszukiwarki grafik.
Jednak wszystko sprowadza się do podstawowych pytań:
Grafiki na stronę internetową powinniśmy pobierać z internetu, czy może lepiej tworzyć je własnoręcznie? Czy istnieją darmowe banki zdjęć do użytku komercyjnego? W jakim formacie zapisywać pliki i czy istnieją ogólne zasady dotyczące publikowania ich w sieci? Jak wybrać odpowiednie grafiki i sprawić, że każdy obraz na stronie będzie użyteczny?
Rodzaje grafik, jakie możemy zamieścić na stronie - największe atrybuty
Nie da się jednoznacznie odpowiedzieć na to pytanie. Wiele zależy od contentu naszej strony. Istnieje wiele rodzajów grafik. Należą do nich m.in.:
Ilustracje
Ilustracje jako grafiki na stronę wykorzystywane są już od jakiegoś czasu i można powiedzieć, że to jedno z najpopularniejszych rozwiązań. Nie jest jednak najprostsze. Jeśli chcemy, aby taka oprawa wizualna znalazła się na naszej stronie, a jednocześnie nie mamy ochoty za nią płacić, to mamy na to dwa rozwiązania. Musimy narysować je samodzielnie lub skorzystać z programów oferujących darmowe zdjęcia lub innego rodzaju grafiki, z możliwością użycia ich na stronie internetowej. Oczywiście ten drugi sposób jest znacznie bardziej sprawny, ale jest jedno, ALE…Jeśli posiadamy własną identyfikację marki- logo, kolorystyka, to dużo ciężej będzie nam znaleźć coś pasującego idealnie.
Infografiki
Przydają się jeśli chcemy za pomocą grafik na stronie przekazać jakieś treści edukacyjne, w taki sposób, aby były one nie tylko estetyczne, ale też zrozumiałe w odbiorze. Za ich pomocą dużo łatwiej można pokazać jakiś proces- zaznaczyć na grafice najważniejsze etapy. Oczywiście zamieszczając taką grafikę na stronie internetowej lub w social mediach, zazwyczaj dodajemy do niej również zwykły tekst, który jest dokładniejszym opisem naszego zagadnienia.
Zdjęcia
Zdjęcia jako przewodni temat graficzny na stronie internetowej, należy chyba do najpopularniejszych formatów. Dlaczego? Można powiedzieć, że teoretycznie jest też najłatwiejszy do wprowadzenia. Materiały możemy wykonać samodzielnie lub skorzystać z darmowych grafik, oferowanych na stronach. Używając kreatora WebWave, możemy też po prostu wpisać hasło do znajdującego się tam banku zdjęć.
Kolaże
W przypadku tych ostatnich form grafik na stronie zazwyczaj łączymy kilka elementów- np. zdjęcie z ilustracją i ikonami. Takie kombinacje potrafią wykreować bardziej designerski efekt. Oczywiście jeśli są dobrze wykonane. Wbrew pozorom nie są też trudne i pracochłonne. Jeśli wybierzemy dobre narzędzie, grafiki te będziemy mogli wykonać prosto, szybko i za darmo.
Piktogramy
Nie są to może grafiki, o jakich myślimy słysząc to słowo, ale są istotne przy budowaniu treści na stronie internetowej. Pomagają w zachowaniu porządku. Zazwyczaj będą to po prostu ilustracje, ale bardziej uproszczone i symboliczne. Wykorzystywane są m.in. przy wypunktowaniach, czy np. krótkich opisach. Dzięki czemu przekaz jest bardziej wyrazisty. Piktogramy, znane też pod nazwą ikon możemy wykonać samodzielnie np. przy pomocy programu takiego jak Illustrator.
Jeśli jednak nie mamy zbyt dużo wolnego czasu i nie chcemy przeznaczać go na projektowanie tak drobnych elementów, możemy w tym celu wykorzystać darmowy bank ikon. Tak jak w przypadku darmowego banku zdjęć, kreator stron WebWave udostępnia również proste grafiki w postaci ikon do użycia w budowaniu strony www.
Co oznacza “dobra grafika na stronę internetową”
To pytanie jest tak samo złożone. Jeśli chcemy, aby użyta na stronie internetowej grafika była nie tylko dobra, ale też przy okazji darmowa, należy pamiętać o kilku elementach, które uchronią naszą witrynę przed negatywnymi skutkami.
Poza samym aspektem wizualnym musimy wziąć pod uwagę również kwestie techniczne.
Aby osiągnąć balans między tymi dwoma (teoretycznie wykluczającymi się) oczekiwaniami, trzeba pamiętać o trzech ważnych zasadach umieszczania zdjęć i innych form obrazów na swoją stronę.
Nie przesadzaj z rozdzielczością
W przypadku gdy stawiamy na darmowe grafiki, wykonywane samodzielnie, możemy od razu ustalić ich rozdzielczość. Inaczej jest w przypadku gdy pochodzą one z banków obrazów. Zazwyczaj są wtedy gigantycznych rozmiarów. Przed ostatecznym dodaniem zdjęć i obrazków na platformę internetową musimy pamiętać, aby jak najlepiej dopasować je do rozdzielczości ekranów, na których będą wyświetlaneb. 
Dlaczego? Odpowiedź na to pytanie jest banalnie prosta. Większa rozdzielczość bezpośrednio przekłada się na znacznie większą wagę pliku. Są one od siebie zależne.
Dodanie zdjęcia na stronę internetową w oryginalnej rozdzielczości mija się tak naprawdę z celem, ponieważ żaden ekran nie będzie w stanie pokazać jego prawdziwego rozmiaru.
Najlepszym rozwiązaniem będzie więc trzymanie się zawsze górnej granicy- oczywiście FullHD. Rozdzielczość w takim wypadku wynosi 1920 x 1080 pikseli. To w zupełności wystarczy, aby zachować odpowiednią jakość, a jednocześnie nie przeciążać strony.
Trzeba też brać pod uwagę fakt, że najprawdopodobniej na naszej podstronie znajdzie się więcej niż jedna grafika (szczególnie jeśli będziemy mieli dostęp do tych w darmowej wersji), a co dopiero na całej witrynie www.
Grafika wektorowa, a rastowa- czym się różnią
Poza samym podziałem na grafiki ilustracyjne, zdjęcia, piktogramy itd. warto powiedzieć sobie również o jeszcze innej kategorii, która będzie niezwykle przydatna przy wyborze stylu elementów wizualnych pod względem jakości i optymalizacji na stronie.
Grafika rastrowa
Będzie budowana na podstawie prostokątnej siatki punktów, znanych lepiej pod nazwą pikseli. Są najlepszym rozwiązaniem w przypadku realistycznych obrazów-zdjęć. Możemy sobie pozwolić na swobodne ich pomniejszanie, ale nie na odwrót. W momencie gdy chcemy je powiększyć bardzo prawdopodobne, że nasze grafiki stracą na jakości, ponieważ zatracą się w nich detale, a to sprawi, że wydadzą się one rozmyte.
Nie zmienia to jednak faktu, że należące do niej formaty takie jak PNG i JPEG są jednymi z najpopularniejszych.
Grafika wektorowa
Jest rozszerzeniem grafiki rastrowej, jej udoskonaleniem. Zapisuje się ona w postaci punktów, które są zdefiniowane kształtem geometrycznym. Dzięki temu, że są one umieszczone w matematycznym układzie współrzędnych, zyskujemy dowolność w ich skalowaniu. Zmieniając ich proporcje, nie sracimy na jakośći. Należy jednak pamiętać, że tego typu grafiki nie zawierają zbyt wielu detali.
Ten rodzaj grafiki sprawdzi się jednak idealnie np. w przypadku loga, czy też piktogramów na stronie.
Oprócz pobrania ich z platform oferujących darmowe materiały graficzne możemy też, otrzymać je wykonując ich projekty, w programach takich jak Illustrator.
Do popularniejszych formatów, które z łatwością umieścimy na naszej witrynie internetowej, należy SVG.
Które rozszerzenie wybrać?
Powiedzieliśmy sobie już wcześniej, że format zdjęć ma bezpośredni wpływ nie tylko na jego jakość, ale też na wagę. Dlatego wybór poprawnego rozszerzenia jest kluczowy, aby zapewnić możliwie najlepszą jakość obrazów na stronie. Najczęściej wybiera się między czterema najpopularniejszymi formatami, którymi są JPG, PNG, GIF i SVG.
Poświęciliśmy cały artykuł, aby przyrównać dokładnie każdy z nich i określić, kiedy należy, z którego korzystać, dlaczego, jeżeli zastanawiasz się jaki format zdjęć wybrać na stronę internetową, sprawdź poniższą infografikę i przeczytaj nasz wpis.
Co to jest kompresja?
Jest to manualne zmniejszenie gabarytu grafiki. Istnieje błędne przekonanie, że zawsze musi się to wiązać ze znacznym pogorszeniem jakości zdjęcia. Z drugiej strony jednak dodawanie zbyt dużych plików na stronę spowoduje jej spowolnione ładowanie, a czas ładowania strony jest naprawdę istotny. Co więc wybrać? Która z opcji będzie tzw. mniejszym złem?
Odpowiedź jest lepsza, niż można by było się tego spodziewać. Nie musimy wybierać żadnych z tych rzeczy. Wystarczy, że skorzystamy ze specjalnych narzędzi, które pomogą nam to ułatwić.
Istnieje wiele darmowych sposobów na bezproblemową i bezstratną kompresję materiałów graficznych.
Czy kompresja grafik na stronę jest aż tak istotna?
Oczywiście, że tak! Rozmiar zdjęcia ma ogromne znaczenie.
W momencie gdy pod uwagę kompresję weźmiemy wybranej przez nas grafiki, nie tylko wzrośnie prędkość ładowania się strony internetowej, ale też uatrakcyjnimy w ten sposób wizytę nowego użytkownika. Dzięki temu współczynnik odrzuceń spadnie, a to bezpośrednio przełoży się na podniesienie pozycji w wynikach wyszukiwania.
Sprzyja temu m.in. również to, że z narzędzi do kompresji grafik możemy korzystać za darmo.
Należą do nich:
Musimy jednak pamiętać o tym, że aby móc coś skompresować, potrzebujemy najpierw zdjęć w wysokiej rozdzielczości.
Ponad 600 000 ludzi tworzy strony za darmo, bez kodowania i przy wsparciu AI. Zobacz, jakie to proste
Darmowe grafiki z banków
Oczywiście nie każdy jest profesjonalnym fotografem lub grafikiem. Część z nas nie czuje się w tym pewnie, a inni po prostu tego nie lubią. W związku z tym nie możemy pozwolić sobie na publikowanie własnych prac. Z pomocą przychodzą darmowe banki, gdzie bez opłat możemy wykorzystywać znajdujące się tam fotografie i grafiki. Zależnie od strony, może być to również użycie komercyjne.
Oferująca ponad milion najwyższej jakości zdjęć każdej kategorii. Podczas pobierania mamy możliwość wyboru rozmiaru danego obrazu i sprawdzenia, ile każda opcja waży. Jedyny minus tej strony to jej nastawienie na sprzedaż. Podczas przeglądania darmowych zdjęć czasami umieszcza ona również płatne obrazy, które zazwyczaj bardziej przyciągają wzrok.
Wszystkie dostępne na witrynie prace z możliwością bezpłatnego pobrania są objęte licencją Creative Commons CC0, w której autor zrzeka się wszelkich praw i zezwala na użycie komercyjne.
Również ciekawa aplikacja oferująca darmowe grafiki w formie zdjęć tak samo jak w przypadku Unsplasha. Będzie miała jednak znacznie mniejsze zasoby, ale wciąż nie są one za małe. Będą wręcz większe niż te Paxabay, które pojawiło się wcześniej na tej liście.
Cała kolekcja jest posegregowana na kategorie typu biznes, komputer, szkoła...i tak po kolei. Może to być pomocne dla osób, które poszukując grafik na stronę internetową, nie do końca są pewne, czego dokładnie potrzebują- znają wyłącznie ogólny temat.
Oczywiście takie podziały są wprowadzane na niemalże każdej z platform tego typu.
Pobierając zdjęcie, możemy podlinkować jego autora, aby okazać mu w ten sposób wdzięczność. Nie jest to jednak znowu coś, do czego musimy się dostosować. Bez tego wybrany przez nas obrazek również może zostać bez problemu udostępniony.
Dla wielu faworyt. Ma lepsze jakościowo zdjęcia od poprzednika i przede wszystkim każda grafika jest dokładniej opisywana. Przy szukaniu hasła “map” na pixabay niemal od razu ukazuje się kilka niepowiązanych z mapami obrazów. Jest to spowodowane nadawaniem na stronie zbyt wielu tagów pojedynczemu zdjęciu, nawet jeżeli nie są bezpośrednio powiązane ze zdjęciem.
Pexels nie pokazuje płatnych zdjęć między darmowymi.
WebWave - Unspash
W kreatorze WebWave również dostępny jest darmowy bank zdjęć gotowych do użycia na stronie internetowej. Nie wymaga on wychodzenia poza obszar własnego projektu i oferuje aż cztery rozmiary grafik. Możemy go używać, do czego tylko chcemy - w tym do działań komercyjnych. Wszystkie prace objęte są Creative Commons CC0, w której autor zrzeka się do nich wszelkich praw. Wystarczy, że wpiszesz co Cię interesuje, a obszerny katalog pokaże Ci kilkadziesiąt pasujących zdjęć.
A może lepiej samodzielne projektować grafiki na stronę?
Nie ma żadnego zaskoczenia w tym, że obrazy tworzone własnoręcznie, czy są to fotografie, czy w pełni cyfrowe elementy - są najlepszym rozwiązaniem jeżeli chodzi o SEO na stronie.
Jeżeli dysponujesz czasem i pomysłem, koniecznie zapoznaj się z proponowanymi przez nas narzędziami do tworzenia prostych grafik, które będą nie tylko darmowe, ale też oryginalne.
Zdecydowanie najpopularniejsza opcja w całym internecie, jeśli chodzi o darmowe narzędzia do tworzenia rozmaitego rodzaju grafik na social media, stronę internetową etc.
Platforma oferuje wirtualny program, który pozwala na projektowanie niemalże każdego rodzaju grafik. Przede wszystkim skierowana jest do osób obsługujących media społecznościowe, ponieważ posiada tysiące gotowych szablonów do edycji, zależnie od platformy społecznościowej. Możemy wybrać, czy chcemy stworzyć coś w rozmiarach postu na Facebooka, zdjęcia na Instagrama, tła na wydarzenie czy może plakat? Opcji jest conajmniej kilkadziesiąt!
Do tego dochodzi (dość mały) bank bezpłatnych elementów graficznych i możliwość importowania własnych plików.
Możemy skorzystać też z innych udogodnień:
-
Dwa banki zdjęć do korzystania wewnątrz narzędzia: Pexels i Pixbay
-
Możliwość osadzenia video na projekt (z Youtube, Dropbox lub po przesłaniu z dysku)
-
Wysokiej jakości obrazy emoji
-
Możliwość połączenia z kontami Instagram i Facebook, dzięki czemu można używać zdjęć bezpośrednio z tych serwisów
-
Dodawanie plików w formacie GIF (przy pomocy GIPHY)
Jest to uproszczona wersja znanego powszechnie Photoshopa z pakietu Adobe, który tylko w wersji na telefon. Pozwala na wprowadzanie szybkich poprawek w zdjęciach. Część z nich nie wymaga od nas większej pracy. Korekcje, perspektywa, usuwanie czerwonych oczu, czy samego tła. Takie edycje wprowadzimy bez problemu.
Dla posiadaczy pakietu Adobe dodatkowym plusem będzie również to, że aplikacja jest kompatybilna z innymi ich produktami. Niestety, z drugiej strony w niektórych przypadkach program wymaga zalogowania się na konto Creative Cloud.
Poza samym aspektem wizualnym, przy wyborze grafik na stronę internetową musimy wziąć pod uwagę również kwestie techniczne.
Aplikacja, którą możemy pobrać na telefon. Posiada ona podział na “za darmo” i wersja pro. Pomimo częściowych ograniczeń już w tym pierwszym przypadku jesteśmy w stanie wykonać ciekawe prace. Do dyspozycji mamy nie tylko standardowe filtry, ale również efekty, które np. upodobnią naszą grafikę do obrazu. PicsArt pozwala również na stworzenie kompozycji a’la kolaż. Oczywiście nie jest to bardzo profesjonalne i precyzyjne narzędzie, ale kiedy poznamy jego specyfikę, będziemy w stanie osiągnąć ciekawe rozwiązania...i to bez dodatkowych kosztów.
Proste i intuicyjne narzędzie pozwalające zrobić dobrej jakości infografiki.
Bezkonkurencyjny ze względu na rozwinięte funkcje podczas dodawania tabel i tworzenia wykresów. Można również importować swoje pliki Excel.
Umożliwia dostęp do bardzo szerokiego wyboru gotowych ikon, które wzbogacą każdą infografikę. Są dostępne zarówno w gotowych połączeniach z tekstem, jak i indywidualnie.
Tak samo, jak w narzędziu Canva, tutaj również jest bezpośredni dostęp do darmowej bazy zdjęć, a obydwie te aplikacje są dla siebie dobrym uzupełnieniem.
To narzędzie przykuwa swoją uwagę przede wszystkim z jednego powodu - ma do zaoferowania ogromną kolekcję, wysokiej jakości drobnych grafik, które można wykorzystać za darmo.
Posiada gotowe szablony z możliwością formatowania i podstawienia własnych tekstów, a ich rozmiar, w przeciwieństwie do Canvy, można zmieniać w trakcie edycji. Zdecydowanie warto poznać bliżej to narzędzie. Jeżeli nie mamy możliwości tworzenia własnych grafik na stronę, jest to naprawdę świetne rozwiązanie.
Samych aplikacji mobilnych i programów na desktop umożliwiających darmowe tworzenie lub edytowanie zdjęć, czy też innego rodzaju grafik do użycia na stronie, z roku na rok pojawia się coraz więcej. Część z propozycji możesz znaleźć w jednym z naszych artykułów.
Optymalizacja zdjęć na stronie internetowej. Jak pozycjonować grafiki?
Tak jak już wcześniej wspominaliśmy, obrazy na stronie mogą mieć duży wpływ na optymalizację SEO. Warto więc zadbać o optymalizację SEO zdjęć.
Na czym polega optymalizacja zdjęć? Przy poprawnym użyciu zwiększą widoczność strony internetowej w wyszukiwarce.
W szczególności ma to bezpośrednie powiązanie z rozmiarem danej grafiki. Zarówno sami użytkownicy, jak i Google zwrócą uwagę na szybciej ładującą się witrynę www.
Poza tym, umieszczanym na stronie grafikom warto nadawać nazwy. To również wpływa dobrze na optymalizację grafik. Dlaczego? Nazwa obrazu jest widoczna w kodzie Twojej strony, który czytają roboty indeksujące. Dlatego zawsze warto przemycić w swoich ilustracjach słowa dotyczące danej podstrony. Taka informacja na stronie może wiele zmienić!
To samo tyczy się tekstu alternatywnego opisu każdej grafiki, ponieważ on też zawarty jest w kodzie. W momencie, gdy użytkownikowi nie ładują się zdjęcia i obrazy na stronie, pokaże mu się informacja, dzięki której nadal będzie wiedział, co się na nim znajdowało.
Dokładnie na takiej samej zasadzie działa Google. Dzięki znajdującym się słowom w tagu potrafi dopasować zdjęcia do odpowiednich wyszukiwań graficznych.
Optymalizacja tego typu powinna być zastosowana dla każdego z elementów wizualnych na stronie.
Grafiki na stronie to nie tylko wygląd
Umieszczanie obrazów na stronie internetowej pełni więcej niż jedną funkcję. To nie tylko dodatek, który wpływa na estetykę…chociaż to też jest prawdą. W przypadku artykułu blogowego będzie to m.in. pewnego rodzaju wizualizacja omawianego zagadnienia…i chwilowy “odpoczynek” od czytania.
Niezależnie od tego czy na stronie internetowej wykorzystujemy darmowe grafiki z banków zdjęć, czy wykonujemy je samodzielnie lub po prostu mamy wykupiony pakiet z płatnymi zasobami…W każdym z tych przypadków powinniśmy pamiętać o zapisaniu ich w odpowiedniej formie i kompresji. Optymalizacja plików graficznych może przyciągać użytkowników na stronę, dzięki algorytmom Google.
Te z pozoru drobne szczegóły pozwolą uatrakcyjnić i zoptymalizować naszą witrynę internetową.
Koniecznie przeczytaj podobne artykuły:
Data aktualizacji: 8 października 2021
Popularne artykuły.
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:
Kreator WebWave.
Oferta.