Wordpress 반응 형 이미지 - 망막 스크린에서 잘못된 이미지 선택

Question

저는이 웹 사이트에서 반응 형 이미지 작업을 위해 열심히 노력했으며 잘 진행되고 있다고 생각하면 iPad 망막에서 보았습니다 화면이 잘못 선택되었습니다. 크기가 잘못되었을뿐만 아니라 초상화가 아닌 풍경으로 표시됩니다. 왜 모든 다른 화면 크기에 대한 사용자 지정 이미지 크기를 만들었고 또한 망막 화면에서 사용할 수있는 XL 버전을 만들었는지 모르겠다.

다음은 srcset 및 크기가있는 이미지의 HTML입니다.

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

망막 화면은 내가 먼저 아이 패드를 대상으로 크기이 추가 시도했지만 아무 일도 더블 픽셀다시피 :

(min-width: 2048px) 1010px 

재미있는 것은 내가 1010px의 크기로 이미지를 가지고있는 것입니다은 이 이미지를 사용하는 픽셀의 배가되는 크기로 지정됩니다. 대신이 크기를 사용합니다. 940x627.jpg

왜 이런 일이 일어나는지 설명 할 수 있습니까?

Answer 1

오른쪽 사람들은 왜 페이지가 올바른 이미지를로드하지 않는지 알아 냈습니다. 내가 질문에 언급했듯이 기본적으로 Wordpress는 같은 종횡비의 이미지 만 srcset에로드합니다. 다른 비율로 맞춤 이미지 크기를 포함하려면 wp_calculate_image_srcset 기능을 통해 추가해야합니다.

이 문제는 모든 사용자 정의 크기가 모든 이미지 srcset에로드되고 브라우저가 가장 가까운 너비와 비율을 기반으로 이미지를 선택한다는 점에서 문제가 있습니다.

둘째, Wordpress에서 가로 세로 비율을 기반으로하는 이미지가 페이지에로드되는 사용자 지정 크기가 아니라 원본 이미지 크기임을 깨달았습니다. 그래서 add_image_size('portrait-case-study-lg', 505, 757, true);의 사용자 지정 크기가있는 세로 이미지가있는 곳에서 Wordpress는 실제로 2000px x 1500px 인 원래 파일의 가로 세로 비율을 얻었습니다. 이것이 다른 비율을 가지기 때문에, 세로 크기 용으로 생성 된 이미지 크기는 무시되고 가장 가까운 종횡비를 가진 이미지가 선택되었습니다.

어떻게하면 srcset에 크기를 추가 한 wp_calculate_image_srcset 함수를 제거하고 더 작은 이미지와 같은 종횡비를 갖도록 Photoshop에서 원본 이미지의 크기를 조정하는 것이 었습니다.

예를 들어 원본 이미지 파일을 자르기 위해 사용 된 맞춤 이미지 크기가 portrait-case-study-xl 인 대신 이것을 제거하고 대신이 크기로 원본 이미지를 업로드했습니다.

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

이는 종횡비가 원본과 동일하다 워드 프레스는 이제 다양한 화면 크기의 'portrait-case-study-lg' 선택 수단.

Wordpress가 원본 이미지를 srcset에서 제거 할 수 있다면 좋을 것입니다. 이제 클라이언트가 이미지를 페이지에 업로드 할 때 자동으로 정확한 크기를 만들 수 없기 때문입니다.