Jak wybrać odpowiednie obrazy na swoją stronę

Najpierw określ zadanie obrazu

Przed wyborem zdjęcia zapytaj: „Co odwiedzający powinien zrozumieć lub poczuć w tej części strony?”

Zdjęcie na stronie głównej może przedstawiać firmę. Zdjęcie usługi może pokazywać pracę lub jej efekt. Zdjęcie zespołu pomaga rozpoznać osoby, które klient spotka. Wybierz obraz wspierający ten cel.

Zanim zaczniesz szukać, opisz w jednym zdaniu, jakiego zdjęcia potrzebujesz: „Zdjęcie ma pokazywać małą łazienkę, którą wyremontowaliśmy, i zostawiać po lewej miejsce na nagłówek”. Konkretne założenie ułatwia odrzucanie nawet ładnych zdjęć, które nie pasują do strony.

Porównuj propozycje za pomocą trzech pytań: Co ten obraz przekazuje odwiedzającemu? Czy ta informacja jest tutaj przydatna? Czy przekaz pozostaje czytelny w dostępnym miejscu? Jeśli obraz nie wnosi informacji ani odpowiedniego nastroju, sekcja może lepiej działać z samym tekstem.

Dobierz główny obraz do działalności firmy

Duża sekcja otwierająca stronę, często nazywana hero, jest pierwszą rzeczą, którą widzi wielu odwiedzających. Jej obraz powinien wspierać nagłówek, a nie z nim konkurować.

Firma remontowa może pokazać gotowy pokój lub fachowca przy pracy. Gabinet fizjoterapii może użyć naturalnego zdjęcia konsultacji albo ćwiczenia. Lokalna kawiarnia może zaprezentować wnętrze lub charakterystyczne danie.

Zostaw na nagłówek i przyciski miejsce, w którym tło nie jest pełne szczegółów. Jeśli efektowne zdjęcie przyciąga uwagę tak mocno, że trudno zrozumieć ofertę, wybierz prostszy.

Oceniaj zdjęcie w rzeczywistym układzie strony. Zdjęcie, które samo w sobie wygląda świetnie, może mieć zbyt wiele szczegółów w tle, dokładnie tam, gdzie ma znaleźć się nagłówek. Nagłówek i przycisk umieść jako tekst strony, zamiast zapisywać je wewnątrz obrazu, aby mogły dostosować się do układu.

Przykład: trzy zdjęcia do tej samej strony głównej

Wyobraź sobie firmę remontową z nagłówkiem „Remonty łazienek w małych mieszkaniach”. Wybiera spośród trzech zdjęć:

• Dopracowane zdjęcie stockowe dużej luksusowej łazienki. Oświetlenie jest atrakcyjne, ale pomieszczenie nie przedstawia małych przestrzeni, które firma chce pokazać. Może budzić niewłaściwe oczekiwania wobec pracy.
• Zdjęcie łazienki wyremontowanej przez firmę, ale z ciasnym kadrem i widocznym bałaganem. Temat pasuje, ale układ trudno zrozumieć. Wypróbuj inny kadr lub inne zdjęcie tego samego projektu.
• Czytelne zdjęcie ukończonej małej łazienki. Schowki, prysznic i dostępna przestrzeń są dobrze widoczne. Jeśli zostaje też miejsce na nagłówek, to najlepsza propozycja dla tej strony.

Jeśli prysznic znika z trzeciego zdjęcia po przycięciu do ekranu telefonu, przygotuj osobny kadr mobilny lub przenieś tekst obok. O wyborze decydują wspólnie temat, przekaz i końcowy układ.

Pokaż usługę lub jej rezultat

Zdjęcia usług są najprzydatniejsze, gdy pomagają wyobrazić sobie pracę. Hydraulik może pokazać gotową instalację lub technika w domu klienta. Fotograf może przedstawić rzeczywisty przykład swojej pracy. To mówi więcej niż ogólne zdjęcie kogoś przy laptopie.

Wybierz zdjęcie, które odpowiada na pytanie, jakie klient może sobie zadawać. Zdjęcie gotowego pokoju pokazuje efekt, zbliżenie może pokazać połączenie lub wykończenie, a fotografia osoby przy pracy — etap realizacji. Każdy widok pełni inną funkcję, więc wybieraj zgodnie z tym, co sekcja ma wyjaśnić.

Dodaj krótki podpis opisujący projekt i szczegół wart uwagi. „Zabudowa do przechowywania pod skosem” mówi więcej niż „Kolejny zadowolony klient”. Opisuj tylko to, co projekt rzeczywiście pokazuje, i formułuj konkretnie twierdzenia o jakości lub rezultatach.

Używaj naturalnych zdjęć prawdziwego zespołu

Zdjęcie zespołu może sprawić, że mała firma wyda się bardziej przystępna, jeśli przedstawia osoby, które klient naprawdę spotka. Znane otoczenie pracy, naturalna mimika i swobodne pozy zwykle są bardziej przekonujące niż mocno zaaranżowane zdjęcie grupowe.

Przy portretach indywidualnych zachowaj podobne kadry i tła. Używaj aktualnych zdjęć odpowiadających obsłudze, której klienci mogą oczekiwać.

Imię i funkcja obok portretu pozwalają skojarzyć twarz z osobą, która odpowie na pytanie lub zajmie się wizytą. Prosty, dobrze oświetlony portret może wystarczyć; rozbudowana sesja nie jest konieczna. Poproś fotografowane osoby o zgodę przed publikacją i unikaj przypadkowego pokazania klientów lub prywatnych informacji w tle.

