Hossein Shourabi
MrCatDev's Blog

MrCatDev's Blog

Cripple your site performance by empty image src & empty background url! 💯 guaranteed

Cripple your site performance by empty image src & empty background url! 💯 guaranteed

Empty image src and empty background image can sending a large amount of unexpected traffic to your server.

Hossein Shourabi's photo
Hossein Shourabi
·Feb 6, 2022·

2 min read

Subscribe to my newsletter and never miss my upcoming articles

Table of contents

  • How empty image src & background image url will destroy the site?
  • What happens when the image src or background url will be empty
  • What's the root cause?
  • Debugging
  • Solution
  • Reference

How empty image src & background image url will destroy the site?

There are several forms that may destroy your server:

  1. Image with empty src

    • Stright HTML
      <img src="">
      
    • JavaScript
      const image = new Image();
      image.src = ""
      
  2. Background Image with empty url

    • Stright HTML
      <div class="lazy" style="background-image: url()" data-src="/images/cover.jpg">
      .
      .
      .
      </div>
      

What happens when the image src or background url will be empty

imag-src.png

Depending on the browser, we will have different results. may your browser reload the page or makes a request to the actual page itself or nothing.

What's the root cause?

carbon (1).png

The root cause is URI resolution is performed in browsers.

URI "resolution" is the process of determining an access mechanis and the appropriate parameters necessary to dereference a URI.

This issue happens in the algorithm of converting a URI reference (that might be relative) to a given base URI.

you can read more details about this issue in this article!

Debugging

1- For <img>

  • With CSS

    img[src=""] {
    outline: 2px solid red;
    padding: 20px;
    }
    
  • With JS

    const imagesWithoutSrc = document.querySelectorAll('img[src=""]')
    

2- For Background URL

[...document.querySelectorAll('div')].filter(item => item.style.backgroundImage === `url("")`)

Solution

It's better set a src and url for them, or set 1x1 pixel png image or a Base64 encoded pixel like: iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg== , if you want code a lazy-loading feature.

Reference

Thanks for reading.

 
Share this