[wp-trac] [WordPress Trac] #58095: Post featured image block use full size image => huge impact on performance

[WordPress Trac]

#58095: Post featured image block use full size image => huge impact on performance
------------------------------------------------+--------------------------
 Reporter:  thomask                             |       Owner:  (none)
     Type:  defect (bug)                        |      Status:  new
 Priority:  normal                              |   Milestone:  Awaiting
                                                |  Review
Component:  Editor                              |     Version:  trunk
 Severity:  normal                              |  Resolution:
 Keywords:  has-screenshots needs-testing-info  |     Focuses:  performance
------------------------------------------------+--------------------------

Comment (by thomask):

 I have created test demo site https://test.kapler.cz/ with clear wordpress
 instalation with few lorem ipsum posts with some big featured images.

 From what i see, full version of the image is offered. so even they are
 never bigger than 385 × 238 px full many megapixel images are downloaded.
 And there are smaller media sizes defined even by default wp.

 the code then looks like

 {{{
 <a href="https://test.kapler.cz/?p=18" target="_self"
 style="height:max(15vw, 30vh)">
 <img width="2560" height="1704"
 src="https://test.kapler.cz/wp-content/uploads/pexels-ylanite-
 koppens-796602-scaled.jpg"
 class="attachment-post-thumbnail size-post-thumbnail wp-post-image"
 alt="Amet" decoding="async"
 style="height:max(15vw, 30vh);object-fit:cover;"
 srcset="https://test.kapler.cz/wp-content/uploads/pexels-ylanite-
 koppens-796602-scaled.jpg 2560w,
 https://test.kapler.cz/wp-content/uploads/pexels-ylanite-
 koppens-796602-300x200.jpg 300w,
 https://test.kapler.cz/wp-content/uploads/pexels-ylanite-
 koppens-796602-1024x682.jpg 1024w,
 https://test.kapler.cz/wp-content/uploads/pexels-ylanite-
 koppens-796602-768x511.jpg 768w,
 https://test.kapler.cz/wp-content/uploads/pexels-ylanite-
 koppens-796602-1536x1023.jpg 1536w,
 https://test.kapler.cz/wp-content/uploads/pexels-ylanite-
 koppens-796602-2048x1363.jpg 2048w"
 sizes="(max-width: 2560px) 100vw, 2560px"></a>
 }}}

 so there is srcset defined, but when i look to the network tab in
 devtools, my desktop browser with max with of screen where the image is
 385 × 238 px it gets full version https://test.kapler.cz/wp-
 content/uploads/pexels-ylanite-koppens-796602-scaled.jpg. If i resize the
 window to 601 px, where the images on screen are 163×237 px, it still
 downloads up to 1536x1151 images (see the new attachement)


 I think there should be a way how to setup the maximum and use e.g. a
 medium size for desktop default or even have some custom size for the
 theme that would fit the maximum sizes for mobile/desktop for the 1 / 2
 and 3 columns and then use the proper sizing based on number of columns...

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/58095#comment:3>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform