Weź dowolną stronę, która straciła Cię w pierwszych sekundach, i przewiń z powrotem na górę. Są szanse, że miały w tym udział obrazy. Zdjęcie stockowe uśmiechniętych nieznajomych, którzy w niczym nie przypominają ludzi, którym ta firma naprawdę służy. Zdjęcie główne tak ogólne, że mogłoby należeć do dowolnej firmy w dowolnej branży. Albo brak obrazów w ogóle, przez co strona wygląda na gołą i niedokończoną. Obrazy na stronie to nie dekoracja. To komunikacja. Ten artykuł pokazuje, co obrazy na stronie naprawdę robią, jak wybierać właściwe, gdzie należą na każdej podstronie i co się dzieje, gdy się pomylisz.
Odwiedzający przetwarzają obrazy szybciej niż słowa. Zanim ktokolwiek przeczyta Twój nagłówek, jego mózg ma już pierwsze wrażenie z wizualiów. To znaczy, że Twoje obrazy przedstawiają argument o Twojej firmie, zanim Ty zdążysz przedstawić swój. Pytanie brzmi, czy to jest ten argument, który chcesz przedstawiać.
Co obrazy na stronie naprawdę robią?
Każdy obraz na Twojej stronie coś mówi odwiedzającemu. Zdjęcie główne na stronie głównej mówi: "taką firmą jesteśmy i dla takich osób". Zdjęcie na stronie "O nas" mówi: "są tu prawdziwi ludzie". Zdjęcie produktu na stronie usługi mówi: "oto, co dostajesz, gdy z nami pracujesz".
Gdy te sygnały są jasne i trafne, odwiedzający czują się zorientowani. Gdy są mgliste lub ogólne, odwiedzający nie czują nic, co jest najgorszym wynikiem. Odwiedzający, który nic nie czuje, nie ma powodu czytać dalej.
Obrazy kierują też wzrokiem. To rdzeń hierarchii wizualnej na podstronie. Dobrze umieszczony obraz przyciąga uwagę do sekcji, która ma znaczenie. Źle umieszczony rozprasza uwagę i sprawia, że odwiedzający nie wie, gdzie patrzeć dalej. Każdy obraz powinien zasłużyć na swoje miejsce, pomagając odwiedzającemu iść we właściwym kierunku.
Prawdziwe zdjęcia czy zdjęcia stockowe: czy to ma znaczenie?
Tak. Większe, niż większość ludzi się spodziewa.
Odwiedzający lepiej niż pięć lat temu rozpoznają zdjęcia stockowe. Idealnie oświetlona sala konferencyjna z czwórką różnorodnych profesjonalistów kiwających głowami nad laptopem. Uścisk dłoni na tle panoramy miasta. Uśmiechnięta kobieta z kubkiem kawy. Te obrazy są tak powszechne, że odwiedzający wykształcili wobec nich rodzaj wzrokowej odporności. Widzą je i nie rejestrują nic.
Prawdziwe zdjęcia działają odwrotnie. Zdjęcie Twojego prawdziwego lokalu, Twojego prawdziwego zespołu, Twojej prawdziwej gotowej pracy. Te obrazy są specyficzne dla Ciebie i tylko dla Ciebie. Odwiedzający, który je widzi, dostaje dowód, że za stroną istnieje prawdziwa firma, a to jedna z najcenniejszych rzeczy, jakie obraz może przekazać. Nawet zdjęcie z telefonu zrobione w dobrym świetle jest często skuteczniejsze niż dopracowane zdjęcie stockowe, bo jest prawdziwe.
To powiedziawszy, fotografia stockowa ma swoje miejsce. Do artykułów na blogu, do ilustrowania abstrakcyjnych pojęć, do wypełniania drugorzędnych miejsc na obrazy, gdzie konkret ma mniejsze znaczenie, dobrze wybrane zdjęcie stockowe wykonuje zadanie. Zasada brzmi: używaj prawdziwych zdjęć tam, gdzie w grze jest zaufanie, a zdjęć stockowych tam, gdzie obraz tylko wspiera treść, a nie składa deklaracji o Twojej firmie.
Jak wybrać właściwy obraz dla każdej podstrony?
Zanim zaczniesz szukać obrazu, zapytaj, jakie zadanie ma wykonać na tej konkretnej podstronie.
Na stronie głównej zdjęcie główne musi przekazać, czym się zajmujesz i dla kogo, zanim ktokolwiek przeczyta słowo. Jeśli odwiedzający mógłby spojrzeć tylko na zdjęcie główne i nie mieć pojęcia, w jakiej jesteś branży, obraz nie wykonuje swojego zadania.
Na stronie "O nas" obraz musi być osobisty. Pokaż ludzi. Pokaż miejsce. Pokaż coś, co sprawia, że firma wydaje się ludzka i konkretna, a nie korporacyjna i anonimowa.
Na stronie usługi lub produktu pokaż rezultat. Zdjęcia przed i po dla firmy remontowej. Zrzut ekranu panelu dla narzędzia programistycznego. Zdjęcie gotowego dania dla firmy cateringowej. Obrazy rezultatu przekonują bardziej niż obrazy procesu, bo odpowiadają na pytanie, które odwiedzający naprawdę zadaje: co będę mieć, gdy to się skończy?
Gdy wiesz, jakie jest zadanie, wtedy szukasz obrazu. Nie odwrotnie.
Co sprawia, że obraz działa przeciwko Tobie?
Brak związku z tematem
Obraz, który nie ma nic konkretnego do powiedzenia o Twojej firmie, usłudze lub kliencie, mówi odwiedzającemu, że nikt nie zastanowił się starannie nad wizualnym odbiorem strony. To wrażenie zostaje.
Niedopasowanie
Jeśli Twój tekst jest ciepły i swobodny, a obrazy zimne i korporacyjne, podstrona wydaje się niespójna. Odwiedzający wyczuwają ten zgrzyt, nawet gdy nie potrafią go nazwać. Nastrój obrazu i nastrój tekstu muszą się zgadzać.
Wolne ładowanie
Duże, niezkompresowane obrazy to najczęstszy pojedynczy powód, dla którego strony ładują się wolno. Podstrona, która ładuje się dłużej niż trzy sekundy na telefonie, traci sporą część odwiedzających, zanim cokolwiek zobaczą. Każdy obraz, który wgrywasz, powinien być skompresowany pod internet. Większość platform stron robi część tego automatycznie, ale warto wiedzieć, co wgrywasz. Zobacz, jak szybkość strony wpływa na odwiedzających i pozycje w wyszukiwarce, by poznać pełny obraz.
Brak tekstu alternatywnego
Każdy obraz na stronie potrzebuje krótkiego opisu tego, co pokazuje, wpisanego w pole tekstu alternatywnego (alt text). To ma znaczenie z dwóch powodów. Odwiedzający korzystający z czytników ekranu polegają na tekście alternatywnym, by zrozumieć, co zawiera obraz. Wyszukiwarki używają tekstu alternatywnego do indeksowania obrazów. Pominięcie go to szybki sposób na utratę zarówno dostępności, jak i wartości SEO.
Gdzie na podstronach umieszczać obrazy?
Nie ma uniwersalnej reguły umieszczania obrazów, ale jest kilka wzorców, które konsekwentnie działają.
Umieść najmocniejszy obraz tam, gdzie odwiedzający patrzą najpierw. Na większości podstron to górna sekcja, above the fold. Jeśli odwiedzający przewinie w dół, zanim zdecyduje się czytać, drugie miejsce na obraz, gdzieś w środku podstrony, łapie go w trakcie przewijania. Trzeci obraz blisko dołu długiej podstrony ponownie angażuje odwiedzających, którzy przeczytali większość drogi.
Używaj obrazów, by przerywać długie fragmenty tekstu, ale tylko gdy obraz coś wnosi. Obraz, który ilustruje myśl z sąsiedniego akapitu, wykonuje zadanie. Obraz wstawiony tam tylko dlatego, że sekcja wydawała się za długa, to wypełniacz, a odwiedzający to widzą.
Na telefonie układ obrazów się zmienia, bo ekran jest wąski, a obrazy układają się w pionie. Obraz, który na komputerze stoi obok tekstu, na telefonie pojawi się nad nim lub pod nim. Sprawdź, jak każda podstrona wygląda na telefonie, i upewnij się, że obraz nadal ma sens w nowym miejscu. To część dbania o to, by Twoja strona stosowała zasady responsywnego projektowania na każdej podstronie.
Jaki format pliku powinny mieć obrazy?
Krótka wersja:
- JPEG do fotografii. Mały rozmiar pliku, wysoka jakość, działa wszędzie.
- PNG do logo, ikon i wszystkiego z przezroczystym tłem lub ostrym tekstem.
- WebP do obu, jeśli Twoja platforma to obsługuje. Daje mniejsze pliki niż JPEG i PNG przy tej samej jakości. Większość nowoczesnych przeglądarek obsługuje WebP bez problemów.
- SVG do ikon i prostych ilustracji. Skaluje się idealnie do dowolnego rozmiaru przy minimalnym rozmiarze pliku.
Jeśli chodzi o rozmiary plików, celuj w poniżej 200 kilobajtów dla standardowych obrazów na podstronach. Zdjęcia główne mogą mieć do około 400 kilobajtów. Wszystko większe trzeba skompresować przed wgraniem. Pięciomegabajtowe zdjęcie z telefonu nie ma czego szukać na stronie internetowej.
Czym jest tekst alternatywny i dlaczego potrzebuje go każdy obraz?
Tekst alternatywny (alt text) to krótki opis dołączony do obrazu. Siedzi w znaczniku obrazu na podstronie, niewidoczny dla widzących odwiedzających, ale czytany przez czytniki ekranu i wyszukiwarki. Oba potrzebują go, by zrozumieć, co zawierają Twoje obrazy.
Pod względem dostępności tekst alternatywny to sposób, w jaki odwiedzający korzystający z czytników ekranu doświadczają obrazów na Twojej stronie. Bez niego ci odwiedzający nie słyszą nic, gdy obraz się ładuje, co zostawia lukę w tym, co chciałeś przekazać. Pod względem SEO wyszukiwarki nie widzą obrazów tak jak ludzie. Tekst alternatywny to sposób, w jaki rozumieją, co pokazuje obraz i czy jest istotny dla podstrony, którą wspiera.
Dobre napisanie tekstu alternatywnego oznacza opisanie tego, co faktycznie jest na obrazie, konkretnie i prosto. Zdjęcie ukończonego remontu kuchni dostaje tekst alternatywny w stylu "biała kuchnia w stylu shaker z marmurowymi blatami po remoncie", a nie "zdjęcie kuchni" czy "obraz1". Jeśli Twoje słowo kluczowe naturalnie pasuje do opisu, uwzględnij je. Ale najpierw pisz opis. Tekst alternatywny, który istnieje tylko po to, by powtarzać słowa kluczowe, zawodzi w obu zadaniach.
Każdy obraz, który wgrywasz, powinien mieć tekst alternatywny napisany przed publikacją podstrony. Zajmuje to mniej niż minutę na obraz i wpływa zarówno na to, kto ma dostęp do Twoich treści, jak i na pozycje podstron.
Jak WEMASY obsługuje obrazy
Kreator stron WEMASY zawiera bloki obrazów, które możesz dodać do dowolnej sekcji podstrony. Wgrywasz bezpośrednio w kreatorze, ustawiasz pozycję i rozmiar bez dotykania kodu i dodajesz tekst alternatywny w tym samym kroku. Obrazy są automatycznie serwowane responsywnie, więc dopasowują się do każdego rozmiaru ekranu bez konieczności tworzenia osobnych wersji na komputer i telefon.
Sekcje podstron w WEMASY obsługują obrazy obok tekstu w elastycznych układach kolumn albo jako tła na całą szerokość dla sekcji, w których mocny obraz nadaje ton. W obu przypadkach obraz pozostaje związany z treścią, którą wspiera, zamiast luźno wisieć poza układem.
Zobacz, co jest w zestawie, w kreatorze stron WEMASY, albo sprawdź plany na stronie z cennikiem.
Najczęściej zadawane pytania o obrazy na stronie
Czy potrzebuję profesjonalnych zdjęć na stronę?
Profesjonalne zdjęcia robią realną różnicę na kluczowych podstronach, szczególnie na stronie głównej i "O nas", gdzie kształtuje się zaufanie. Do obrazów drugorzędnych, artykułów na blogu i wizualiów wspierających wystarczy dobrze oświetlone zdjęcie zrobione nowoczesnym telefonem. Priorytetem jest, by obraz był prawdziwy i związany z Twoją firmą, a nie żeby zrobił go profesjonalista. W kreatorze stron WEMASY ustawisz to bezpośrednio na swojej stronie.
Ile obrazów powinna mieć strona główna?
Tyle, by wesprzeć sekcje, ale nie tyle, by podstrona była zagracona lub wolno się ładowała. Mocne zdjęcie główne, jeden lub dwa obrazy w środku podstrony i opcjonalnie zdjęcie zespołu lub miejsca pracy niżej to rozsądna struktura dla większości stron głównych małych firm. Każdy obraz powinien zasłużyć na swoje miejsce, a nie wypełniać przestrzeń.
Czy mogę używać obrazów z serwisów ze zdjęciami stockowymi?
Tak, pod pewnymi warunkami. Serwisy ze zdjęciami stockowymi oferują obrazy na licencjach pozwalających na użytek komercyjny, ale przed użyciem sprawdź warunki każdego obrazu. Praktyczne ograniczenie jest takie, że te obrazy pojawiają się na wielu innych stronach, więc używaj ich w miejscach wspierających i drugorzędnych, a nie jako głównego obrazu na podstronach wymagających zaufania, jak strona główna czy "O nas".
W jakim rozmiarze wgrywać obrazy na stronę?
Skompresuj przed wgraniem. Celuj w poniżej 200 kilobajtów dla większości obrazów na podstronach i poniżej 400 kilobajtów dla zdjęć głównych. Używaj JPEG do fotografii, PNG do logo i obrazów z przezroczystością, a WebP, jeśli Twoja platforma to obsługuje. Zawsze zmień rozmiar obrazu do maksymalnej szerokości, w jakiej będzie wyświetlany, przed wgraniem, zamiast pozwalać przeglądarce go zmniejszać.
Czy obrazy wpływają na pozycje mojej strony w wyszukiwarce?
Tak, na dwa sposoby. Duże niezkompresowane obrazy spowalniają podstronę, co wyszukiwarki uwzględniają w pozycjach. Obrazy bez tekstu alternatywnego tracą szansę, by powiedzieć wyszukiwarkom, co zawiera podstrona. Odpowiednio dobrane rozmiary obrazów i opisowy tekst alternatywny przyczyniają się zarówno do szybkości podstrony, jak i widoczności w wyszukiwarce.