{"id":18200072,"date":"2024-12-16T02:37:38","date_gmt":"2024-12-16T02:37:38","guid":{"rendered":"https:\/\/wordpress.org\/support\/topic\/wrong-srcset-loaded\/"},"modified":"2024-12-16T06:39:51","modified_gmt":"2024-12-16T06:39:51","slug":"wrong-srcset-loaded","status":"publish","type":"topic","link":"https:\/\/wordpress.org\/support\/topic\/wrong-srcset-loaded\/","title":{"rendered":"Wrong srcset loaded"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">We have this image loaded<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div id=\"attachment_5118\" style=\"width: 211px\" class=\"wp-caption alignright\"&gt;<br \/>&lt;img decoding=\"async\" aria-describedby=\"caption-attachment-5118\" <br \/>class=\"wp-image-5118 size-medium\" <br \/>title=\"Michael Madsen deelt hoe Caminito del Rey tickets te komen\" <br \/>src=\"https:\/\/autentical.nl\/wp-content\/webp-express\/webp-images\/doc-root\/wp-content\/uploads\/sites\/42\/2018\/10\/MMM_billed-201x300.jpg.webp\" <br \/>alt=\"Michael Madsen deelt hoe Caminito del Rey tickets te komen\" <br \/>width=\"201\" height=\"300\" <br \/>srcset=\"https:\/\/autentical.nl\/wp-content\/webp-express\/webp-images\/doc-root\/wp-content\/uploads\/sites\/42\/2018\/10\/MMM_billed-201x300.jpg.webp 201w,<br \/>https:\/\/autentical.nl\/wp-content\/webp-express\/webp-images\/doc-root\/wp-content\/uploads\/sites\/42\/2018\/10\/MMM_billed-686x1024.jpg.webp 686w,<br \/>https:\/\/autentical.nl\/wp-content\/webp-express\/webp-images\/doc-root\/wp-content\/uploads\/sites\/42\/2018\/10\/MMM_billed-603x900.jpg.webp 603w,<br \/>https:\/\/autentical.nl\/wp-content\/webp-express\/webp-images\/doc-root\/wp-content\/uploads\/sites\/42\/2018\/10\/MMM_billed.jpg.webp 702w\" <br \/>sizes=\"(max-width: 201px) 100vw,201px\"&gt;<br \/>&lt;p id=\"caption-attachment-5118\" class=\"wp-caption-text\"&gt;&lt;a href=\"https:\/\/autentical.nl\/over-autentical\/\"&gt;Michael Madsen&lt;\/a&gt; deelt hoe Caminito del Rey tickets te komen&lt;\/p&gt;&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">somehow the 603px x 900px image is loaded for mobile as well as the full size image. This 603 x 900 is also is not a size we added. We have these sizes:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>add_theme_support('post-thumbnails');<br \/>add_image_size('base_hotel_img_slideshow', 770, 500, true);<br \/>add_image_size('base_hotel_img_slideshow_large', 1200, 600, true);<br \/>add_image_size('base_hotel_img_slideshow_home', 1800, 800, true);<br \/>add_image_size('base_hotel_img_slideshow_home_large', 2000, 1100, true);<br \/>add_image_size('base_hotel_img_special_banner', 1200, 400, true);<br \/>add_image_size('base_hotel_img_special_sidebar', 380, 250, true);<br \/>add_image_size('base_hotel_img_room_thumb', 380, 380, true);<br \/>add_image_size('base_hotel_img_gallery', 900, 900);<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">and WordPress just adds standard 300px times 300px for medium sized images. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">We also do not add the 201 for width and 300 for height for images. So it seems WebP ExPress is generating this for the image.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">we need not load the formats <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>https:\/\/autentical.nl\/wp-content\/webp-express\/webp-images\/doc-root\/wp-content\/uploads\/sites\/42\/2020\/01\/caminito-del-rey-cliffside_red.jpg.webp<br \/>https:\/\/autentical.nl\/wp-content\/webp-express\/webp-images\/doc-root\/wp-content\/uploads\/sites\/42\/2018\/10\/MMM_billed-603x900.jpg.webp<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"> on mobile .  We only need <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>https:&#047;&#047;autentical.nl\/wp-content\/webp-express\/webp-images\/doc-root\/wp-content\/uploads\/sites\/42\/2018\/10\/MMM_billed-201x300.jpg.webp<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Page Speed loads the full sized image it seems <a href=\"https:\/\/pagespeed.web.dev\/analysis\/https-autentical-nl-hoe-krijg-je-kaartjes-voor-de-caminito-del-rey\/ncvn4o6mmz?form_factor=mobile\">https:\/\/pagespeed.web.dev\/analysis\/https-autentical-nl-hoe-krijg-je-kaartjes-voor-de-caminito-del-rey\/ncvn4o6mmz?form_factor=mobile<\/a> , but browser for sure loads the 603&#215;900 one.<\/p>\n","protected":false},"template":"","class_list":["post-18200072","topic","type-topic","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/topic\/18200072","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/topic"}],"about":[{"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/types\/topic"}],"version-history":[{"count":3,"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/topic\/18200072\/revisions"}],"predecessor-version":[{"id":18200080,"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/topic\/18200072\/revisions\/18200080"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/media?parent=18200072"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}