Was ist der beste Weg, um das vorgestellte Bild für reaktionsschnelles Webdesign zu verwenden?

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.

Schritt 1:

Definieren Sie zwei benutzerdefinierte Bildgrößen, z.

<?php
add_image_size( 'normal-thumbnail', 400, 300, false ); // Default image size
add_image_size( 'mobile-device-thumbnail', 200, 150, false ); // Mobile-device image size
?>

Schritt 2:

Implementieren Sie die von Ihnen gewählten Mittel, um den Kunden zu bestimmen. Es gibt verschiedene Möglichkeiten, und welche Methode Sie verwenden, liegt außerhalb des Rahmens dieser Frage. Angenommen, Sie haben eine Methode, die für Sie funktioniert, geben Sie das Ergebnis an eine Variable aus, z$mobile_device = true;

Schritt 3:

Geben Sie das Bild in Ihren Vorlagendateien bedingt basierend auf dem Client aus.

<?php
if ( true = $mobile_device ) { // client is mobile; be responsive
    the_post_thumbnail( 'mobile-device-thumbnail' );
} else {
    the_post_thumbnail( 'normal-thumbnail' );
}
?>

Hinweis: Sie können das if/else(oder a switch) für mehrere Formfaktoren (dh Bildschirmgrößen) wiederholen . Fügen Sie einfach mehrere benutzerdefinierte Bildgrößen hinzu und testen Sie bedingt für jede Bildschirmgröße, die Sie unterstützen möchten.

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 :

Methode 1: Das CSS

Fügen Sie Ihrer CSS-Datei den folgenden Code hinzu. Dadurch können die Bilder entsprechend der Bildschirmgröße skaliert werden.

img { max-width: 100%; }
img { -ms-interpolation-mode: bicubic; }

Automatische Höhe und Breite in WordPress- <img>Tags entfernen

Ziehen Sie nun das Fenster, um die Bildskalierung in Aktion zu sehen. Sie werden feststellen, dass die Bilder in Ihrem WordPress-Blog merkwürdig skalieren. Die horizontale Skalierung ist in Ordnung, aber die vertikale Skalierung in WordPress-Bildern ist falsch.

Um die Größe der Bilder in WordPress proportional zu ändern, müssen wir die automatischen Werte für Breite und Höhe entfernen, die WordPress für < img >Tags hinzufügt .

Als Beispiel müssen wir dies ändern:

< img class=”imgclass” src=”../images/featuredtmb.jpg” alt=”alt comes here” 
    width=”100″ height=”100″ />

Dazu:

< img class=”imgclass” src=”../images/featuredtmb.jpg” alt=”alt comes here” />

Für die Bilder, die sich in einem Beitrag oder einer statischen Seite / Vorlagenseite befinden, müssen Sie lediglich das obige CSS zur style.cssDatei hinzufügen und dann die Eigenschaften ‘width’und ‘height’aus dem < img >Tag in Ihrem WordPress-Editor entfernen . Das ist es!

Für das Bild, das von WordPress dynamisch angezeigt wird, z. B. Post-Thumbnails, müssen Breite und Höhe mithilfe einer Funktion dynamisch entfernt werden.

Fügen Sie Ihrer functions.phpDatei die folgende Funktion hinzu .

function remove_wp_width_height( $string ) {
    return preg_replace( ‘/\/i’, ”,$string );
}

Wenn Sie dann diese Post-Thumbnail-Bilder auf Ihrer template.php-Seite anfordern, ersetzen Sie:

the_post_thumbnail();

Mit diesem:

echo remove_wp_width_height( get_the_post_thumbnail( get_the_ID(), ’large’ ) );

Das ist es. Ziehen Sie den Browser und ändern Sie die Größe, um Ihre reaktionsschnellen WordPress-Bilder in Aktion zu sehen!

---

Methode 2:

Das Obige funktioniert bei einigen Themen nicht.

Wenn Sie einer der wenigen sind, die nicht funktioniert haben, können Sie Ihr Bildproblem dennoch mit der folgenden Funktion lösen.

Fügen Sie Ihrer functions.phpDatei die folgende Funktion hinzu .

Dadurch werden Inline-Attribute für Breite und Höhe aus den mit abgerufenen Bildern entfernt the_post_thumbnail()und verhindert, dass diese Attribute neuen Bildern hinzugefügt werden, die dem Editor hinzugefügt wurden.

add_filter( 'post_thumbnail_html', 'remove_thumbnail_dimensions', 10 );  
add_filter( 'image_send_to_editor', 'remove_thumbnail_dimensions', 10 ); 
function remove_thumbnail_dimensions( $html ) {     
    $html = preg_replace( '/(width|height)=\"\d*\"\s/', "", $html );     
    return $html; 
}

Eine Möglichkeit, dies zu erreichen, ist die Erkennung von Benutzeragenten, aber ich würde diese Methode auch lieber nicht ausführen, da Benutzeragenten gefälscht werden können.

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.

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:

1. Laden Sie das Bild in voller Größe und lassen Sie es vom Browser verkleinern, um es an das Layout anzupassen. Definieren Sie die maximale Bildbreite als 100% und lassen Sie sie um die Breite des Containers verkleinern.

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.

2. Verwenden Sie Medienabfragen, um die Eigenschaften des Clients zu lesen und eines von mehreren maßgeschneiderten Bildern für verschiedene Haltepunkte in Ihrem Design abzurufen. (Die vorgeschlagene HTML Responsive Images Extension und die srcset-Attribut-Tags arbeiten daran, diesen Ansatz in die HTML-Spezifikation zu integrieren.)

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.

3. Erstellen des Backends Optimieren Sie Bilder für jeden Bildschirm oder jedes Layout mithilfe eines einzigen Quellbilds im laufenden Betrieb. Meiner Meinung nach entspricht dies der Behandlung von reaktionsschnellen Bildern als Inhaltsverhandlungsaufgabe, ähnlich wie bei HTTP.

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