WEBP vs Google Images

[djbit]

Cześć,

czytając artykuły na wielu stronach o znakomitym formacie webp, zaleceniami ze strony PageSpeed Insights postanowiłem przerobić swoją stronę i przekonwertować zdjęcia na format webp. 

Wszystkie zdjęcia ustawiłem na sztywno z formatem webp, a w zamian Google nie indeksuje tych zdjęć... Wcześniej miałem jpg i zdjęcia były w Google Images - teraz ich brak mimo upływu kilku miesięcy. 

 

Z tego co dziś poczytałem to zalecane jest umieszczenie zdjęć w obu formatach (jpg i webp) w tagu <picture>.

Wydawało mi się, że jesteśmy na takim etapie, że wszystkie normalne przeglądarki obsługują WEBP i nie powinno być już problemów.

 

Google walczy z szybkością ładowania, z wielkościami plików, z emisją CO2, a wymaga obu formatów?

 

Macie jakieś doświadczenia z formatem WEBP? Jak temu zaradzić bez wprowadzania dodatkowych obrazów (jpg)?

Edytowane 24 Listopada 2021 przez djbit

[blazejs]

Az musialem sobie sprawdzic czy tak jest rzeczywiscie, bo do glowy by mi nie przyszlo ze moze webp nie indeksowac. I faktycznie. U mnie tez webp nie indeksuje, ale ja akurat mam obie wersje w <picture> wiec jpegi sa. Jesli nie chce ci sie bawic w oba formaty, a masz mozliwosc recznego ustawienia co sie bedzie wyswietlac (tak zeby CMS ci nie pozmienial) to zainteresuj sie mozjpeg. Z moich testow wynika, ze jakosc kompresji jest bardzo podobna. To z czym webp radzi sobie lepiej to gradienty, tla i kolor czerwony.

Sprawdź: https://www.artscape.pl/xtest/ - akurat tutaj jpegi nie byly kompresowane mozjpeg tylko zapisane z GIMPa, ale na koncu jest kilka webp dla testow. Ten test robilem sobie do sprawdzenia jak daleko moge zejsc z kompresja zeby nie bylo widac pikselozy na smartfonach. Na tescie zobaczysz tez, ze tlo w wersji z webp wyglada lepiej.

[djbit]

Dzięki, za odpowiedź. Nie chciałbym ponownie tracić czasu na to co już straciłem i planuje zostać przy webp. Mam cichą nadzieję, że ktoś coś wymyśli :).

 

Znalazłem jeszcze rozwiązanie w postaci htaccess  WebP images with htaccess, jednak nie wiem jak to przerobić aby po wykryciu, że przeglądarka nie obsługuje webp wczytał zdjęcie jpg. Jeszcze byłbym w stanie wrzucić na serwer pliki jpg :), chodź tutaj nie mam pewności, że boty też zaindeksują zdjęcia. 

 

Przykładowo na tej stronie mają zaindeksowane zdjęcia w formacie webp i nie widzę u nich <picture>, ale na serwerze mają też zdjęcia w wersji jpg. Jak to zrobili nie wiem

 

https://www.kartes-moda.pl/images/items/732/photo-2019-01-11-13-59-19_top.jpg
https://www.kartes-moda.pl/images/items/732/photo-2019-01-11-13-59-19_top.webp

 

 

Edytowane 24 Listopada 2021 przez djbit

[Torque]

@ djbit   nie wiem jakim masz hosting, ale jesli to VPS albo dedyk, zainstaluj Google Pagespeed Mod. Jedna z jego funkcji jest konwertowanie jpgow na webp. W htaccessie musialbys dopisac regule, ze w przypadku okreslonych User-agentow ta funkcja ma byc wylaczona.

 

[Mion]

IMHO zysk nie jest aż tak istotny by się nad tym tak skupiać...

[Grey Ronin]

3 godziny temu, Mion napisał:

zysk nie jest aż tak istotny

Zależy co sprzedajesz. Jak masz ofertę do klientów którzy kupują zdjęciami to zysk jest spory.

Tak ogólnie należy rozdzielić to co Google indeksuje na mobile od tego co indeksuje na desktop. 

Jak to jest sklep to istotne jest jaki format jest w znacznikach schema produktu.

[Mion]

6 godzin temu, Grey Ronin napisał:

Jak masz ofertę do klientów którzy kupują zdjęciami to zysk jest spory.

Jak "jesteś fejsbukiem" z miliadrem zdjeć to też...
Ale nie da przeciętnego Kowalskie, który ma bloga i co gorsza myśli, że tym sposobem wpije w top 10 SERP.

[djbit]

Mam kilka tyś zdjęć na stronie.

 

Trochę poszperałem w google i wydaje mi się, że indeksacje położyłem przez lazy-loading obrazów, dokładnie przez (data-src):

<img src="placeholder.webp" data-src="garden.webp" alt="garden" class="lazyload" />

 

Na chwile obecną dodałem poniżej zdjęcia:

<noscript>
	<img src="garden.webp" alt="garden" />
</noscript>

 

[Mion]

17 godzin temu, djbit napisał:

<img src="placeholder.webp" data-src="garden.webp" alt="garden" class="lazyload" />

Ale to nie ma nic wspólnego z lazy-loading ptzynajmniej tym natywnym poza nazwą selektora css .

[djbit]

Gdzieś znalazłem ten sposób wdrożenia lazy-loading i tak też zrobiłem. Lazy loading w tym przypadku obsługuje javascript.

Opóźnione ładowanie działa poprawnie co również potwierdziło się w wynikach PageSpeed Insights

 

Z tego co wczoraj wyczytałem google może nie indeksować obrazów w data-src.

 

Tutaj ktoś miał identyczny problem co ja link

[Mion]

Jeśli obsługuje JavaScript to co innego, bo można również natywnie za pomocą wsparcia samej przeglądarki 
https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading

[blazejs]

To ja sie dorzuce. U mnie tez jest lazy loading przez data-src. Z ciekawosci zamienie to na loading="lazy" i zobaczymy co sie stanie.