lazy load a images.google

[frikifrik]

cześć korzystam z tego rozwiazania a w nim autor radzi

https://mansfeld.pl/programowanie/lazy-load-opoznione-ladowanie-zdjec-obrazow/

 

zeby skorzystac z takiego kodu do wtawiania obrazkow

 

<img class="lazy-img" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="obrazek.jpg" alt="opis obrazka">

 

czy google dla frazy "opis obrazka" wyciagnie sobie obrazek.jpg? czy data:image w src nie spowoduje problemow?

 

dzieki za rade

[okazwłoka]

Ale to jest bezsensu, kłóci się to totalnie z ideą lazy loading. To od razu ładuje obraz do dokumentu html, z tym że wyświetli się dopiero w obszarze okna (ale i tak od razu wszystkie obrazy dokumentu są 'pobrane').

 

Edit. Ok, źle zrozumiałem. Bo tu chodzi o załadowanie pustgo obrazka a nie właściwego.

 

 

Tak czy siak 

data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7

daje 78 dodatkowych znaków w kodzie strony. Nie wiem czy jest sens.

[frikifrik]

okazwłoka z braku doświadczenia wybrałem akurat ten JS ale jeżeli istnieje coś lepszego to poprosze o linka

a co z kwestia indeksowania przez google? poradzi sobie z data-src i stamtad pobierze wlasciwy obrazek?

[okazwłoka]

Oczywiście, że sobie pobierze i poradzi. Rozwiązanie jest dobre, ale nie jestem przekonany do oszczędności związanych z ładowaniem do treści src zakodowanego pustego obrazu. Ale to pewnie tylko kwestia gustu. 

[Mion]

30 minut temu, frikifrik napisał:

istnieje coś lepszego to poprosze o linka

Najprościej natywnie za pomocą:

loading="lazy"

https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading

 

[frikifrik]

jak zawsze pomocni dziekuje

a to to juz w ogole kosmos a Mion czy to jest wspierane przez wszystkie znaczace przagladarki?

 

https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading

 

[Mion]

https://caniuse.com/?search=loading

https://caniuse.com/mdn-html_elements_img_loading

 

https://web.dev/pl/lazy-loading-images/

 

https://bedekodzic.pl/lazy-loading/

 

[blazejs]

Dodalbym jeszcze, ze warto znow uzywac width i height w <img> jesli chce sie stosowac lazy loading.