Obrazy w PrestaShop: formaty, podpisy, lazy loading i naprawa

Co zrobilibyśmy na Twoim miejscu

Zmierzylibyśmy działanie wolnej strony przed wyborem konwertera lub zmianą wszystkich typów obrazów. Sposób działania zależy od zainstalowanego wydania PrestaShop, kompilacji PHP, motywu, istniejących modułów obrazów i pamięci podręcznej, CDN, oryginalnych obrazów katalogowych i integracji importowych. Sprawdź, które języki i rynki wymagają opisów oraz kto będzie je utrzymywał po zmianach produktów.

Do zmian generowania obrazów lub szablonów użyj kopii w środowisku testowym z własnymi plikami obrazów i odizolowanymi integracjami produkcyjnymi. Przećwicz zmianę na reprezentatywnych produktach, uwzględniając powiększanie, kombinacje i układy mobilne. Zachowaj dostęp do poprzednich szablonów, ustawień i wygenerowanych plików, a następnie zaplanuj przełączenie działającego sklepu z wyznaczoną osobą sprawdzającą wyniki i przetestowanym sposobem powrotu. Kopia współdzieląca pliki obrazów ze sklepem produkcyjnym nie jest bezpiecznym miejscem prób usuwania ani regeneracji.

Jeśli chcesz zlecić diagnozę wąskiego gardła, usługa PrestaShop Speed & Core Web Vitals Audit zapewnia oparty na pomiarach plan poprawek według priorytetów, z osobno ustalanym zakresem wdrożenia.

Wybierz pierwszą poprawkę na podstawie dowodów

Sprawdź typy obrazów i faktyczne pobieranie

Otwórz Wygląd > Ustawienia zdjęć. Starsze instalacje PrestaShop 1.6 używają Preferencje > Zdjęcia. Typy obrazów definiują generowane rozmiary używane przez motywy i moduły; ich nazwy nie gwarantują identycznych wymiarów w różnych sklepach.

Sprawdź w przeglądarce stronę główną, rozbudowaną kategorię i galerię produktu. Ustal największe pobierane pliki, faktyczny rozmiar wyświetlania, naturalne wymiary, wybrane źródło i prawdopodobny obraz LCP. Obrazy mogą dominować na stronie, ale nie zakładaj stałego udziału w wielkości transferu.

Obraz o szerokości 1200 px w polu CSS 300 px ma cztery razy większą szerokość, niekoniecznie cztery razy więcej bajtów. Przy tych samych proporcjach ma szesnaście razy większą powierzchnię pikseli. Ważny jest też współczynnik pikseli urządzenia: pole 300 pikseli CSS na ekranie 2x może używać około 600 pikseli źródła. Porównuj rozmiary zakodowanych plików i widoczną jakość.

• Zachowuj oryginały wystarczająco duże dla największej galerii lub powiększenia, bez zbędnych megapikseli.
• Porównaj typy koszyka, listy, galerii, kategorii i banerów z ich rzeczywistymi polami.
• Generuj rzeczywisty większy typ, gdy wymaga go powiększenie lub ekran o dużej gęstości.
• Zachowaj kopię oryginałów przed destrukcyjną regeneracją lub zmianą rozmiaru.

Kompresuj i oceniaj wizualnie osobno fotografie i grafiki z przezroczystością. Narzędzia takie jak Squoosh pomagają porównywać wyniki, ale żadna stała wartość jakości nie jest dobra dla każdego obrazu. Nie kompresuj wielokrotnie jedynego oryginału.

Prześledź zbyt duże obrazy na liście mobilnej

Załóżmy, że karta portfela zajmuje 300 pikseli CSS na ekranie 2x, ale narzędzia sieciowe pokazują źródło o szerokości 1200 px. Porównaj rzeczywistą kopię 600 px z obecnym plikiem przy tym samym kadrze. Jeśli wygląda poprawnie, dodaj ją jako źródło do wyboru i sprawdź wybrane źródło po ponownym wejściu na stronę. Jeśli przeglądarka nadal wybiera większy plik, sprawdź sizes względem rzeczywistego układu karty, zanim obniżysz jakość kompresji. Osobno sprawdź komputer i powiększenie, aby poprawka listy nie ograniczyła szczegółów galerii.

