Jakiego rozmiaru obrazu użyć w WordPress (kluczowe czynniki i wskazówki)

Czy zauważasz powolne ładowanie witryny? Niska prędkość witryny może wynikać z wielu czynników, a jednym z nich są duże rozmiary obrazów. Jeśli masz witrynę internetową zawierającą dużą ilość treści, rozmiar obrazu może prawdopodobnie być jednym z czynników wpływających na niską prędkość witryny. Dlatego ważne jest, aby zoptymalizować obrazy WordPress, aby nie utrudniały działania Twojej witryny. W tym przewodniku znajdziesz przegląd sposobów określenia najlepszego rozmiaru obrazu dla Twojej witryny WordPress. Pomogłoby to w usprawnieniu interakcji z klientami i zwiększeniu produktywności.

Zrozumienie rozmiarów obrazów w WordPress

Rozmiary obrazów w WordPress są określane na podstawie wymiarów (w pikselach) i rozmiaru pliku obrazu w kilobajtach (KB) lub megabajtach (MB). Wyświetlając obraz w witrynie WordPress, ważne jest, aby wiedzieć, że rozmiar obrazu nie dotyczy tylko estetyki — ma bezpośredni wpływ na wydajność witryny, wygodę użytkownika i optymalizację wyszukiwarek (SEO). WordPress pomoże chronić użytkowników przed używaniem bardzo dużych obrazów, automatycznie tworząc skalowaną wersję po przesłaniu. Ponadto każdy przesłany obraz będzie miał różne odmiany i rozmiary wyświetlane w zależności od tego, gdzie jest używany w Twojej witrynie. Więcej na ten temat poniżej.

Funkcjonalność SRCSet

Kiedy przesyłasz obraz do WordPress, platforma automatycznie tworzy wiele rozmiarów tego obrazu (miniatura, średni, duży itp.). Atrybut SRCset pozwala przeglądarce wybrać najbardziej odpowiedni rozmiar obrazu w zależności od rozmiaru ekranu urządzenia i gęstości pikseli.

Na przykład, jeśli Twój post na blogu zawiera obraz, a użytkownik odwiedza Twoją witrynę z komputera stacjonarnego z dużym ekranem, przeglądarka może załadować dużą wersję (np. 1024px). Z drugiej strony, jeśli użytkownik przegląda na telefonie komórkowym, przeglądarka wybierze mniejszą wersję (np. 300px), która ładuje się szybciej.

Oto domyślne rozmiary, które otrzymasz dla każdego obrazu przesłanego do WordPress:

• Miniaturka: 150 x 150 pikseli
• Średni: 300 x 300 pikseli (może się różnić w zależności od ustawień)
• Duży: 1024 x 1024 pikseli (może się różnić w zależności od ustawień)
• Pełny rozmiar: Wymiary oryginalne

Jeśli chcesz zmienić domyślne rozmiary obrazów, znajdziesz je w Ustawieniach → Media w panelu WordPress:

Jakiego rozmiaru obrazu użyć w WordPress

W większości przypadków rozmiar pliku obrazu nie powinien przekraczać 200 KB. Większość obrazów powinna mieć rozmiar bliższy 50kb-100kb lub mniej. Aby zachować pliki obrazów w tym zakresie, należy wziąć pod uwagę inne czynniki, takie jak wymiary.

Oto kilka często zalecanych wymiarów obrazu dla WordPress:

• Obrazy w postach na blogu: 1200 x 630 pikseli
• Wyróżnione obrazy (miniatury postów): 1200 x 800 pikseli
• Obrazy nagłówka / obrazy główne: 1600 x 900 pikseli lub 1920 x 1080 pikseli
• Obrazy tła: 1920 x 1080 pikseli
• Suwaki i banery: 1200 x 600 pikseli lub 1920 x 800 pikseli
• Zdjęcia produktów (WooCommerce): 800 x 800 pikseli lub 1000 x 1000 pikseli
• Obraz logo: 200 x 100 pikseli lub 250 x 100 pikseli

