Jak optymalizować obrazy w Elementorze

Zdjęcie może wyglądać na małe w Elementorze, a mimo to wymagać pobrania dużej ilości danych. Edytor steruje wyglądem, natomiast WordPress, hosting i wtyczki optymalizujące wpływają na plik otrzymywany przez odwiedzającego. Ten poradnik wyjaśnia ich współdziałanie na przykładzie widżetów obrazu, teł kontenerów i pierwszego dużego obrazu na stronie.

Dobierz rozdzielczość w widżecie obrazu

Wybierz widżet Image i otwórz kartę Content. Znajdź Image Resolution; w niektórych widżetach lub starszych wersjach ustawienie nazywa się Image Size. Wybiera ono rozmiar WordPressa, np. Medium, Large lub Full. Oddzielne Width i Max Width określają miejsce zajmowane w układzie. Kontrolki opisuje dokumentacja widżetu Image.

Full nie oznacza po prostu „wypełnij kolumnę”. Ustawia jako źródło załącznik w pełnym rozmiarze. Przy dużym pliku WordPress mógł już utworzyć pomniejszoną wersję pełnowymiarową, więc nie zawsze będzie to nietknięty oryginał z aparatu. Wyjaśnia to dokumentacja generowania rozmiarów obrazów w WordPressie.

Wybór zależy również od przeglądarki. Jeśli opublikowany obraz zawiera srcset i sizes, może ona wybrać dostępny plik według układu, gęstości pikseli i własnych zasad ładowania. Full nie gwarantuje więc, że każdy pobierze największy plik. Odpowiednia rozdzielczość widżetu i rozsądne wymiary źródła są jednak lepszą podstawą niż zdanie się wyłącznie na automatykę.

To przykłady, nie wymagania Elementora. Rozmiary zarejestrowane w WordPressie zależą od ustawień, motywu i wtyczek. Wysokość też musi wystarczyć do planowanego kadru. Podwojenie szerokości może pomóc na ekranie o dużej gęstości pikseli, ale jest kompromisem między jakością a wagą, nie zasadą eksportowania wszystkiego w podwójnych wymiarach.

Rozdzielczość Custom bywa przydatna, gdy standardowe rozmiary nie pasują. Sprawdź kadr oraz to, czy opublikowany obraz nadal oferuje odpowiednie wersje responsywne. Custom nie zawsze poprawia dostarczanie i nie musi wyłączać obrazów responsywnych.

Zmiana Style → Width lub Max Width nie zmniejsza ani nie kompresuje zapisanego pliku. Responsywny kod obrazu może pomóc przeglądarce wybrać mniejszą wersję, ale sama mniejsza szerokość na ekranie nie dowodzi ograniczenia pobieranych danych.

Zoptymalizuj tła kontenerów na telefony

Obraz dodany przez Style → Background kontenera lub sekcji zwykle staje się tłem CSS. W przeciwieństwie do obrazu HTML nie ma atrybutów srcset ani sizes. Jeśli inny system nie udostępnia wariantów, telefon może więc pobierać to samo tło co komputer.

Najpierw ustal, czy obraz powinien być tłem. Dekoracyjna tekstura lub zdjęcie budujące nastrój mogą się sprawdzić. Zdjęcie produktu, diagram lub obraz z istotną informacją zwykle lepiej umieścić w widżecie Image, z tekstem alternatywnym i wersjami responsywnymi.

Jeśli tło na telefonie wymaga innej kompozycji:

1. Wybierz kontener lub sekcję i otwórz Style → Background.
2. Przełącz się na mobilny punkt zmiany układu za pomocą responsywnej kontrolki tła, jeśli twój edytor ją oferuje.
3. Wybierz mobilną kopię wykadrowaną do proporcji kontenera. Wysoki obszar główny może potrzebować pionowego kadru, a niski baner nadal poziomego.
4. Wybierz Cover, aby wypełnić obszar bez deformacji. Zachowuje proporcje i odcina części wystające poza kontener.
5. Ustaw pozycję tak, aby temat zdjęcia pozostał widoczny. Sprawdź także szerokości bliskie punktowi zmiany układu.