Sprawdź obsługę formatów i dostarczanie

PrestaShop 1.7.8 nie zapewnia obecnego wbudowanego procesu generowania WebP/AVIF. PrestaShop 8.0 dodał generowanie WebP. PrestaShop 8.1 wprowadził AVIF i generowanie wielu formatów jako funkcje eksperymentalne; AVIF nie pojawił się po raz pierwszy w PrestaShop 9. Zobacz zapowiedź 8.1.

W obsługiwanych wersjach sprawdź formaty i jakość generowania obrazów w Ustawieniach zdjęć. Wbudowane kodowanie w PrestaShop 9.1 w klasie ImageManager wywołuje funkcje GD imagewebp() i imageavif(). Sama obsługa Imagick nie spełnia wymagań tej ścieżki kodu. Sprawdź środowisko PHP faktycznie wykonujące regenerację:

php -r '$gd = extension_loaded("gd") ? gd_info() : [];
var_export([
  "gd" => extension_loaded("gd"),
  "webp" => function_exists("imagewebp")
    && !empty($gd["WebP Support"]),
  "avif" => function_exists("imageavif")
    && !empty($gd["AVIF Support"])
]); echo PHP_EOL;'

Sprawdź obsługę formatów GD i funkcje kodujące, a następnie wygeneruj i obejrzyj rzeczywistą próbkę. CLI i web/FPM mogą używać różnych konfiguracji. Zweryfikuj obie, jeśli przesyłanie działa przez przeglądarkę, a regeneracja przez CLI.

1. Włącz formaty obsługiwane przez dokładnie Twoje wydanie i kompilację GD.
2. Wygeneruj małą, reprezentatywną próbkę i sprawdź przezroczystość, kolor oraz szczegóły.
3. Sprawdź wyrenderowane URL-e obrazów lub źródła picture, typy treści odpowiedzi i faktycznie pobrane pliki.
4. Przetestuj działanie rozwiązania zastępczego w używanym systemie dostarczania.
5. Zregeneruj istniejące miniatury i wyczyść odpowiednie warstwy pamięci podręcznej HTML/obrazów.

Nie zakładaj, że wszystkie wbudowane procesy używają negocjacji nagłówka Accept. Szablon może żądać konkretnego formatu lub używać picture; serwer lub moduł może negocjować inną odpowiedź. Jeśli odpowiedzi różnią się według Accept, skonfiguruj prawidłowe różnicowanie pamięci podręcznej, aby współdzielona pamięć nie zwracała niewłaściwej reprezentacji.

Performance Revolution obejmuje konwersję obrazów, jeśli spełnione są wymagania jego enkoderów; zobacz pomoc Performance Revolution. Sprawdź wygenerowane pliki, działanie pamięci podręcznej, powiększanie, slidery i dostarczanie przez CDN. Założenia o rozszerzeniu .jpg zapisane na stałe mogą skutkować odwołaniami do brakujących plików.

Pisz dokładne podpisy obrazów i teksty alt

Podpisy lub opisy zdjęć produktów są zapisywane dla obrazu i języka w image_lang.legend. Edytuj je w obszarze Zdjęcia produktu. Wbudowany prezenter może zastąpić brakujący podpis nazwą produktu lub tytułem meta, a motyw decyduje, jak staje się on atrybutem alt.

Pusty podpis nie oznacza więc automatycznie pustego tekstu alt. Sprawdź wyrenderowany HTML. Ogólne powtarzane nazwy produktów można poprawić, ale różnią się od brakujących atrybutów.

Opisuj to, co obraz rzeczywiście przedstawia i dlaczego ma to znaczenie w danym kontekście. W razie potrzeby rozróżniaj ujęcia, tłumacz tekst i nie wymyślaj materiałów ani cech. Dla obrazów dekoracyjnych zachowuj odpowiednio pusty opis, zamiast wypełniać każdy obraz tekstem sprzedażowym.

Dbaj o przydatne opisy w dużym katalogu