Jeśli nie masz ku temu konkretnego powodu, nie powinieneś przesyłać obrazów o rozmiarze 5 MB i szerokości 5000 pikseli. WordPress pomoże, tworząc bardziej przyjazne dla witryny wersje, z których będziesz mógł korzystać. Ale jeśli wyświetlisz ten oryginalny rozmiar, prędkość ładowania strony ucierpi.

Wybór odpowiedniego rozmiaru obrazu do przesłania do WordPressa ma kluczowe znaczenie dla optymalizacji wydajności witryny i zapewnienia ostrego wyglądu obrazów na wszystkich urządzeniach. Idealny rozmiar obrazu zależy od kontekstu, w jakim obraz będzie używany (np. w postach na blogu, miniaturach, suwakach itp.), a także od responsywności, rozmiaru pliku i względów jakościowych.

Kluczowe czynniki do rozważenia w przypadku obrazu rozmiaru WordPress

Wybierając lub tworząc obrazy dla WordPress, należy wziąć pod uwagę kilka kluczowych czynników, aby zapewnić ich optymalizację pod kątem wydajności i wyglądu. Czynniki te obejmują rozmiar obrazu, typ pliku, wymiary i inne. Oto szczegółowy podział:

Wymiary obrazu

Wymiary obrazu bezpośrednio wpływają na sposób wyświetlania obrazów w różnych częściach witryny. Używanie zbyt dużych obrazów spowalnia czas ładowania, negatywnie wpływając na wygodę użytkownika i SEO. Obrazy, które są zbyt małe, mogą wydawać się rozpikselowane lub rozmyte, co obniża ogólną jakość wizualną Twojej witryny.

Twój motyw WordPress często narzuca idealne wymiary obrazu dla różnych sekcji, takich jak nagłówki, posty na blogu lub galerie. Sprawdź dokumentację motywu pod kątem zalecanych wymiarów.

Rozmiar pliku

Większe rozmiary plików powodują wolniejsze ładowanie, co negatywnie wpływa zarówno na wygodę użytkownika (szczególnie na urządzeniach mobilnych), jak i na ranking Twojej wyszukiwarki. Powolne witryny prowadzą do wyższych współczynników odrzuceń, co oznacza, że ​​odwiedzający chętniej opuszczą witrynę, zanim zostanie w pełni załadowana.

Najlepiej zachować rozmiar pliku obrazu poniżej 500 KB. Jeśli jednak obraz jest wyświetlany w widocznym miejscu, możesz zezwolić na maksymalnie 1 MB, aby uzyskać lepszą jakość. Użyj narzędzi do kompresji obrazu, aby zmniejszyć rozmiar pliku przy jednoczesnym zachowaniu jakości wizualnej. W przypadku kompresji ręcznej dobrze sprawdzają się narzędzia takie jak TinyPNG lub JPEG-Optimizer. Po skompresowaniu przetestuj czas ładowania swojej strony za pomocą narzędzi takich jak Google PageSpeed ​​Insights lub GTmetrix. Jeśli czas ładowania jest powolny, jeszcze bardziej zmniejsz rozmiar obrazu.

Format pliku

Różne formaty plików służą różnym celom, a wybór odpowiedniego może zrównoważyć jakość i wydajność. Użycie niewłaściwego formatu może skutkować niepotrzebnie dużymi rozmiarami plików lub słabą jakością obrazu, zwłaszcza jeśli w grę wchodzi przezroczystość lub ostre krawędzie.

JPEG (JPG) najlepiej nadaje się do zdjęć lub obrazów o wielu kolorach i gradientach. Obsługuje kompresję stratną, co oznacza, że ​​zmniejsza rozmiar pliku poprzez eliminację niektórych szczegółów, ale doskonale nadaje się do zmniejszania rozmiarów plików złożonych obrazów. Z drugiej strony PNG jest idealny do logo, ikon lub obrazów z przezroczystością. PNG zapewnia bezstratną kompresję, zachowując jakość obrazu kosztem większych rozmiarów plików.

Współczynnik proporcji

