WordPress duyarlı görüntüler - Retina ekranlarında yanlış görüntü seçilmesi

Question

Ben bu web sitesinde çalışan duyarlı görüntüleri almak için çalışıyorum ve sadece iyi gittiğini düşündüğüm zaman, ben iPad retina bakmak ekran ve yanlış görüntüyü seçiyor. Sadece yanlış boyut değil, aynı zamanda manzara değil, manzara olarak da gösteriliyor. Tüm farklı ekran boyutları için özel görüntü boyutları oluşturduğum ve retina ekranlarında kullanılacak XL versiyonunu oluşturduğum için neden bunu yaptığımı bilmiyorum.

Görüntünün HTML'si srcset ve boyutlarıyla burada.

<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" > 

retina ekranlar i ilk iPad'ler hedef boyutlara bu ekleme çalıştı ama hiçbir şey olmadı çift piksel gibi:

(min-width: 2048px) 1010px 

komik bir şey i 1010px boyutlarında bir imaja sahip ve sahip olduğu Bu resmi kullanmak için pikselleri ikiye katlandığında boyutlarda belirtilir. Bunun yerine bu boyutu kullanıyor: 940x627.jpg

Bunun neden olduğunu açıklayan herhangi biri var mı lütfen?

Answer 1

Doğru insanlar, sayfanın neden doğru resimleri yüklemediğini bulmayı başardım. Sorgumda belirttiğim gibi, Wordpress varsayılan olarak yalnızca srcset'deki görüntüleri aynı en boy oranına yükleyecektir. Farklı bir boyutta özel resim boyutları eklemek isterseniz, bunları wp_calculate_image_srcset işleviyle eklemeniz gerekir.

Bunu yapmayla ilgili sorun, tüm özel boyutların srcset'deki tüm resimlere yüklenebilmesi ve tarayıcının görüntüyü en yakın genişlik ve orana göre seçmesidir.

İkinci olarak, Wordpress'in en boy oranını temel aldığı resmin, sayfaya yüklediğiniz özel boyuttan ziyade orijinal resim boyutu olduğunu fark ettim. Bu yüzden, add_image_size('portrait-case-study-lg', 505, 757, true); Wordpress özel boyutuna sahip portre resminin bulunduğu yer, aslında 2000px x 1500px boyutundaki orijinal dosyadan en boy oranını elde ediyordu. Bu farklı bir orana sahip olduğu için, portre boyutları için oluşturduğum resim boyutları göz ardı ediliyordu ve bunun yerine en yakın en boy oranına sahip görüntü seçildi.

Bunu nasıl düzeltdiğim, boyutları cmcset'e ekleyen ve daha küçük resimlerle aynı en boy oranına sahip olması için orijinal görüntüleri Photoshop'ta yeniden boyutlandıran wp_calculate_image_srcset işlevini kaldırmaktı. Örneğin, orijinal görüntü dosyasını kırpmak için kullanılan özel görüntü boyutu olan portrait-case-study-xl yerine, örneğin. Bunu kaldırdım ve orijinal görüntüyü bu boyutta yükledim.

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

Bu boy oranı orijinal olarak aynıdır Wordpress artık farklı ekran boyutlarında 'portrait-case-study-lg' seçer anlamına gelir.

Wordpress, orijinal görüntüyü srcset'ten kaldırmanıza izin verebilirse iyi olur, çünkü istemci bir görüntüyü sayfaya yüklediğinde otomatik olarak doğru boyutu oluşturamıyorum demektir.