Wykorzystaj dane katalogowe jako punkt wyjścia, a następnie dopracuj opisy zdjęć ważnych produktów tam, gdzie fotografia wnosi informacje, których nie przekazuje nazwa produktu. Wzorzec nie odróżni wiarygodnie otwartego portfela od jego pudełka prezentowego, jeśli takich informacji nie ma w wykorzystywanych danych. Przed zastosowaniem szerokiej reguły sprawdź produkt z kilkoma ujęciami, zdjęcie konkretnej kombinacji i każdy język sprzedaży. Przypisz odpowiedzialność za obrazy importowane i nowo przesyłane, aby te same braki nie powracały.

Automatic SEO Images Alt Tags generuje tekst z danych katalogowych podczas wyświetlania; zobacz pomoc Automatic SEO Images Alt Tags. Domyślne działanie obejmujące tylko puste wartości może pozostawić bez zmian podpisy zastępcze już uzupełnione przez rdzeń. Sprawdź rzeczywisty wynik, zanim zdecydujesz, czy zastąpienie takiego podpisu go poprawi, i zachowuj lepsze opisy ręczne.

Wyświetlaj rzeczywiste pliki responsywne i rezerwuj ich miejsce

W Classic zacznij od catalog/_partials/product-cover-thumbnails.tpl dla galerii i catalog/_partials/miniatures/product.tpl dla kart na listach. Przed edycją sprawdź dołączane szablony aktywnego motywu i dane. Utrzymuj zmiany w motywie potomnym lub obsługiwanym rozszerzeniu.

Używaj różnych wygenerowanych plików i ich rzeczywistych szerokości plików w srcset. Nigdy nie podawaj tego samego dużego pliku jako 600w i 1200w. Ten przykład używa wymiarów prezentera zamiast zakładać znaczenie nazw typów obrazów:

<img
  src="{$product.default_image.bySize.large_default.url|escape:'htmlall':'UTF-8'}"
  srcset="{$product.default_image.bySize.medium_default.url|escape:'htmlall':'UTF-8'} {$product.default_image.bySize.medium_default.width|intval}w,
          {$product.default_image.bySize.large_default.url|escape:'htmlall':'UTF-8'} {$product.default_image.bySize.large_default.width|intval}w"
  sizes="(max-width: 768px) 100vw, 600px"
  width="{$product.default_image.bySize.large_default.width|intval}"
  height="{$product.default_image.bySize.large_default.height|intval}"
  alt="{$product.default_image.legend|escape:'htmlall':'UTF-8'}"
  loading="eager"
  fetchpriority="high">

Ten przykład galerii używa product.default_image; karty na listach zwykle używają product.cover. Stosuj go tylko tam, gdzie oba typy istnieją, mają różne szerokości i zgodne kadry. Zastąp przykładowe wartości sizes rzeczywistym układem pola. Dla większego źródła dodaj rzeczywisty wygenerowany typ z własnym URL-em i szerokością.

Szerokość i wysokość pozwalają przeglądarce zarezerwować proporcje. Responsywny CSS nadal może używać max-width: 100% i height: auto. Inną opcją jest świadomie zarezerwowany współczynnik proporcji. Sprawdź kadry dopasowane do projektu i kontenery, aby zarezerwowany kształt pasował do wyświetlanego.

fetchpriority="high" może zwiększyć względny priorytet pobierania obrazu. Nie gwarantuje pobrania przed każdym arkuszem stylów lub skryptem. Zarezerwuj go dla prawdopodobnego obrazu krytycznego, zamiast oznaczać całą siatkę wysokim priorytetem. Zobacz dokumentację elementu obrazu.

Stosuj lazy loading zależnie od widoczności

Natywny atrybut loading="lazy" obrazu pozwala przeglądarce odroczyć pobieranie zasobu poza ekranem. Przeglądarka dobiera próg odległości. Działa to z obrazami responsywnymi i dynamicznie dodawanymi elementami img, jeśli mają atrybut i źródło. Biblioteka JavaScript może osobno wymagać inicjalizacji dodanej treści.

• Ładuj od razu początkowy widoczny obraz główny, logo i widoczne zdjęcia produktów.
• Ładuj leniwie obrazy list, produktów powiązanych i treści poza ekranem, tam gdzie to właściwe.
• Ustalaj widoczny wiersz według rzeczywistego obszaru widoku i układu; nie ma stałej liczby właściwej dla każdego ekranu.
• Zachowuj wymiary obrazów i użyteczny URL źródła.

