Jump to content

WEBP vs Google Images


djbit

Recommended Posts

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)?

Edited by djbit
Link to comment
Share on other sites

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ź: http://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.

Pomóż Szajce Szarego Wilka: https://pomagam.pl/czerwonyalarm

Link to comment
Share on other sites

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

 

 

Edited by djbit
Link to comment
Share on other sites

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

HTTP 200 usługi IT - Dariusz Janicki | Realizacja serwisów www oraz oprogramowania w PHP / C# / Golang / Node.js / MySQL
[Pomoc] dla 5-letniej Ani Serkowskiej - ulżyj jej w cierpieniu!

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

HTTP 200 usługi IT - Dariusz Janicki | Realizacja serwisów www oraz oprogramowania w PHP / C# / Golang / Node.js / MySQL
[Pomoc] dla 5-letniej Ani Serkowskiej - ulżyj jej w cierpieniu!

 

Link to comment
Share on other sites

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>

 

Link to comment
Share on other sites

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 .

HTTP 200 usługi IT - Dariusz Janicki | Realizacja serwisów www oraz oprogramowania w PHP / C# / Golang / Node.js / MySQL
[Pomoc] dla 5-letniej Ani Serkowskiej - ulżyj jej w cierpieniu!

 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

HTTP 200 usługi IT - Dariusz Janicki | Realizacja serwisów www oraz oprogramowania w PHP / C# / Golang / Node.js / MySQL
[Pomoc] dla 5-letniej Ani Serkowskiej - ulżyj jej w cierpieniu!

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. Terms of Use Privacy Policy