Na opublikowanej stronie mobilnej sprawdź wysokość kontenera, kontrast tekstu i żądanie obrazu. Inny kadr może poprawić kompozycję, lecz zmniejsza pobieranie tylko wtedy, gdy wersja mobilna rzeczywiście zastępuje większy plik. Ukrycie osobnej sekcji komputerowej nie gwarantuje, że jej obrazy nigdy nie zostaną pobrane.

Ładuj najważniejszy obraz bez zwłoki

Largest Contentful Paint (LCP) mierzy moment pojawienia się największego widocznego elementu treści w początkowym widoku. Może to być obraz główny, tło lub blok tekstu. Zanim zmienisz priorytety, znajdź rzeczywisty element LCP w raporcie wydajności.

Opóźnione ładowanie, czyli lazy loading, pomaga obrazom dalej na stronie. Może jednak opóźnić obraz główny, ponieważ przeglądarka najpierw ustala, kiedy jest potrzebny. Poradnik Google dotyczący optymalizacji LCP zaleca wczesne udostępnienie obrazu LCP i unikanie jego opóźnionego ładowania.

• Zacznij od automatyki Elementora: Włącz Optimized Image Loading w opisanych niżej ustawieniach wydajności, a następnie sprawdź opublikowany wynik.
• Sprawdź inne mechanizmy lazy loading: Wtyczka pamięci podręcznej lub optymalizacji może zmieniać rezultat. Jeśli opóźnia obraz główny, dodaj odpowiedni obraz lub element do jej wyjątków.
• Rozróżniaj natychmiastowe ładowanie i priorytet: Obraz HTML bez lazy loading może rozpocząć ładowanie normalnie. loading="eager" żąda tego wprost, natomiast fetchpriority="high" jest osobną wskazówką priorytetu. Nadanie wysokiego priorytetu wszystkim obrazom odbiera mu sens.
• Sprawdzaj główne tła osobno: Nie korzystają z atrybutów ładowania elementu obrazu. Jeśli tło jest elementem LCP i żądanie rusza późno, sprawdź, kiedy CSS lub skrypt ujawnia jego adres. Samo zmniejszenie wymiarów nie usunie tego opóźnienia.
• Oceń slajdery na początku strony: Jeden statyczny obraz łatwiej uprzywilejować. Jeśli zachowasz slajder, sprawdź, czy ukryte slajdy nie konkurują podczas ładowania z pierwszym widocznym.

Zarezerwuj miejsce przed wczytaniem obrazów

Cumulative Layout Shift (CLS) mierzy nieoczekiwane przesunięcia widocznej treści. Jeśli przeglądarka nie zna potrzebnego miejsca, tekst i przyciski mogą przeskoczyć po pojawieniu się obrazu. Wymiary pomagają zarezerwować przestrzeń.

1. Zachowaj atrybuty szerokości i wysokości: Standardowy kod obrazów WordPressa zwykle je zawiera. Opisują proporcje i mogą współpracować z responsywnym CSS.
2. Określ ramkę obrazu: Dla jednakowo kadrowanych kart rezerwuj miejsce proporcjami lub konkretnymi wymiarami układu. Użyj kontrolek widżetu albo CSS aspect-ratio. Gdy obraz ma wypełnić stałą ramkę, object-fit: cover zachowuje proporcje podczas przycinania.
3. Przetestuj szablony z różną treścią: W Theme Builder lub Loop Grid podglądaj wpisy z poziomym, pionowym i brakującym obrazkiem wyróżniającym. Zapewnij przewidywalny obszar obrazu i w razie potrzeby obraz zastępczy.

Tło CSS nie nadaje kontenerowi naturalnej wysokości. Przestrzeń wynika z układu, treści, odstępów wewnętrznych lub wysokości minimalnej. Sprawdzaj te ustawienia w każdym punkcie zmiany układu, zamiast oczekiwać, że plik tła utrzyma wysokość sekcji.

Sprawdzaj osobno galerie, karuzele i podglądy

Galeria ma pokazywać zwarty przegląd i dostarczać szczegóły po otwarciu zdjęcia. Do tych zadań mogą być potrzebne różne pliki.