Obraz LCP powinien być wcześnie wykrywalny. Zastosowanie do niego lazy loading może opóźnić widoczną treść. Mniej równoczesnych pobrań obrazów nie gwarantuje lepszego INP: trzeba też mierzyć dekodowanie, renderowanie i pracę JavaScript.

Lazy loading obrazów i iframe ma różną historię obsługi w przeglądarkach. Firefox 121 dodał lazy loading iframe. Sprawdź aktualne tabele zgodności dla obsługiwanych przeglądarek; zobacz informacje o Firefox oraz zgodność ładowania mediów.

Dla teł obserwuj elementy blisko obszaru widoku, zastosuj zaufane źródło obrazu w razie potrzeby, a następnie przestań obserwować załadowany element. Dla zastępczej obsługi wideo opóźnij przypisanie źródeł, wywołaj właściwą metodę ładowania mediów i zachowaj sterowanie użytkownika. Unikaj odraczania widocznych mediów głównych. To wybory implementacyjne, a nie automatyczny powód instalacji modułu.

Zapisany HTML stron CMS lub opisów może zawierać ręcznie dodane atrybuty ładowania, jeśli edytor je zachowuje. Innym sposobem ich utrzymania jest edytor, filtr treści lub moduł. Automatic SEO Images Lazy Tags wzbogaca dane obrazów produktów i filtruje obsługiwaną treść HTML, udostępniając opcjonalne ustawienie decoding="async". Szablony produktów muszą korzystać z dostarczonych kluczy. Dekodowanie jest niezależne od momentu pobierania, więc to ustawienie nie zastępuje reguł eager/lazy. Nie rozpoznaje też automatycznie wszystkich obrazów głównych wymagających wykluczenia. Zobacz pomoc Automatic SEO Images Lazy Tags. Zanim uznasz, że moduł zmienił stronę, sprawdź atrybuty po renderowaniu i wyczyszczeniu pamięci podręcznej.

Przed dodaniem kolejnej reguły sprawdź, czy motyw, slider lub inny moduł optymalizacji już zmieniają ładowanie obrazów. Po filtrowaniu, zmianie strony listy lub kombinacji sprawdź atrybuty nowo wyrenderowanych obrazów i obserwuj żądane pliki. Poprawna strona początkowa nie dowodzi, że podmieniana treść działa. Sprawdź też szybki podgląd i powiększenie galerii: działająca miniatura może maskować brak źródła pełnego rozmiaru.

Regeneruj miniatury poleceniem właściwym dla wersji

Regeneruj po zmianie wymiarów typów obrazów, formatów lub wymagań motywu oraz przy brakujących miniaturach. Potrzebujesz nienaruszonych oryginałów; przebudowa nie odzyska oryginału, którego nigdy nie skopiowano.

1. Wykonaj kopię oryginalnych obrazów i właściwych ustawień.
2. Potwierdź dostępne miejsce, obsługę PHP/GD, właściciela plików i wybrany sklep/typ.
3. Użyj Wygląd > Ustawienia zdjęć > Regeneruj miniatury do kontrolowanego testu.
4. Wybierz wymagany obszar obrazów i typy. Zrozum opcje usuwania przed usunięciem starych miniatur.
5. Sprawdź nowe pliki i URL-e w sklepie, następnie przetwórz resztę obrazów.

Planuj regenerację w przeglądarce według liczby obrazów, wymiarów źródeł, formatów, pamięci i limitów czasu. CLI omija limit żądania HTTP, ale nadal ma własne limity pamięci, uprawnień i czasu wykonania.

Polecenie konsoli PrestaShop 9.1 wymaga argumentu obszaru obrazów. Z katalogu głównego sklepu:

php bin/console prestashop:thumbnails:regenerate --help
php bin/console prestashop:thumbnails:regenerate products
# For every supported image domain:
php bin/console prestashop:thumbnails:regenerate all

Uruchamiaj właściwą wersją PHP i użytkownikiem tworzącym pliki czytelne dla procesu WWW. Planuj ciężkie prace przy dostępnych zasobach i sprawdzaj kod zakończenia oraz błędy. Nie polecaj tego dokładnego polecenia dla wersji, w których go nie ma; sprawdź ich obsługiwane narzędzia regeneracji.