Spójny współczynnik proporcji zapewnia prawidłowe wyświetlanie obrazów na różnych urządzeniach i ekranach o różnych rozmiarach. Używanie niespójnych proporcji może prowadzić do przycięcia, zniekształcenia lub źle wyrównanego obrazu, co wpływa na spójność wizualną witryny.

W przypadku obrazów w stałych układach (takich jak suwaki lub banery) zawsze stosuj zalecane proporcje z dokumentacji motywu lub wtyczki (np. proporcje 16:9 dla banerów). W przypadku galerii lub siatek wybierz pojedynczy współczynnik proporcji (np. 4:3 lub 1:1 w przypadku miniatur kwadratowych) i przytnij wszystkie obrazy do tego współczynnika, aby zapewnić jednolitość. Jeśli korzystasz z ustawień obrazu responsywnego, przetestuj swoją witrynę na różnych urządzeniach i ekranach o różnych rozmiarach, aby upewnić się, że współczynniki proporcji działają dobrze w różnych rzutniach.

Najlepsze praktyki dotyczące rozmiarów obrazów WordPress

Szybkość witryny ma kluczowe znaczenie dla wygody użytkownika i SEO, a zbyt duże obrazy mogą znacznie spowolnić witrynę WordPress. Optymalizacja rozmiarów obrazów jest ważna, aby utrzymać szybki czas ładowania bez utraty jakości. Oto krótki przewodnik na temat skutecznego zmniejszania rozmiarów obrazów i zwiększania wydajności witryny.

Zmień rozmiar obrazów, aby uzyskać odpowiednie wymiary

Prześlij obrazy o wymiarach odpowiadających potrzebom wyświetlania Twojej witryny. Unikaj przesyłania dużych obrazów, których rozmiar jest automatycznie zmieniany przez WordPress, ponieważ zużywa to pamięć i przepustowość. Przed przesłaniem obrazów określ maksymalne wymiary potrzebne w oparciu o układ motywu. Na przykład, jeśli obszar zawartości ma szerokość 800 pikseli, obrazy szersze niż ten nie będą wyświetlane poprawnie i spowalniają Twoją stronę.

Zmień rozmiar obrazów w WordPress

Jeśli przesłałeś już zbyt duży obraz, możesz zmienić jego rozmiar bezpośrednio w WordPress. Przejdź do opcji Media > Biblioteka na pulpicie nawigacyjnym WordPress.

Kliknij istniejący obraz lub prześlij nowy plik obrazu. W naszym przypadku zdecydowaliśmy się przesłać nowy plik obrazu.

Po kliknięciu na dodany obraz zostaną wyświetlone wszystkie jego szczegóły. Kliknij „Edytuj więcej szczegółów” w prawym dolnym rogu, aby uzyskać dostęp do dodanych ustawień.

W szczegółach obrazu kliknij przycisk Edytuj obraz.

W obszarze Skaluj obraz wprowadź nowe wymiary (szerokość lub wysokość), a WordPress przeskaluje obraz proporcjonalnie. Kliknij opcję Skaluj, aby zastosować zmiany.

UWAGA: Nie można skalować obrazów większych niż wersja oryginalna. WordPress poinformuje Cię, jeśli to zrobisz.

Użyj narzędzi do kompresji obrazu

Jak wspomniano wcześniej, kompresja obrazów pomaga zmniejszyć rozmiar pliku. Dostępne są różne narzędzia do kompresji obrazów, w tym oprogramowanie do edycji, takie jak Adobe Photoshop lub Microsoft Photos.

Alternatywnie możesz w tym celu skorzystać z narzędzi internetowych, takich jak TinyPNG.

To narzędzie preferuje kompresję stratną, aby zminimalizować rozmiar plików WEBP, JPEG i PNG. Po prostu prześlij swoje obrazy, a TinyPNG zajmie się kompresją za Ciebie.

Alternatywnie możesz skorzystać z solidnej wtyczki do optymalizacji obrazu, takiej jak Imagify. Dodaj nową wtyczkę z sekcji „Wtyczki” w panelu WordPress przed jej zainstalowaniem i aktywacją.

