nie masz pewności, dlaczego Twoja strona nie jest dobrze oceniana w Google lub dlaczego konsumenci nie angażują się z nią? Rozmiary obrazów dla stron internetowych i szybkość witryny oraz problemy z SEO są często postrzegane jako wpływające na współczynniki odrzuceń i rankingi.
dla wielu osób zapisywanie zdjęć do sieci zawsze było tajemnicą. Ciężkie obrazy (oryginalne rozmiary obrazów o szerokości 5000px, nieoptymalizowane zdjęcia) nie tylko pogorszą wrażenia użytkownika na twojej stronie, ale także będą miały negatywny wpływ na Twoją strategię SEO (prędkość ładowania, współczynnik odrzuceń, ranking itp.).
Podzielmy listę wytycznych dotyczących rozmiaru obrazu witryny.
dlaczego ważne są rozmiary obrazów i wydajność witryny?
strony internetowe ładują się dłużej, gdy grafika nie jest zoptymalizowana. Powolne witryny skutkują słabym doświadczeniem użytkownika, mniejszym prawdopodobieństwem pozycji w wyszukiwarkach Google, a w rezultacie mniejszą liczbą zapytań i konsumentów.
wytyczne dotyczące rozmiaru obrazu witryny wspominają, że zapisywanie zdjęć w odpowiednich proporcjach i optymalizacja ich pod kątem sieci może pomóc w wielu rzeczach, w tym:
• prędkość
według badań Google, jeśli załadowanie strony internetowej trwa dłużej niż 5 sekund, prawdopodobieństwo opuszczenia strony przez użytkownika mobilnego wzrasta o 90%. Możesz przyspieszyć strony witryny, zmniejszając i zmniejszając rozmiary zdjęć.
• User Experience
odwiedzający będą mieli bardziej angażujące doświadczenie podczas przeglądania Twojej witryny, jeśli użyjesz wysokiej jakości, atrakcyjnych zdjęć. Zapewniasz bezproblemowe i płynne wrażenia odwiedzającym, optymalizując te zdjęcia i szybko je ładując, co zachęca ich do spędzania więcej czasu w Twojej witrynie i odkrywania Twoich treści.
• Ranking SEO
im szybciej załaduje się Twoja strona, tym wyższa pozycja. Zarówno na komputerach, jak i urządzeniach mobilnych strony internetowe z zoptymalizowaną grafiką ładują się znacznie szybciej.
• sprzedaż
szybsze ładowanie i ulepszone SEO mogą pomóc przyciągnąć więcej odwiedzających do twojej witryny, zwiększając szanse na kontakt i rezerwację.
jakie są Najbardziej odpowiednie rozmiary obrazów dla stron internetowych?
uderzająco jest zbudowany do pracy z szeroką gamą rozmiarów obrazu dla różnych rozmiarów ekranu, sekcji, stylów i wzorów. Czasami jednak warto mieć przybliżoną koncepcję wymiarów do przesłania.
oto kilka ogólnych wytycznych dotyczących rozmiaru obrazu witryny do naśladowania!
Zdjęcie pochodzi z
1. Obrazy w tle
zdjęcia w tle z uderzająco są zaprojektowane tak, aby pasowały do szerokiej gamy rozmiarów ekranu, od monitora przez tablet po telefon. Aby zapewnić doskonały wygląd tła na wszystkich ekranach, zalecamy rozmiar 1600 pikseli szerokości na wysokość 900 pikseli. Dołączaj zdjęcia osób, marek i inne informacje z zachowaniem ostrożności!
2. Ustawienia dla tła
aby Rozmiar / wyrównanie tła, masz kilka alternatyw.
Stretch/Cover domyślnie: ta opcja rozciąga obraz, aby wypełnić cały ekran, zarówno pod względem wysokości, jak i szerokości. Ponieważ obraz będzie działał jako tło na dowolnym rozmiarze ekranu, jest to zwykle najlepsze rozwiązanie. Jeśli jednak obraz ma zawartość po bokach (zwłaszcza po lewej i prawej stronie), może nie być widoczny w telefonach komórkowych.
Contain: Contain wyświetli cały obraz, zapewniając, że żadna jego część nie zostanie odcięta. Na niektórych urządzeniach może to jednak spowodować pewne białe spacje.
środek: obraz zostanie wyświetlony na środku sekcji i nie będzie skalowany, jeśli wybierzesz środek. Z drugiej strony, tło pokaże białą przestrzeń wokół krawędzi obrazu jest zbyt mała. Niektóre elementy obrazu mogą zostać odcięte, jeśli jest zbyt duży, zwłaszcza na mniejszych wyświetlaczach.
kafelek: kafelek wyśrodkuje, a następnie powtórzy obraz, co jest przydatne do tworzenia szablonów.
aby rozpocząć wytyczne dotyczące rozmiaru obrazu witryny, zanotuj, jak szeroki jest obraz na stronie.
Zdjęcie pochodzi z obrazka
• obrazy tła
idealny rozmiar obrazów tła to 1600x900px
• obrazy o pełnej szerokości
powinny mieć co najmniej 1400 pikseli, aby uzyskać najlepsze rezultaty. Zgodnie z wytycznymi dotyczącymi rozmiaru obrazu na stronie internetowej
obrazy o połowie szerokości powinny mieć co najmniej 700px szerokości dla najlepszej jakości.
obrazy powinny mieć co najmniej 480px szerokości, aby uzyskać najlepszą jakość obrazów o szerokości 1/3.
• ¼ szerokości obrazów
aby uzyskać najlepszą jakość obrazów o szerokości 1/4, powinny mieć co najmniej 360 pikseli szerokości.
• Małe ikony i logo
powinny mieć co najmniej 100 pikseli szerokości.
Każdy rozmiar jest odpowiedni dla zdjęć w galerii! Zdjęcia w galerii zostaną otwarte w lightboxie na twojej stronie internetowej.
jaki rozmiar obrazu jest wymagany dla Twojej strony internetowej?
obrazy powinny być tak duże, jak to konieczne, aby zmieścić ich „kontenery” dla maksymalnej wydajności witryny, w zależności od układu strony. Na przykład zdjęcia pokazu slajdów są często większe; obrazy bloga są średniej wielkości (o szerokości równej szerokości strony minus pasek boczny); miniatury są mniejsze i tak dalej.
zgodnie z wytycznymi dotyczącymi rozmiaru obrazu witryny ważne jest, aby najpierw ustalić wymiary obrazu w celu obliczenia szerokości obszaru zawartości witryny. Możesz użyć wtyczki przeglądarki „page ruler”, aby pomóc ci w podjęciu działań, lub możesz użyć narzędzi programistycznych zintegrowanych z przeglądarką internetową, jeśli masz doświadczenie: kliknij prawym przyciskiem myszy dowolny element strony i wybierz” Inspect ” z rozwijanego menu.
obraz jest pobierany z pliku
następnie na pasku narzędzi użyj narzędzia selektor elementów, aby najechać kursorem na interesujące Cię zdjęcie lub sekcję treści:
Zdjęcie pochodzi z uderzająco
obraz pochodzi z uderzająco
w tym przypadku powyższa kolumna wymaga obrazu o szerokości co najmniej 525 pikseli.
mówimy „co najmniej”, ponieważ obrazy w nowszych smartfonach z ekranami „retina” o dużej gęstości muszą być większe, aby wyglądać tak ostro, jak to możliwe.
rozważ następujące scenariusze:
A. Pokaz slajdów o pełnej szerokości Rozmiar obrazu internetowego
wytyczne dotyczące rozmiaru obrazu witryny zalecają szerokość 2560 pikseli dla pokazów slajdów o pełnej szerokości (które automatycznie rozszerzają się do pełnego rozmiaru przeglądarki). Jest to standardowa szerokość rozdzielczości dla monitorów 27″ i 30″.
obrazy mogą być tak wysokie, jak chcesz, aby osiągnąć wybrany współczynnik kształtu. Na przykład całostronicowe pokazy slajdów, które są powszechne na stronach internetowych poświęconych fotografii ślubnej, zachowują oryginalny współczynnik proporcji zdjęć. Inne witryny wykorzystują pokaz slajdów, który rozciąga się na całą szerokość strony, ale ma mniejszą wysokość (co prowadzi do proporcji około 3:1).
poniżej znajduje się przykład „panoramicznych” pokazów slajdów ze stron fotograficznych:
obraz pochodzi ze strony internetowej Usre
obrazy powinny mieć szerokość 2560 (zaokrąglać do 2500px) pikseli i dowolną wysokość wybraną dla obrazów, które rozciągają się na całą szerokość przeglądarki (w zależności od tego, czy chcesz zachować natywny Współczynnik Proporcji obrazu, Czy przejść do bardziej panoramicznego cięcia).
nie jest to przypadek, w którym musimy podwoić Rozmiar obrazu dla wyświetlaczy retina, ponieważ skutkowałoby to ogromnymi obrazami 5000px (aby nie dodawać zagrożeń związanych z kradzieżą obrazu, z dużymi rozmiarami plików).
Dostosuj wymagany rozmiar obrazu dla mniejszych pokazów slajdów, które nie zajmują całej szerokości strony, ale tylko jej części (może 2000px lub 1800px itp.)
Zdjęcie pochodzi ze strony internetowej Strikingly usre
B. Rozmiary zdjęć w galeriach (i miniatury, które powiększają się w widoku Lightbox)
galerie miniatur to wyjątkowe sytuacje, w których rozmiar twoich miniatur jest ignorowany na rzecz zapewnienia, że zdjęcia są wystarczająco duże po powiększeniu.
siatka miniatur zdjęć, które po kliknięciu otwierają się w pełnoekranowym pokazie slajdów (zwykle z półprzezroczystą nakładką pod spodem) jest określana jako „widok lightbox”:
ponieważ zdjęcia te będą otwierane w trybie pełnoekranowym, wytyczne dotyczące rozmiaru obrazów witryny zalecają, aby były one szerokie na co najmniej 1500 pikseli (na najdłuższej krawędzi), aby wyglądały dobrze na komputerach stacjonarnych i tabletach.
możesz nawet przejść do 2000 pikseli, jeśli chcesz dodać dodatkowy „wow factor”, chociaż zwykle tak nie jest.
obrazy są regulowane przez przeglądarkę na urządzeniach mobilnych i tak, a 1500px jest wystarczająco duży, aby wyglądać ostro na smartfonach z ekranami o wysokiej rozdzielczości PPI „retina”.
obrazy pionowe/portretowe o maksymalnej wysokości 1200 pikseli (takie jak 800×1200 pikseli dla obrazu pionowego 2:3 lub 900×1200 pikseli dla obrazu pionowego 3:4) mogą być jeszcze mniejsze.
jeśli pokaz slajdów pozwala na przeglądanie zdjęć za pomocą strzałek bocznych, punktorów, przesuwania na telefonie komórkowym lub strzałek klawiatury na pulpicie, ograniczenie wymiarów obrazu w ten sposób sprawi, że rozmiar pliku będzie rozsądnie krótki, co spowoduje szybsze ładowanie obrazu:
C. Zalecane rozmiary obrazów dla postów na blogu i innych statycznych zdjęć w układach stron
jeśli zdjęcia na blogu nie wymagają funkcji „Kliknij, aby powiększyć” (lub „lightbox”), powinny być wielkości zgodne z do szerokości kolumny lub obszaru zawartości.
Weźmy następujący przykład pojedynczego posta na blogu:
obraz pochodzi ze strony internetowej Usre
możesz ustalić rzeczywistą szerokość obszaru treści, mierząc dowolny akapit tekstu za pomocą metod opisanych powyżej, na przykład:
obraz pochodzi ze strony internetowej Usre
alternatywnie, jeśli masz już zdjęcia, możesz zobaczyć, do jakiego rozmiaru przeglądarka je zmienia.
aby uzyskać te same informacje, możesz użyć wtyczki przeglądarki, takiej jak Wyświetl informacje o obrazie (właściwości).
dzięki tym informacjom (na przykład 825 pikseli) możesz teraz podwoić rozmiar, aby uwzględnić wyświetlacze siatkówki (tak więc szerokość 1650 pikseli).
w zależności od motywu witryny i tolerancji ryzyka kradzieży obrazu, możesz zmniejszyć tę ilość do bardziej sensownego 1200 pikseli na najdłuższej krawędzi (tak więc obrazy poziome powinny mieć szerokość 1200px, a obrazy pionowe powinny mieć wysokość 1200px, zachowując ich oryginalny współczynnik kształtu).
Mniejsze zdjęcia używane jako miniatury (które nie muszą być rozszerzane) podlegają temu samemu procesowi decyzyjnemu.
podsumowanie
te wytyczne dotyczące rozmiaru obrazów witryny nie mają zastosowania do usług archiwizacji zdjęć, takich jak PhotoShelter lub SmugMug (które mają wbudowane środki bezpieczeństwa i generują miniatury w niskiej rozdzielczości z oryginalnych plików o wysokiej rozdzielczości, zgodnie z potrzebami witryny), lub gdy sprzedajesz te obrazy jako pliki do pobrania lub wydruki, jak wspomniano na początku.
przestrzeganie tych zasad dotyczących rozmiaru obrazu witryny jest koniecznością, jeśli masz witrynę hostowaną samodzielnie i potrzebujesz tylko zaprezentować swoje zdjęcia w Internecie.
wybór odpowiednich zdjęć jest ważnym aspektem tworzenia atrakcyjnej wizualnie i szybko ładującej się strony internetowej. Jest, bez wątpienia, krzywa uczenia się. Istnieją jednak inne zalety, które można mieć, a wszystko to jest częścią ekscytacji związanej z tworzeniem i utrzymywaniem strony internetowej!