Dobieraj ilustracje do treści artykułu

Ilustracja artykułu powinna ułatwiać rozpoznanie tematu, nie tylko wypełniać miejsce. W artykule o wyborze kolorów farby pokój z wyraźnym przykładem koloru może być lepszy niż ogólne zdjęcie osoby z pędzlem.

Prosty schemat, rzeczywisty przykład lub zdjęcie własnej pracy może być trafniejsze niż fotografia stockowa. Dopasuj typ obrazu do wyjaśnienia: porównanie może wymagać dwóch przykładów obok siebie, a instrukcja zrzutu ekranu konkretnego kroku. Dekoracyjna okładka wprowadza temat, ale nie zastąpi przykładów potrzebnych do zrozumienia instrukcji.

Sprawdź kadr na komputerze i telefonie

Szeroki obraz może wyglądać zupełnie inaczej na telefonie. Przeglądarka może przyciąć boki, przez co osoba, produkt lub ważny detal przy krawędzi zniknie.

Obejrzyj obraz w rozmiarze, w jakim pojawi się na stronie. Główny motyw musi pozostać widoczny na obu ekranach. Jeśli tekst leży na obrazie, zostaw pod nim spokojną powierzchnię. Gdy nie ma odpowiedniego miejsca, umieść tekst obok.

1. Wstaw obraz do rzeczywistej sekcji. Uwzględnij ostateczny nagłówek, przycisk i otaczający tekst, zamiast oceniać zdjęcie osobno.
2. Sprawdź układ strony na szerokim i wąskim ekranie. Szukaj przyciętych twarzy, brakujących szczegółów produktu i tekstu umieszczonego na zbyt szczegółowym tle.
3. Zmień kadr lub położenie głównego obiektu. Jeśli edytor pozwala wskazać najważniejszy punkt obrazu, ustaw go na istotnym detalu i ponownie sprawdź podgląd.
4. Otwórz stronę na telefonie. Znaczenie obrazu i istotne oznaczenia muszą być czytelne w rzeczywistym rozmiarze.

Jeśli jeden kadr nie sprawdza się w obu rozmiarach, strona może potrzebować różnych kadrów dla różnych ekranów. Poradnik MDN o obrazach responsywnych wyjaśnia osobie budującej stronę tę metodę, nazywaną art direction.

Korzystaj ze zdjęć stockowych rozważnie

Zdjęcia stockowe są przydatne, gdy nie masz odpowiedniej własnej fotografii. Przed wyborem zapytaj:

• Czy zdjęcie wyraźnie wiąże się z tą firmą lub usługą?
• Czy wygląda naturalnie i wiarygodnie?
• Czy to samo zdjęcie mogłoby pojawić się na stronie niemal każdego konkurenta?

Jeśli obraz jest zbyt ogólny, poszukaj bardziej konkretnej propozycji lub użyj rzeczywistego zdjęcia pracy, produktów, lokalu albo zespołu. Własne fotografie pomagają odwiedzającym zrozumieć, czego oczekiwać.

Obraz stockowy może ilustrować ogólny temat lub tworzyć nastrój. Mniej nadaje się do pokazania rzeczywistego zespołu, lokalu czy wykonanych prac. Nie przedstawiaj go jako dowodu projektu, który zrealizowano w twojej firmie. Trafne zdjęcie stockowe może jednak być lepsze niż własne, które jest zbyt ciemne, rozpraszające lub nieczytelne.

Zadbaj o spójny styl obrazów na stronie

Obrazy z różnych źródeł mogą do siebie pasować. Szukaj wspólnej cechy: naturalnego światła, podobnej palety lub konsekwentnego stylu fotografowania.

Nie musisz obrabiać każdego zdjęcia tak samo. Dąż do spójnej strony, na której każdy obraz pasuje do swojego miejsca.

Zacznij od dwóch lub trzech zasad: podobnych kadrów portretów, jednolitego przycinania okładek bloga i naturalnego światła w zdjęciach projektów. Obejrzyj obrazy razem na stronie. Wymień ten, który odstaje, zanim nałożysz mocny filtr na całą kolekcję.

Lista kontrolna przed publikacją

• Potrafisz wyjaśnić, co obraz wnosi do sekcji.
• Wiernie przedstawia firmę, temat lub pokazywany przykład.
• Główny motyw pozostaje widoczny w rzeczywistym układzie na komputerze i telefonie.
• Tekst i przyciski są czytelne, a najważniejsze informacje są dostępne również jako tekst strony.
• Światło, kadr lub kolor pasują do otaczających obrazów.
• Masz zgodę na użycie i wiesz, czy trzeba podać źródło lub autora.

Przygotuj wybrane obrazy do publikacji

Po wyborze skorzystaj z naszych poradników, aby dobrać odpowiednie wymiary, zmienić rozmiar bez zniekształceń i napisać przydatne teksty alternatywne i nazwy plików.

Zastanów się również, jak przekazać informację osobie, która nie widzi obrazu. Obrazy niosące treść potrzebują odpowiedniej alternatywy tekstowej; czysto dekoracyjne zwykle mają pusty tekst alternatywny. Poradnik W3C dotyczący obrazów wyjaśnia, jak ich funkcja wpływa na ten wybór.