• Dobierz rozdzielczość do widocznego slajdu lub karty: Karuzela z czterema małymi zdjęciami nie potrzebuje tej samej rozdzielczości co jeden obraz na całą szerokość. Sprawdź telefon: mniejsza liczba jednoczesnych slajdów może zwiększyć ich szerokość.
• Oddziel miniaturę od powiększenia: Dobierz rozdzielczość siatki, a jeśli odwiedzający potrzebują powiększenia, skonfiguruj odnośniki Media File i Lightbox. Zoptymalizuj również duży plik. Sprawdź żądania przed otwarciem i po nim, bo wstępne pobieranie może się różnić.
• Sprawdź szablon pętli: W kartach archiwum i Loop Grid ustaw Featured Image wewnątrz elementu pętli. Powtarzany zbyt duży obraz może obciążyć całe archiwum mimo małych kart.

Wybierz format odpowiedni do obrazu

Porównuj formaty przy tych samych wymiarach i jakości, którą rzeczywiście opublikujesz. Nie ma stałego procentu oszczędności dla wszystkich obrazów.

• WebP: Dobry punkt wyjścia dla zdjęć i wielu ilustracji. Obsługuje kompresję stratną, bezstratną i przezroczystość. Wypróbuj JPG na WebP lub PNG na WebP, a potem sprawdź drobne szczegóły i krawędzie.
• JPG: Praktyczny dla zdjęć, jeśli wymaga go inny etap pracy. Dobieraj jakość przez porównanie, zamiast traktować jedną wartość procentową jako uniwersalną.
• PNG: Przydatny do grafiki bezstratnej, zrzutów ekranu i procesów, które go wymagają. Sama przezroczystość nie uzasadnia PNG zamiast WebP. Zdjęcia PNG są często znacznie cięższe od odpowiednich eksportów stratnych.
• AVIF: Warto porównać dla zdjęć, jeśli wspierają go WordPress, hosting i system optymalizacji. Zanim przekonwertujesz całą bibliotekę, sprawdź przetwarzanie po przesłaniu i dostarczanie opublikowanych plików.
• SVG: Odpowiedni dla wektorowych logo i ikon. Korzystaj z zaufanych źródeł i przestrzegaj wskazówek Elementora dotyczących przesyłania SVG, w tym oczyszczania plików i środków ostrożności.

Nasz poradnik o formatach obrazów do internetu dokładniej wyjaśnia zalety i kompromisy.

Przygotuj każdy obraz do jego miejsca

Przechowuj oryginał osobno i wyeksportuj kopię na stronę. Dzięki temu także pełny plik zachowa rozsądny rozmiar, co jest ważne dla teł i zdjęć otwieranych z galerii.

1. Zmierz największy planowany rozmiar wyświetlania: Sprawdź komputer i telefon. Obraz obok tekstu może na tablecie zajmować cały wiersz i być szerszy.
2. Kadruj do układu: Usuń niepotrzebną przestrzeń narzędziem kadrowania, zachowując temat zdjęcia. Zostaw miejsce na ewentualny tekst na obrazie.
3. Zmień wymiary kopii: Porównaj odpowiednie rozmiary narzędziem zmiany wymiarów. Nie powiększaj małego źródła tylko po to, by osiągnąć ustaloną szerokość.
4. Skompresuj i sprawdź: Użyj kompresora obrazów i porównaj wynik w docelowym rozmiarze. Obraz główny 100–200 KB lub ilustracja poniżej 100 KB mogą być punktem wyjścia. Rozsądny limit zależy od szczegółów, wymiarów i całkowitej wagi strony.
5. Nadaj nazwę i opis: Użyj opisowej nazwy, np. office-reception.webp. Dodaj tekst alternatywny wyjaśniający rolę ważnego obrazu; obrazy dekoracyjne zwykle wymagają pustego tekstu alternatywnego. Stosuj wskazówki Google dotyczące SEO obrazów bez wypełniania pól listami słów kluczowych.

Jeśli wtyczka ponownie optymalizuje przesłany plik, porównaj końcowy obraz dostarczony odbiorcy. Wielokrotna kompresja stratna może uszkodzić drobne tekstury i tekst, nawet gdy każde osobne ustawienie wygląda rozsądnie.