Po zainstalowaniu i aktywowaniu Imagify w witrynie WordPress przejdź do Ustawienia > Imagify, aby skonfigurować preferencje kompresji:

Po skonfigurowaniu kliknij Zapisz zmiany. Następnie Imagify automatycznie skompresuje wszystkie obrazy przesłane do Twojej witryny.

Zmień maksymalny limit przesyłania

WordPress ustawia maksymalny rozmiar przesyłanego pliku, który może się różnić w zależności od limitów nałożonych przez dostawcę usług hostingowych. Przejdź do opcji Media > Dodaj nowy w panelu WordPress, aby określić aktualny limit przesyłania plików. Ograniczenie rozmiaru przesyłanego pliku zostanie wyświetlone na tej stronie.

Ogólnie rzecz biorąc, nie ma potrzeby dostosowywania tego limitu, chyba że planujesz przesyłać większe pliki. Jednakże obniżenie limitu rozmiaru pliku może być przydatne, zwłaszcza jeśli zarządzasz blogiem, w którym uczestniczy wielu autorów, aby uniemożliwić innym przesyłanie niepotrzebnie dużych obrazów. Możesz skontaktować się ze swoim dostawcą usług hostingowych, aby zmodyfikować maksymalny rozmiar przesyłanego pliku lub zaktualizować limit, edytując plik php.ini.

Użyj leniwego ładowania

Leniwe ładowanie to technika zwiększająca wydajność, która opóźnia ładowanie obrazów na stronie internetowej do czasu, aż będą rzeczywiście potrzebne. Zamiast zmuszać wszystkie obrazy do natychmiastowego załadowania po uzyskaniu dostępu do strony, leniwe ładowanie ładuje obrazy tylko wtedy, gdy użytkownik przewija w dół i stają się one widoczne. Skraca to początkowy czas ładowania strony, oszczędza przepustowość i poprawia wygodę użytkownika.

Większość motywów i wtyczek WordPress oferuje obecnie wbudowaną obsługę leniwego ładowania. Sam WordPress zawiera nawet natywne leniwe ładowanie od wersji 5.5. Ponadto różne wtyczki, takie jak WP Rocket, Lazy Load firmy WP Rocket i a3 Lazy Load oferują bardziej zaawansowaną kontrolę i dostosowywanie procesu leniwego ładowania, dzięki czemu można je łatwo wdrożyć na dowolnej witrynie WordPress bez dużej wiedzy technicznej.

Wszystkie te praktyki mają fundamentalne znaczenie dla utrzymania profesjonalnych rozmiarów obrazów w WordPress. Jednak Divi, nasz płodny motyw i kreator WordPress, podnosi je jeszcze bardziej dzięki swoim responsywnym atrybutom.

Jak stworzyć idealne rozmiary obrazu za pomocą Divi

Jeśli chcesz mieć większą kontrolę nad opcjami projektowania i rozmiaru obrazu, możesz skorzystać z narzędzia do tworzenia stron, takiego jak Divi. Divi jest wyposażony w zaawansowane funkcje responsywne. To narzędzie integruje kilka funkcji z Twoją witryną WordPress, w tym zmianę rozmiaru obrazu. Tutaj zagłębimy się w to, jak Divi może poprawić wymiary Twoich obrazów, zachowując jednocześnie ich jakość.

1. Pobierz i zainstaluj Divi

Divi można kupić za pośrednictwem Elegant Themes, oferując dwie opcje cenowe: roczną licencję za 89 USD lub dożywotnią licencję za 249 USD . Po zakupie możesz łatwo pobrać i zainstalować motyw na swojej stronie WordPress, wykonując następujące kroki:

1. W panelu WordPress przejdź do Wygląd > Motywy .
2. Kliknij opcję Dodaj nowy, a następnie wybierz opcję Prześlij motyw.
3. Wybierz pobrany plik Divi .zip i kliknij Zainstaluj teraz.
4. Po zakończeniu instalacji kliknij „Aktywuj”, aby Divi stał się aktywnym motywem.

