Ich habe eine brillante Idee und da WordPress bereits einen Teil der Arbeit erledigt, muss ich nur eine gute Methode finden, um diese Arbeit zu machen.
Ich arbeite an einem Projekt, das auf alle Geräte reagieren muss, egal ob Desktop-PC oder mobiles Gadget. Daher möchte ich, dass die Bilder auch reagieren, was bedeutet, dass mobile Geräte keine Bilder mit mehr als 50 KB laden sollten.
Für jede Seite oder jeden Beitrag kann ich mithilfe von Post-Miniaturansichten ein ausgewähltes Bild hinzufügen. Bei voller Größe beträgt das Bild etwa 950 x 250 bei ~ 60 KB. Wenn ich die Website auf ein iPhone / Android lade, möchte ich nicht, dass das ~ 60-KB-Bild geladen wird, sondern dass das kleine Miniaturbild an seiner Stelle geladen wird.
Die Standardmethode für reaktionsschnelle Bilder besteht darin, die Breite des Bilds auf 100% des übergeordneten Containers festzulegen. Daher wird die Größe automatisch geändert, wenn auch die Größe des übergeordneten Containers geändert wird. Nicht die beste Methode für größere Bilder.
Ich habe darüber nachgedacht, das Responsive Image-Skript von Filament Group auszuprobieren , aber ich habe es ausprobiert und es hat nicht richtig funktioniert. Eine Möglichkeit, dies zu erreichen, ist die Erkennung von Benutzeragenten. Ich würde diese Methode jedoch auch lieber nicht ausführen, da Benutzeragenten gefälscht werden können.
Hier ist eine andere Methode zum Ändern der Größe von Bildern im laufenden Betrieb , aber dies scheint das zu duplizieren, was WordPress bereits getan hat.
Wenn es eine Möglichkeit gibt, dies mit den Mediengalerie-Bildern zu tun, die WordPress standardmäßig verwendet, wobei alle Größenänderungen bereits erstellt wurden, ist dies vorzuziehen.
quelle
Der beste Weg ist, ein fließendes Raster zu verwenden, um das WordPress-Design zu erstellen und die Werte für Breite und Höhe der vorgestellten Bilder durch eine Funktion zur proportionalen Skalierung zu entfernen. Ein Tutorial zum Reagieren von WordPress-Bildern :
quelle
Dies ist keine schlechte Methode und entspricht dem Industriestandard. Ein guter WURFL hat eine sehr hohe Genauigkeitsbewertung. Diejenigen, die ich verwendet und getestet habe, lieferten immer solide Ergebnisse, und unabhängige Tests (über dem, was ich tun würde) scheinen sie zu haben der 98% + Bereich. Wen kümmert es, wenn ein lahmer Bot einen User-Agent fälscht, sie sind sowieso nicht aus gutem Grund da.
Für Schritt 2 denke ich, dass jede Methode, die tatsächlich schneller ist, eine PHP-gestützte WURFL- oder CSS-Medienabfrage ist.
quelle
diplay:none;
. Effektive reaktionsschnelle Layouts sind aus diesem Grund in der Regel nur minimale Designs.Zuerst müssen Sie "am besten" definieren. Meine Definition wäre: Rendert das Bild mit der vom Designer beabsichtigten Wirkung auf ein Gerät oder einen Bildschirm. Rendert das Bild mit der gleichen Qualität wie das Original. Verbraucht die absolute Mindestmenge an System- und Personalressourcen (dh Bandbreite, CPU, Designer- / Programmiererzeit).
Hier sind die Ansätze, die ich bisher gesehen habe:
Vorteile: Erfordert nahezu keinen Aufwand bei der Implementierung, ist browserübergreifend kompatibel und wird von älteren Browsern unterstützt.
Nachteile: Oft werden mehr Daten als erforderlich heruntergeladen und anschließend CPU-Zyklen auf dem Client verbracht, um sie zu verkleinern (langsam). Abhängig vom Skalierungsalgorithmus des Browsers können Bilder mit sehr schlechter Qualität angezeigt werden. Keine Möglichkeit zur künstlerischen Leitung und Bild kann nicht für Retina-Displays angepasst werden.
Vorteile: Schnellerer Download auf Mobilgeräten. Kann Retina-Displays verarbeiten. Verbesserte Bildqualität, da Bilder hoffentlich mit einer hochwertigen Methode verarbeitet wurden. Künstlerische Leitung wird möglich.
Nachteile: Jemand muss Zeit damit verbringen, mehrere Versionen desselben Bildes zu verarbeiten, zuzuschneiden und zu verwalten. Mehr Codierung: Sie müssen jetzt jede einzelne Version des Bildes auf irgendeine Weise buchstabieren und Medienabfragen für alle gewünschten Layouts erstellen. Wiederholen Sie die obigen Schritte für jedes Bild, das Sie bedienen. Funktioniert nur für Browser, die CSS3-Medienabfragen oder die neuen Tags unterstützen.
Vorteile: Designer muss keine Zeit damit verbringen, Bilder zu verarbeiten und mehrere Versionen zu verwalten. Jedes Mal wird das Bild mit der optimalen Größe gesendet. Kann mit Retina-Displays umgehen und sich dynamisch an die künstlerische Ausrichtung anpassen (allerdings mit etwas mehr Aufwand - muss wissen, wo man sich konzentrieren muss). Kein spezielles oder zusätzliches Markup erforderlich (Einschränkung unten). Cross-Browser-kompatibel und funktioniert für ältere Browser.
Nachteile: Sie müssen Informationen über die Browser- und Bildschirmeigenschaften des Clients erfassen und übertragen. Das erstmalige Laden eines Bildes kann langsamer sein als bei jedem anderen Ansatz, da das Bild verarbeitet werden muss (wird normalerweise für spätere Anforderungen zwischengespeichert).
quelle