Sprawdź ustawienia wydajności obrazów

Według aktualnej dokumentacji Elementora znajdziesz je w panelu WordPressa pod Elementor → Editor → Settings → Performance. Starsze instalacje mogą mieć inne menu. Oficjalny poradnik ustawień wydajności odróżnia karty Performance i Features.

• Optimized Image Loading: Pomaga nadać priorytet prawdopodobnemu obrazowi LCP i zarządza opóźnionym ładowaniem niżej. Zobacz poradnik Elementora o optymalizacji ładowania. Sprawdź wynik, zwłaszcza gdy inne wtyczki również modyfikują kod obrazów.
• Lazy Load Background Images: Według dokumentacji opóźnia tła z wyjątkiem pierwszego. Sprawdź, czy tło widoczne na początku twojej rzeczywistej strony ładuje się na czas.

Wprowadzaj zmiany pojedynczo, czyść odpowiednie pamięci podręczne i testuj opublikowaną stronę. Ustawienia zmieniają zachowanie ładowania, ale nie zastępują właściwych wymiarów ani kompresji plików.

Sprawdź opublikowaną stronę

Zacznij od wyglądu po wylogowaniu: czy kadr jest poprawny, tekst czytelny, a układ stabilny podczas pojawiania się obrazów? Zbadaj pobieranie dokładniej, jeśli obraz nadal jest ciężki, nieostry lub powolny.

1. Otwórz stronę w oknie prywatnym. W narzędziach deweloperskich wybierz Network, filtr Img i włącz Disable cache przy otwartych narzędziach.
2. Odśwież i posortuj żądania obrazów według przesłanego rozmiaru. Zacznij od największych plików i obrazów widocznych od razu.
3. Sprawdź URL i podgląd żądania, aby ustalić rzeczywiste wymiary. Porównaj je z wyświetlaniem i gęstością pikseli. Plik 2400 pikseli w karcie 350 pikseli warto zbadać; 700 pikseli może być właściwe dla ekranu 2×.
4. Dla obrazu HTML sprawdź srcset i sizes, jeśli przeglądarka stale wybiera za dużą wersję. Atrybuty ładowania i priorytetu sprawdzaj na właściwym elemencie <img>, nie tylko w otaczającym widżecie.
5. Przed kolejnym odświeżeniem włącz emulację telefonu i sprawdź pobierane warianty teł oraz obrazów. Potwierdź wygląd także na prawdziwym telefonie.

Uruchom PageSpeed Insights przed zmianą i po niej w porównywalnych warunkach. Patrz na element LCP i uwagi o obrazach, nie tylko łączny wynik. Mały obraz główny rozpoczynający pobieranie późno ma inny problem niż duży plik żądany natychmiast.

Jeśli pozostaje stary obraz, sprawdź najpierw wybór pliku i ustawienia punktów zmiany układu. Następnie wyczyść odpowiednie pamięci podręczne strony, optymalizacji i CDN. Gdy stary URL pochodzi z CSS Elementora, odtwórz pliki lub CSS w Tools; nazwa funkcji zależy od wersji. Odtworzenie CSS nie generuje brakujących rozmiarów miniatur WordPressa.

Przykład: obraz obok kolumny tekstu

Załóżmy, że zdjęcie zespołu ma początkowo 4800 × 3200 pikseli i 5,4 MB. Kolumna na komputerze ma około 550 pikseli, ale na tablecie obraz zajmuje cały wiersz.