Przećwicz regenerację i przełączenie sklepu

1. Zapisz obecne typy obrazów, formaty, jakość, zmiany motywu i reguły pamięci podręcznej. Wybierz przykłady z przezroczystością, drobnymi szczegółami, kilkoma ujęciami i zdjęciami konkretnych kombinacji.
2. W środowisku testowym wygeneruj uzgodnione typy i prześledź każdą próbkę od przesłania lub importu po odpowiedź witryny sklepu. Sprawdź ścieżkę importu oraz ręczne przesłanie: mogą korzystać z innego przetwarzania.
3. Uzgodnij sposób obsługi obrazów dodanych podczas próby. Zastosuj przetestowane ustawienia i pliki bez zastępowania bazy działającego sklepu starszą kopią ze środowiska testowego.
4. Zaplanuj generowanie i zmiany szablonów tak, aby każdy adres URL żądany przez witrynę sklepu miał działający plik lub przetestowane rozwiązanie zastępcze. Zachowaj stare kopie do zaliczenia kontroli; jeśli proces się zatrzyma, sprawdź błędy i obsługiwane opcje wznowienia, zanim zdecydujesz o usuwaniu i przebudowie.
5. Po przełączeniu sprawdź obecne i nowo przesłane produkty przez publiczną ścieżkę dostarczania. Zapisz, co przywrócić w razie błędu generowania, powiększania lub dostarczania obrazów.

Diagnozuj brakujące obrazy po zmianie serwera

1. Sprawdź błędny URL, status i typ odpowiedzi w narzędziach sieciowych.
2. Jeśli wskazuje stary host, sprawdź ustawienia URL sklepu w Ruch & SEO, domenę SSL i bazowy URI we właściwym kontekście sklepu.
3. Jeśli host jest poprawny, sprawdź istnienie oryginału i żądanej miniatury w oczekiwanym drzewie obrazów.
4. Sprawdź reguły przepisywania serwera WWW i czytelność plików przed regenerowaniem wszystkiego.
5. Sprawdź prawa zapisu użytkownika wykonującego regenerację. Kontrola uprawnień użytkownika powłoki nie jest kontrolą użytkownika WWW.
6. Zmień serwery źródłowe CDN/reverse proxy i wyczyść odpowiednie pamięci podręczne. Usuń niespójności HTTP/HTTPS.
7. Regeneruj tylko brakujące lub niezgodne miniatury, gdy oryginały i konfiguracja są prawidłowe.

image_url='https://example.com/1-home_default/product.jpg'
curl -sI "$image_url"
find img/p -type f -name '*.jpg' -print | head

To przykładowy URL; użyj adresu skopiowanego z błędnej strony. Odpowiedź 200 zawierająca HTML nie jest poprawnym obrazem. Nie nadawaj rekurencyjnie prawa zapisu do całego sklepu, aby rozwiązać problem właściciela jednego katalogu.

Sprawdź wykrywanie obrazów i zmierz wynik

Sprawdź, czy obraz i jego strona docelowa są wykrywalne i dostępne do pobrania, czy reguły robots nie blokują wymaganych zasobów i czy strona kwalifikuje się do indeksacji. Stosuj przydatny tekst otaczający, odpowiedni tekst alt i wystarczającą jakość obrazu.

Mapa obrazów może pomóc w wykrywaniu, ale nie gwarantuje indeksacji. Uwzględniaj poprawne lokalizacje obrazów w przestrzeni nazw image. To przykład struktury; zastąp oba URL-e rzeczywistymi dostępnymi zasobami:

<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
        xmlns:image="http://www.google.com/schemas/sitemap-image/1.1">
  <url>
    <loc>https://example.com/navy-wallet</loc>
    <image:image>
      <image:loc>https://example.com/img/p/1/1-large_default.webp</image:loc>
    </image:image>
  </url>
</urlset>

Nie polegaj na wycofanych polach tytułu i podpisu obrazu w sitemapie. Stosuj wytyczne Google dotyczące obrazów. Advanced SEO Sitemap Builder może generować wpisy obrazów katalogowych; zobacz pomoc Advanced SEO Sitemap Builder.