Szczegółowy przewodnik znajdziesz w poniższym filmie.

Po zakończeniu konfiguracji możesz rozpocząć tworzenie witryny. Aby wcześniej zapoznać się z tym procesem, zapoznaj się z naszym samouczkiem dotyczącym korzystania z Divi Builder.

Rozpocznij pracę z Divi

2. Utwórz swoją stronę internetową, otwórz Divi Builder i wybierz swój obraz

Po zainstalowaniu motywu Divi na WordPress możesz szybko stworzyć swoją stronę internetową. Divi zapewnia wiele opcji budowania witryny internetowej. Możesz zbudować swoją witrynę od podstaw, skorzystać z naszych gotowych układów lub użyć Divi AI do zbudowania swojej witryny.

Ponadto możesz użyć Divi Quick Sites do zbudowania profesjonalnej strony internetowej w ciągu jednej lub dwóch minut.

Po utworzeniu witryny i dodaniu odpowiednich obrazów możesz uzyskać dostęp do Divi Builder i skonfigurować rozmiary obrazów WordPress. Najpierw przejdź do istniejącej witryny Divi i kliknij „Włącz Visual Builder”.

Kliknij dowolny dodany obraz, aby zmienić jego rozmiar. Otwórz moduł obrazu Divi, klikając ikonę koła.

3. Zmień rozmiar dodanych obrazów w WordPress za pomocą ustawień responsywnych Divi

Dzięki responsywnym ustawieniom Divi zmiana rozmiaru obrazów w WordPress dla różnych urządzeń (komputerów stacjonarnych, tabletów i telefonów komórkowych) jest łatwa. W ustawieniach modułu obrazu przejdź do zakładki „Projekt”. Tutaj odbywa się większość dostosowań, w tym ustawień responsywności. Na karcie Projekt przewiń w dół, aby znaleźć sekcję „Rozmiar”.

Tutaj możesz dostosować wiele wymiarów wybranego obrazu, takich jak:

1. Szerokość
2. Maksymalna szerokość
3. Wyrównanie modułu
4. Minimalna wysokość
5. Wysokość
6. Maksymalna wysokość

UWAGA: Możesz także wymusić pełną szerokość, włączając dostarczoną opcję. Spowoduje to jednak, że szerokość i maksymalna szerokość będą niezmienne.

Obok każdego atrybutu zobaczysz małą ikonę przypominającą smartfon lub tablet (ikona ustawień responsywności). Kliknij tę ikonę, aby włączyć różne ustawienia widoku na komputerze, tablecie i urządzeniu mobilnym.

W tym przypadku maksymalną szerokość wersji tabletowej ustawimy na 85%. Zmniejszona szerokość i wyśrodkowane pozycjonowanie pozwolą zaoszczędzić miejsce na stronie głównej, dzięki czemu obraz będzie bardziej atrakcyjny wizualnie na mniejszych urządzeniach. Kliknij zielony przycisk potwierdzenia, aby zastosować zapisane zmiany.

Funkcjonalność SRCSet

Divi zapewnia natywną obsługę SRCSET dla wszystkich obrazów, dzięki czemu motyw automatycznie reaguje na obrazy. Zapewnia dostarczanie obrazu o odpowiednim rozmiarze do każdego urządzenia, poprawiając prędkość ładowania, udostępniając mniejsze obrazy mniejszym urządzeniom. A co najważniejsze, dzieje się to automatycznie, bez żadnego dodatkowego wysiłku z Twojej strony.

Zdobądź Divi

Inne narzędzia do optymalizacji obrazu

Chociaż responsywne ustawienia Divi oferują świetne rozwiązanie do zmiany rozmiaru obrazów w WordPressie, możesz potrzebować dodatkowych narzędzi optymalizacyjnych, których obecnie brakuje Divi. Oto kilka zewnętrznych narzędzi do optymalizacji obrazu, których możesz użyć:

