Gatsby leistet hervorragende Arbeit bei der Verarbeitung und Handhabung von Bildern. Zum Beispiel hilft es Ihnen, Zeit bei der Bildoptimierung zu sparen, da Sie nicht jedes Bild manuell optimieren müssen.
Mit Plugins und etwas Konfiguration können Sie sogar einrichten …
…Das Web ertrinkt in nutzlosen Bildern. Diese klischeehaften Stockfotos vermitteln absolut nichts von Wert, Interesse oder Nutzen. Sie sind eine der schlimmsten Formen der digitalen Verschmutzung, da sie Platz auf der Seite einnehmen,
Es gibt all diese Seiten, die Ihnen bei Ihren Bildern helfen wollen. Sie optimieren Ihre Bilder und helfen Ihnen, sie performant auszuliefern.
Das ist eine sehr gute Sache. Nach allen Maßstäben sind Bilder ein Hauptbestandteil der Ressourcen auf Webseiten, und wir sind notorisch schlecht darin, sie zu optimieren und all die Dinge zu tun, die wir tun könnten, um die Performance-Belastung durch sie zu verringern. Also nutzen Sie einen Dienst, der Ihnen hilft, Bilder besser auszuliefern. Schlau. Viele davon machen die Verwaltung und Optimierung von Bildern viel einfacher. Aber ich betrachte sie nicht als Selbstläufer. Es gibt viel zu bedenken, wie zum Beispiel Entscheidungen zu treffen, die Sie nicht in eine Ecke drängen.
Ich habe kürzlich eine Lösung gefunden, um die Farbe jedes Produktbildes dynamisch zu aktualisieren. Mit nur einem <img /> eines Produkts können wir es auf verschiedene Weise einfärben, um verschiedene Farboptionen anzuzeigen. Wir brauchen nicht einmal …
Schauen wir uns eine super leichtgewichtige Methode an, um einen horizontalen Masonry-Effekt für eine Reihe von Fotos beliebiger Größe zu erstellen. Wirf beliebige Fotos hinein, und sie reihen sich Kante an Kante ohne Lücken auf.
Die Lösung …
Ich habe das kürzlich gemacht und dachte, ich schreibe es auf. Es gibt etwas namens Git Large File Storage (Git LFS). Das ist der Sinn der Sache: Es hält große Dateien aus Ihrem Repository fern …
Angenommen, Sie haben ein Bild, das Sie in einem <img /> verwenden, das 800x600 Pixel groß ist. Wird es auf Ihrer Website tatsächlich als 800 Pixel breit angezeigt? Sehr wahrscheinlich nicht. Wir neigen dazu, Bilder in flexible Container zu setzen …
IntersectionObserver hat das Lazy Loading viel einfacher und effizienter gemacht als früher, aber um es wirklich richtig zu machen, muss man immer noch den src und so weiter entfernen, was umständlich ist. Es ist definitiv nicht so einfach wie
<img Als ich ein Bild zum ersten Mal responsiv gemacht habe, war es so einfach wie das Codieren dieser vier Zeilen
img {
max-width: 100%;
height auto; /* default */
}Obwohl das für mich als Entwickler funktionierte, war es nicht das Beste für …