Przetestuj stronę główną, rozbudowaną kategorię i stronę produktu na urządzeniu mobilnym i komputerze w PageSpeed Insights. Używaj narzędzi przeglądarki do kontrolowanych pomiarów z pustą i zapełnioną pamięcią podręczną, wykrywania widocznych obrazów, pobierania zasobów poniżej ekranu, przewijania, powiększania i responsywnego wyboru źródła. Monitoruj trendy danych rzeczywistych użytkowników w raporcie Podstawowe wskaźniki internetowe w Search Console. Obecne wersje Lighthouse grupują diagnostykę dostarczania obrazów i LCP jako statystyki; stare nazwy audytów mogą różnić się od widocznego interfejsu.

Zachowaj porównywalne wyniki przed zmianą i po niej

Powtarzaj pomiary w tych samych warunkach, zamiast wybierać najlepszy przebieg. Jeśli liczba bajtów spada, ale LCP się nie poprawia, prześledź odpowiedź serwera, wykrywanie zasobów i renderowanie, zanim przekonwertujesz kolejne pliki. Gdy obrazy nie wyjaśniają opóźnienia, skorzystaj z poradnika wydajności PrestaShop.

Oddziel diagnostykę laboratoryjną od pomiarów rzeczywistych użytkowników. Core Web Vitals ocenia 75. percentyl, a nie prostą średnią. Dane rzeczywiste CrUX API i PageSpeed Insights używają kroczącego okna 28 dni, więc wdrożenie nie zastępuje od razu wszystkich historycznych obserwacji. Analizuj segmenty urządzeń i porównywalne strony, następnie mierz faktyczne zmiany LCP, CLS i INP. Zobacz wytyczne Web Vitals.

O co zapytać programistę lub agencję

• Które szablony, typy obrazów i moduły sterują galerią, listami i obrazami w opisach tego sklepu?
• Jakie dokładnie wydanie i środowiska PHP sprawdzono oraz czy można pokazać wygenerowaną próbkę obok jej publicznej odpowiedzi?
• Który komponent odpowiada za konwersję, atrybuty ładowania i unieważnianie pamięci podręcznej oraz co dzieje się po zmianie filtra lub kombinacji?
• Gdzie przechowywane są kopie oryginałów i poprzednich ustawień oraz jak obrazy przesłane podczas prac trafią do ostatecznej konfiguracji?
• Czy można pokazać porównywalne pomiary, kontrole wizualne i przećwiczone kroki przełączenia oraz przywracania?

Pytania właścicieli sklepów

Czy muszę aktualizować cały sklep tylko po to, by dostarczać WebP?

Sprawdź sekcję formatów dla swojego wydania. Starszy sklep może korzystać ze zgodnego procesu konwersji lub obsługi po stronie serwera; sens takiego rozwiązania zależy od stanu utrzymania sklepu i konfiguracji dostarczania. Przećwicz wybraną ścieżkę, zanim zdecydujesz się na szerszą zmianę.

Czy potrzebuję osobnego modułu do każdego zadania z obrazami?

Sprawdź, co już zapewniają motyw i zainstalowane moduły. Podpisy, reguły ładowania, konwersja i wykrywanie przez sitemapę rozwiązują różne problemy; dodawaj narzędzie tylko wtedy, gdy potrafisz wykazać konkretny brak.

Dlaczego nowo przesłane zdjęcie działa, a starsze nie?

Porównaj żądane typy i formaty obu grup. Nowe ustawienia generowania mogą pozostawić brakujące pliki pochodne starszych zdjęć, ale brak oryginału lub niepełną migrację trzeba naprawić, zanim regeneracja będzie mogła pomóc.

Czy mogę usunąć oryginały, gdy istnieją już mniejsze kopie?

Zachowaj oryginały w formie umożliwiającej ich odzyskanie. Inny motyw, kadr lub wymagania powiększenia mogą ich potrzebować, a skompresowana miniatura nie odtworzy oryginalnych szczegółów.

Czy lepszy tekst alt przyspieszy stronę lub zagwarantuje ruch z wyszukiwarki obrazów?

Tekst alt dostarcza kontekst; nie zmniejsza ilości pobieranych danych obrazu. Osobno mierz dostarczanie i oceniaj wykrywanie za pomocą powyższych kontroli, bez obiecywania indeksacji ani ruchu.