Lazy Load show 1×1 on unspecified image dimension

Hi,

I found a problem with lazy-load on images that have default Image dimensions from Gutenberg.

I mean, when I’m uploading an image to Gutenberg block, there is an “Image dimensions” in block setting, but I never touch it. The image will get a default 100% relative width and height.

Then if the post is published, the lazy load placeholder for that image only has a 1×1 dimension, and the responsive placeholder will not be generated. Therefore it will break the figure element.

see: https://drive.google.com/open?id=1Z1hChzSz_OWKhpvP1R28272KD9_KreFn

But when I’m selecting any of the “Image dimensions” options, the placeholder works

to see the problem on my webpage, please disable the javascript, so the lazy load will not load the real images. Then see the differences between Figure 5 and 6.

default vs specified image size on front page comparison:

 
<!-- DEFAULT IMAGE DIM-->
<figure class="aligncenter size-large">
  <img data-lazyloaded="1" 
    src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" 
    data-src="path/filename.png" 
    alt="..." class="wp-image-2024" 
    data-srcset="path/filename.png 941w, 
                 path/filename-300x59.png.webp 300w, 
                 path/filename-768x151.png.webp 768w, 
                 path/filename-150x29.png 150w, 
                 path/filename-800x157.png.webp 800w" 
    data-sizes="(max-width: 941px) 100vw, 941px">

  <noscript>...</noscript>
  <figcaption>...</figcaption>
</figure>

<!-- SPECIFIED IMAGE DIM ("Image dimensions" = 100%)-->
<figure class="aligncenter size-full is-resized">
  <img data-lazyloaded="1" 
    data-placeholder-resp="935x181"		
    src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5MzUiIGhlaWdodD0iMTgxIiB2aWV3Qm94PSIwIDAgOTM1IDE4MSI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2NmZDRkYiIvPjwvc3ZnPg==" 
    data-src="path/filename2.png" 
    alt="..." 
    class="wp-image-2026" 
    data-srcset="path/filename2.png 935w, 
                 path/filename2-300x58.png.webp 300w, 
                 path/filename2-768x149.png.webp 768w, 
                 path/filename2-150x29.png.webp 150w, 
                 path/filename2-800x155.png.webp 800w" 
    data-sizes="(max-width: 935px) 100vw, 935px" 
    width="935" height="181">
		
  <noscript>...</noscript>
<figcaption>...</figcaption></figure>

As you can see that if I’m specifying the image dimension, there are some attributes generated in the images: data-placeholder-resp, src="data:image/svg+xml...", width, and height. But not on default image dim.

The problem is, almost all of my previous published images use the default dimension.

Thank you for your support.

• This topic was modified 4 years, 6 months ago by Philip Faster.
• This topic was modified 4 years, 6 months ago by Philip Faster. Reason: formating for readability

The page I need help with: [log in to see the link]