Responsive WordPress-Bilder – Auswahl eines falschen Bildes auf Retina-Bildschirmen

Question 1

Ich habe hart daran gearbeitet, auf dieser Website, die ich gerade baue, responsive Bilder zum Laufen zu bringen, und gerade als ich dachte, dass es gut läuft, schaue ich es mir auf dem iPad-Retina-Bildschirm an und es wählt das falsche Bild aus. Es hat nicht nur die falsche Größe, sondern wird auch im Querformat und nicht im Hochformat angezeigt. Ich habe keine Ahnung, warum es das tut, da ich benutzerdefinierte Bildgrößen für alle verschiedenen Bildschirmgrößen und auch die XL-Version für die Verwendung auf Retina-Bildschirmen erstellt habe.

Hier ist der HTML-Code des Bildes mit dem Quellsatz und den Größen.

<img class="scene_element scene_element--fadeinup" src="http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-505x757.jpg" 
srcset="http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017.jpg 3684w, 
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-768x1151.jpg 768w, 
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-1010x1514.jpg 1010w, 
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-505x757.jpg 505w, 
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-415x622.jpg 415w, 
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-720x1080.jpg 720w, 
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-360x540.jpg 360w, 
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-293x440.jpg 293w,
 http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-1110x800.jpg 1110w, 
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-455x306.jpg 455w, 
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-355x238.jpg 355w, 
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-640x600.jpg 640w,
 http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-320x300.jpg 320w,
 http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-2340x1258.jpg 2340w,
 http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-1170x629.jpg 1170w, 
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-940x627.jpg 940w, 
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-555x400.jpg 555w, 
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-1910x1274.jpg 1910w, 
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-955x637.jpg 955w, 
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-1574x1250.jpg 1574w, 
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-787x625.jpg 787w" 


sizes="(-webkit-min-device-pixel-ratio: 1.5) 1010px, 
(max-width: 767px) 767px, (min-width: 768px) and (max-width: 991px) 415px, 
(min-width: 992px) and (max-width: 1199px) 415px, 
(min-width:1200px) 505px, 505px" itemprop="thumbnail" alt="Image description" >

Da Retina-Bildschirme Doppelpixel sind, habe ich zuerst versucht, dies zu den Größen hinzuzufügen, um auf iPads abzuzielen, aber es ist nichts passiert:

(min-width: 2048px) 1010px

Das Lustige ist, ich habe ein Bild mit den Abmessungen von 1010px und habe in den Größen angegeben, dass wenn es doppelt so viele Pixel sind, dieses Bild verwendet werden soll. Stattdessen wird diese Größe verwendet: 940×627.jpg

Kann mir bitte jemand erklären, warum das passiert?

Question 2

Richtige Leute, ich habe es geschafft herauszufinden, warum die Seite nicht die richtigen Bilder geladen hat. Wie ich in meiner Frage erwähnt habe, lädt WordPress standardmäßig nur die Bilder im srcset mit demselben Seitenverhältnis. Wenn Sie benutzerdefinierte Bildgrößen mit einem anderen Seitenverhältnis hinzufügen möchten, müssen Sie diese über hinzufügen wp_calculate_image_srcset Funktion.

Das Problem dabei ist, dass alle benutzerdefinierten Größen in jedes Bilder-Srcset geladen werden und der Browser das Bild basierend auf der ähnlichsten Breite und dem gleichen Verhältnis auswählt.

Zweitens habe ich festgestellt, dass das Bild, auf dem WordPress das Seitenverhältnis basiert, die ursprüngliche Bildgröße ist und nicht die benutzerdefinierte Größe, die Sie in die Seite laden. Also, wo ich das Hochformat mit der benutzerdefinierten Größe von hatte add_image_size('portrait-case-study-lg', 505, 757, true); WordPress erhielt tatsächlich das Seitenverhältnis von der Originaldatei, die 2000 x 1500 Pixel betrug. Da dies ein anderes Verhältnis hatte, wurden die Bildgrößen, die ich für die Hochformate erstellt hatte, ignoriert und stattdessen das Bild mit dem ähnlichsten Seitenverhältnis ausgewählt.

Wie ich das behoben habe, war, die Funktion zu entfernen wp_calculate_image_srcsetDadurch wurden die Größen zum srcset hinzugefügt und stattdessen die Originalbilder in Photoshop so skaliert, dass sie das gleiche Seitenverhältnis wie die kleineren Bilder haben.

Also zum Beispiel, anstatt die benutzerdefinierte Bildgröße von zu haben portrait-case-study-xl die zum Zuschneiden der ursprünglichen Bilddatei verwendet wurde. Ich habe dies entfernt und stattdessen das Originalbild in dieser Größe hochgeladen.

add_image_size('portrait-case-study-xl', 1010, 1514, true);
add_image_size('portrait-case-study-lg', 505, 757, true);

Dies bedeutet, dass WordPress jetzt das ‘portrait-case-study-lg' auf unterschiedlichen Bildschirmgrößen, da das Seitenverhältnis dem Original entspricht.

Es wäre gut, wenn WordPress Ihnen erlauben könnte, das Originalbild aus dem srcset zu entfernen, da dies jetzt bedeutet, dass ich nicht automatisch die richtige Größe erstellen kann, wenn der Client ein Bild auf eine Seite hochlädt.