1. Sprawdź najszersze miejsce: Jeśli na tablecie obraz osiąga około 700 pikseli, użyj tej szerokości do porównań zamiast opierać się wyłącznie na węższej kolumnie komputerowej.
2. Przygotuj kadr i wymiary: Jeśli proporcje 4:3 pasują do kompozycji, porównaj 1000 × 750 i 1400 × 1050 pikseli. Oceń twarze i ważne szczegóły przy docelowej wielkości.
3. Porównaj kompresję: Wypróbuj WebP ze średnią jakością i oceń wynik. Zapisz rzeczywisty rozmiar: szczegółowe zdjęcie grupowe może potrzebować więcej danych niż prosty portret tych samych wymiarów.
4. Skonfiguruj widżet: Prześlij wybrany eksport, dodaj tekst alternatywny i dobierz Image Resolution. Przy pliku 1400 pikseli może być potrzebne Full, aby udostępnić większy wariant. Sprawdź wersje responsywne oferowane przez stronę.
5. Zweryfikuj wynik: Sprawdź żądania na komputerze i telefonie, ostrość oraz stabilność. Niżej na stronie lazy loading może być właściwe; jako obraz LCP zdjęcie powinno ładować się szybko.

Rozwiąż typowe problemy z obrazami

Dlaczego obraz jest nieostry?

Sprawdź Image Resolution, wymiary źródła i plik wybrany przez przeglądarkę. Miniatura 300 pikseli rozciągnięta do 600 będzie rozmyta, lecz wyższa rozdzielczość nie odzyska szczegółów nieobecnych w oryginale. Sprawdź także kompresję i kadry powiększające mały fragment. Zobacz nasz poradnik o nieostrych obrazach na stronach.

Dlaczego tło mobilne znika lub jest źle wykadrowane?

Sprawdź obraz przypisany do mobilnego punktu zmiany układu, odziedziczone ustawienia, widoczność i wysokość kontenera. Cover wypełnia przez przycinanie; jeśli znika temat zdjęcia, zmień pozycję lub kadr. Proporcje nie powinny się deformować. Jeśli plik w ogóle się nie ładuje, najpierw poszukaj błędu żądania.

Dlaczego zmiany nie pojawiają się na działającej stronie?

Upewnij się, że zmieniono właściwy widżet, szablon i punkt zmiany układu. URL opublikowanego obrazu pomaga odróżnić stary plik od starych stylów. Wyczyść odpowiednie pamięci podręczne i odtwórz CSS, jeśli nadal odwołuje się do poprzedniego tła. Powtarzane przesyłanie bez znalezienia przyczyny może tworzyć zbędne kopie.

Najczęstsze pytania

Czy zawsze unikać Full?

Nie. Full może pasować do pliku przygotowanego do danego miejsca. Sprawdzaj wymiary źródła, warianty responsywne i pobierany plik. Full nie służy do wypełniania kolumny; od tego są ustawienia układu.

Czy Elementor automatycznie kompresuje przesłane obrazy?

Kontrolki rozdzielczości i ładowania kreatora nie kompresują przesłanego pliku. WordPress tworzy rozmiary i stosuje jakość właściwą formatom, ale nie gwarantuje zoptymalizowanej biblioteki. Elementor oferuje także osobny produkt Image Optimizer; hosting lub wtyczki mogą przetwarzać obrazy podobnie. Sprawdź aktywny system przed dodaniem następnego.

Czy można przesyłać WebP bezpośrednio?

WordPress obsługuje przesyłanie WebP. Hosting potrzebuje zgodnego przetwarzania obrazów, aby tworzyć mniejsze warianty. Przetestuj więc jeden plik od przesłania przez wybór w widżecie po publikację, zanim przekonwertujesz całą bibliotekę.

Jakie wymiary dobrać do głównego obrazu?

Kieruj się największym rozmiarem wyświetlania i kadrem. Szerokość 1600–1920 pikseli jest rozsądnym początkiem porównań dla wielu układów komputerowych, ale nie limitem Elementora ani gwarancją ostrości na każdym ekranie. Sprawdź potrzebę osobnego kadru mobilnego i porównuj wagę ze szczegółami.

Czy optymalizacja obrazów poprawi pozycję w Google?

Może poprawić ładowanie i wygodę strony, ale nie gwarantuje wyższych pozycji. Wskazówki Google dotyczące jakości strony wyjaśniają, że Core Web Vitals są wykorzystywane przez systemy rankingowe, lecz dobre wyniki same nie zapewniają czołowych miejsc. Trafne obrazy, opisowe nazwy i przydatne teksty alternatywne pomagają też zrozumieć treść. Zobacz nasz poradnik o tekstach alternatywnych i nazwach plików.