1. EWWW Image Optimizer: potężna wtyczka WordPress, która automatycznie kompresuje nowe obrazy po przesłaniu i oferuje funkcję Bulk Optimizer dla istniejących multimediów. Umożliwia zmianę rozmiaru obrazu i usuwanie metadanych oraz obsługuje leniwe ładowanie i konwersję do formatu WebP w celu lepszej kompresji. Darmowa wersja działa bezpośrednio na serwerze bez ograniczeń rozmiaru plików, natomiast wersja premium wykorzystuje usługi w chmurze w celu lepszej optymalizacji i wyższych współczynników kompresji.
2. ShortPixel Image Optimizer: ta wtyczka optymalizuje obrazy i pliki PDF, automatycznie zmieniając ich rozmiar. Oferuje elastyczne opcje kompresji – stratną, bezstratną i błyszczącą – zapewniając użytkownikom zrównoważony wybór. Wtyczka tworzy kopie zapasowe oryginalnych obrazów, usuwa metadane i konwertuje pliki PNG na pliki JPEG, optymalizując obrazy i miniatury Retina. Musisz jednak udostępnić swój adres e-mail, aby uzyskać klucz API.
3. Optimole: bezpłatna, wszechstronna wtyczka do optymalizacji obrazu, która przetwarza obrazy w czasie rzeczywistym za pośrednictwem serwera w chmurze. Wyróżnia się wyborem optymalnego rozmiaru obrazu w oparciu o rzutnię odwiedzającego i implementacją leniwego ładowania w celu wydajnego wyświetlania. Aktualizacja do planu premium oferuje nieograniczone konwersje obrazów i zaawansowane funkcje, w tym wysokiej jakości kompresję, która zachowuje oryginalną klarowność przy jednoczesnym zmniejszeniu rozmiaru pliku oraz automatyczne tworzenie wersji Retina i WebP.
4. WP Smush: Ta wtyczka jest częścią pakietu wtyczek WPMU DEV. Automatycznie optymalizuje obrazy po przesłaniu ich do witryny WordPress. WP Smush oferuje opcję optymalizacji zbiorczej, która umożliwia kompresję do 50 obrazów jednocześnie, co ułatwia ulepszanie istniejących multimediów. Wtyczka zawiera również opcje zmiany rozmiaru obrazu i leniwego ładowania, a także można ją skonfigurować tak, aby usuwała metadane z obrazów po przesłaniu. Obsługuje obrazy do 5 MB, ale musisz dokonać aktualizacji do wersji premium, aby zoptymalizować większe pliki.

Niezależnie od podejścia, możesz poprawić wydajność swojej witryny. Optymalizacja obrazów przyczynia się do skrócenia czasu ładowania i lepszego doświadczenia użytkownika.

Wniosek

W 2024 roku stworzenie udanej witryny na WordPressie wykracza poza podstawową funkcjonalność; zapewnienie klientom bezproblemowego i wciągającego doświadczenia jest niezbędne. Optymalizacja rozmiarów obrazów ma kluczowe znaczenie, aby to osiągnąć, ponieważ pomaga zapewnić szybki czas ładowania i atrakcyjny wizualnie układ, który odzwierciedla tożsamość Twojej marki. Korzystając z inteligentnych wtyczek i opcji dostosowywania, możesz zwiększyć wydajność swojej witryny i przekształcić ją w zachęcającą witrynę sklepową, która urzeka odwiedzających.

Jeśli szukasz więcej opcji dostosowywania rozmiaru obrazów za pomocą narzędzia do tworzenia wizualizacji, Divi ułatwia wprowadzanie tych zmian w locie, aby zapewnić, że Twoje obrazy będą wyglądać idealnie na wszystkich urządzeniach.

Zdobądź Divi

Chcesz ulepszyć swoją witrynę WordPress? Odkryj idealne rozmiary obrazów, aby zwiększyć wydajność i atrakcyjność wizualną swojej witryny. Zapoznaj się z naszą wyselekcjonowaną listą narzędzi i wskazówek, które pomogą Ci skutecznie zarządzać rozmiarami obrazów, zapewniając lepszą wygodę użytkowania.