zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > (X)HTML
Seite neu laden [s] Responsive Image und Lazy Loading 2022 ?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 02.10.2022, 20:10
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.07.2008
Ort: Idstein
Beiträge: 79
Basti82 befindet sich auf einem aufstrebenden Ast
Frage [s] Responsive Image und Lazy Loading 2022 ?

Ich suche nach einer guten Lösung für Responsive Image und Lazy Loading wie man es heute umsetzt.

Seit langer Zeit verwende ich immer data-src mit javaScript:


HTML-Code:
<a href="/here-is-a-link/" title="Test Image">
    <img
        src="https://xhtmlforum.de/.../csm_domenico-loia-hGV2TfOh0ns-unsplash_24771fe133.jpg"
        data-src=".../csm_domenico-loia-hGV2TfOh0ns-unsplash_24771fe133a.jpg"
        data-bigger=".../csm_domenico-loia-hGV2TfOh0ns-unsplash_24771fe133b.jpg"
        data-large=".../csm_domenico-loia-hGV2TfOh0ns-unsplash_24771fe133.jpg"
        data-medium=".../csm_domenico-loia-hGV2TfOh0ns-unsplash_24771fe133f.jpg"
        data-small=".../csm_domenico-loia-hGV2TfOh0ns-unsplash_24771fe133e.jpg"
        title="Test Image"
        alt="Test Image"
        class="lazyload img-fluid border-0 rounded-0 mb-6"
        data-preload="true"
        style="opacity: 1;"
    >
    <noscript>
        <img src="https://xhtmlforum.de/.../csm_domenico-loia-hGV2TfOh0ns-unsplash_24771fe133.jpg" title="" alt="" />
    </noscript>
</a>
In diesem Beispiel scheidet und verkleinert mir das CMS die Bilder in den richtigen Auflösungen / Größen.

Gibt es denn mittlerweile bessere Lösungen?
Besonders was den Suchmaschinen gefällt und den Pagespeed verbessert?
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 04.10.2022, 14:04
top top ist offline
Benutzer
neuer user
 
Registriert seit: 06.01.2021
Beiträge: 59
top wird schon bald berühmt werden
Standard

Du könntest srcset="bla" nutzen.
Schau mal hier:
https://wiki.selfhtml.org/wiki/Bilde...er_mit_picture

Entweder mit <picture> oder direkt im <img>.
Ich muss aber gestehen gestehen, dass ich es selbst noch nicht verwendet habe. Nehme es mir aber schon länger vor.


Anders sieht es bei loading="lazy" aus:
https://wiki.selfhtml.org/wiki/HTML/Attribute/loading

Das habe ich schon häufiger genutzt und es funktioniert überraschend einfach.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 05.10.2022, 17:48
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.243
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

picture und srcset für unterschiedliche Größen auf unterschiedlichen Devices. https://developer.mozilla.org/en-US/...ifferent_sizes

lazy loading mit lazy attribut wurde ja schon genannt.

mehr braucht es heute nicht. Keinerlei JS dafür notwendig.
Mit Zitat antworten
  #4 (permalink)  
Alt 17.12.2022, 03:58
Neuer Benutzer
neuer user
 
Registriert seit: 14.12.2022
Ort: Dillenburg
Beiträge: 2
Sparkm4n befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von Basti82 Beitrag anzeigen
Ich suche nach einer guten Lösung für Responsive Image und Lazy Loading wie man es heute umsetzt.

Seit langer Zeit verwende ich immer data-src mit javaScript:


HTML-Code:
<a href="/here-is-a-link/" title="Test Image">
    <img
        src="https://xhtmlforum.de/.../csm_domenico-loia-hGV2TfOh0ns-unsplash_24771fe133.jpg"
        data-src="https://xhtmlforum.de/.../csm_domenico-loia-hGV2TfOh0ns-unsplash_24771fe133a.jpg"
        data-bigger=".../csm_domenico-loia-hGV2TfOh0ns-unsplash_24771fe133b.jpg"
        data-large=".../csm_domenico-loia-hGV2TfOh0ns-unsplash_24771fe133.jpg"
        data-medium=".../csm_domenico-loia-hGV2TfOh0ns-unsplash_24771fe133f.jpg"
        data-small=".../csm_domenico-loia-hGV2TfOh0ns-unsplash_24771fe133e.jpg"
        title="Test Image"
        alt="Test Image"
        class="lazyload img-fluid border-0 rounded-0 mb-6"
        data-preload="true"
        style="opacity: 1;"
    >
    <noscript>
        <img src="https://xhtmlforum.de/.../csm_domenico-loia-hGV2TfOh0ns-unsplash_24771fe133.jpg" title="" alt="" />
    </noscript>
</a>
In diesem Beispiel scheidet und verkleinert mir das CMS die Bilder in den richtigen Auflösungen / Größen.

Gibt es denn mittlerweile bessere Lösungen?
Besonders was den Suchmaschinen gefällt und den Pagespeed verbessert?
Also es gibt mittlerweile viele Lösungen die häufig mit Frameworks wie JQuery umgesetzt werden, hier habe ich allerdings ein Beispiel mit Javascript:
Code:
document.addEventListener("DOMContentLoaded", function() {
  var lazyloadImages = document.querySelectorAll("img.lazy");    
  var lazyloadThrottleTimeout;
  
  function lazyload () {
    if(lazyloadThrottleTimeout) {
      clearTimeout(lazyloadThrottleTimeout);
    }    
    
    lazyloadThrottleTimeout = setTimeout(function() {
        var scrollTop = window.pageYOffset;
        lazyloadImages.forEach(function(img) {
            if(img.offsetTop < (window.innerHeight + scrollTop)) {
              img.src = img.dataset.src;
              img.classList.remove('lazy');
            }
        });
        if(lazyloadImages.length == 0) { 
          document.removeEventListener("scroll", lazyload);
          window.removeEventListener("resize", lazyload);
          window.removeEventListener("orientationChange", lazyload);
        }
    }, 20);
  }
  
  document.addEventListener("scroll", lazyload);
  window.addEventListener("resize", lazyload);
  window.addEventListener("orientationChange", lazyload);
});
nachdem der DOM geladen wurde, werden die Images nach und nach nachgeladen beim Scrollen
__________________
Profi Webdesigner
Sparkm4n - Webdesign

Interessensthemen
- HTML5
- JQuery
- Javascript
- PHP
- Ergonomisches Webdesign
Mit Zitat antworten
Antwort

Stichwörter
html 5, pagespeed, responsive, responsive image

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
mit Schleife Script reduzieren css_user Javascript & Ajax 3 27.06.2013 16:51
CSS Hack dalmidog CSS 1 28.03.2008 18:32
Imagemap Zugriff bei einer Gallery Sarah14 Javascript & Ajax 3 12.11.2007 15:06


Alle Zeitangaben in WEZ +2. Es ist jetzt 20:51 Uhr.