szablony
Obrazy: rozmiary oraz przycinanie zdjęć
Obrazy stanowią kluczowy element strony internetowej. Czasami jednak trudno ustalić właściwy rozmiar grafiki, optymalną liczbę pikseli lub to, w jaki sposób przyciąć zdjęcia. Poniższy artykuł przedstawia najlepsze praktyki związane z wykorzystaniem grafik na stronie internetowej.
Wskazówka
Miej na uwadze, że poniższe informacje to tylko wskazówki oparte przede wszystkim na tym, co w naszym odczuciu najlepiej działa w Edytorze. Nie traktuj ich jako ostatecznych odpowiedzi, którymi należy kierować się co do najmniejszego szczegółu.
Piksele i rozmiar pliku (informacje ogólne)
Piksele oraz wymiary pliku nie są istotne wyłącznie z punktu widzenia obsługi Edytora. Są również ważne z uwagi na to, w jakim stylu chcesz zaprojektować swoją witrynę. Zalecenia dotyczące pikseli oraz wymiarów zdjęć opierają się przede wszystkim na szerokości obrazu, ponieważ jest ona ważna dla responsywnych stron internetowych. Wysokość obrazu z kolei zależy przede wszystkim od preferencji dotyczących designu witryny.
Dlaczego szerokość jest ważna?
Wykorzystanie obrazów o określonej minimalnej szerokości sprawia, że będą one zawsze dobrze wyglądać na responsywnych stronach – bez względu na rozmiar ekranu użytkownika. Właśnie dlatego zaleca się, żeby wykorzystywać grafiki o szerokości 2600 pikseli lub większej dla obrazów, które zajmują cały Wiersz (np. zdjęcia w tle). O liczbie 2600 warto pamiętać również w innych sytuacjach. Jeśli w jednym Wierszu znajduje się więcej niż jedno zdjęcie, ich łączna szerokość powinna wynosić właśnie 2600 pikseli.
Piksele a kilka obrazów w jednym wierszu
For example, if you have three images next to each other, each image should be at least 866 pixels wide (as 866*3 = approx. 2600).
Szerokość dla stałych Wierszy
Jeśli posiadasz witrynę ze stałym układem Wierszy, siłą rzeczy zmienia to wymogi dotyczące rozmiarów zdjęć, ponieważ szerokość stałego Wiersza wynosi 1140 pikseli dla wszystkich Kolumn. Nie martw się – dalej możesz użyć tych samych obrazów o szerokości 2600 pikseli lub więcej jak w przypadku płynnych Wierszy. Dodaj obraz o szerokości 2600 pikseli, a Edytor automatycznie wygeneruje wtedy wersję zoptymalizowaną do stałych Wierszy, gdy tylko opublikujesz swoją witrynę.
Co z wysokością?
Wysokość obrazów także jest istotna, lecz w większym stopniu dotyczy ona szaty graficznej witryny oraz gustu autora niż responsywnego działania strony. Przy ustalaniu wysokości obrazu należy pamiętać, żeby ustalić tę samą wartość dla zdjęć, które będą się wyświetlać obok siebie. Przeczytaj sekcję „Wykorzystanie dwóch, trzech lub większej liczby zdjęć” poniżej, aby uzyskać więcej informacji na temat wysokości obrazów.
Miej na uwadze, że wygląd Wiersza oraz to, jak jest odbierany przez użytkownika, zmienia się w zależności od wysokości obrazu, ponieważ wpływa ona na wysokość Kolumny, w której znajduje się Moduł Obraz. Jeśli grafika jest zamieszczona jako tło Wiersza lub Kolumny, wysokość obrazu jest określona przez ustawienia odstępów Wiersza bądź Kolumny. Jeśli chcesz, żeby wyświetlała się większa część wybranej grafiki, zwiększ odstępy w ustawieniach Wiersza lub Kolumny.
Rozmiar pliku ze zdjęciem
Kiedy umieszczasz w jednym Wierszu dwa, trzy lub więcej zdjęć, wymogi dotyczące obrazów pozostają takie same jak wyżej. Zalecamy stosowanie się do dwóch poniższych zasad:
Po pierwsze upewnij się, że łączna szerokość Twoich obrazów wynosi 2600 pikseli lub więcej, aby zachować optymalną responsywność strony. Jeśli szerokość wynosi mniej niż 2600 pikseli, strona może wyglądać inaczej na dużym ekranie monitora stacjonarnego i zawierać niepożądane przerwy między zdjęciami. Szerokość poszczególnych grafik zależy od liczby obrazów (Kolumn), które znajdują się w Wierszu. Oznacza to, że jeśli masz trzy przylegające do siebie zdjęcia, każde z nich powinno być szerokie na przynajmniej 2600/3 = 866 pikseli. Jeśli masz cztery zdjęcia ustawione obok siebie, każde z nich powinno być szerokie na przynajmniej 2600/4 = 650 pikseli.
Po drugie upewnij się, że Twoje obrazy są tej samej wysokości, aby zapewnić spójny i przemyślany wygląd strony.
Przycinanie obrazów: wykorzystanie kilku obrazów w jednym Wierszu
Edytor może pochwalić się znakomitym narzędziem w postaci Edytora Obrazów. Możesz mieć dzięki niemu pewność, że Twoje zdjęcia będą miały prawidłowe wymiary bez konieczności użycia dodatkowych aplikacji przeznaczonych do przycinania i formatowania zdjęć. Edytor Obrazów jest prosty w obsłudze, a do tego oferuje szereg gotowych ustawień umożliwiających zapisanie zdjęcia w konkretnym rozmiarze lub formacie.
Wskazówka
Miej na uwadze, że poniższe wskazówki opierają się na obrazach wykorzystanych w płynnym układzie Wierszy bez ustawienia dodatkowych odstępów między nimi.
Wykorzystanie dwóch, trzech lub większej liczby zdjęć
Kiedy umieszczasz w jednym Wierszu dwa, trzy lub więcej zdjęć, wymogi dotyczące obrazów pozostają takie same jak wyżej. Zalecamy stosowanie się do dwóch poniższych zasad:
Po pierwsze upewnij się, że łączna szerokość Twoich obrazów wynosi 2600 pikseli lub więcej, aby zachować optymalną responsywność strony. Jeśli szerokość wynosi mniej niż 2600 pikseli, strona może wyglądać inaczej na dużym ekranie monitora stacjonarnego i zawierać niepożądane przerwy między zdjęciami. Szerokość poszczególnych grafik zależy od liczby obrazów (Kolumn), które znajdują się w Wierszu. Oznacza to, że jeśli masz trzy przylegające do siebie zdjęcia, każde z nich powinno być szerokie na przynajmniej 2600/3 = 866 pikseli. Jeśli masz cztery zdjęcia ustawione obok siebie, każde z nich powinno być szerokie na przynajmniej 2600/4 = 650 pikseli.
Po drugie upewnij się, że Twoje obrazy są tej samej wysokości, aby zapewnić spójny i przemyślany wygląd strony.
ARTYKUŁY z tej sekcji
