I am building a website and I want to make HTTP queries as few as possible for a better website speed and seo. The page I just created is showing images on scroll (images have an attribute data-scr which is converted to src when the user scrolls down at the respective image).Because all images have the data-src attribute instead of src, W3C shows me errors.At this moment I found two options, to solve this problem:The initial src of all images to be an url of a blank 1x1 imageThe initial src of all images to be a data base 64 blank imageWhen I am using an URL of a blank 1x1 image, then (tested with tools.pingdom.com) it shows 1 HTTP request. When I am using a data base64 blank image then it shows as many requests as the number of images on page.Which of them is the more efficient way, for a website faster speed and makes fewer HTTP requests? (let's suppose that the user is loading the webpage at a 14.4kbps internet speed - first internet speed).But for SEO?Is there any other option?
Blank image. What to use: Base64 vs 1x1 JPEG image
seo;images;performance;page speed
The base64 image option should be used where you would only have a very small number of images and you want to eliminate the network overhead of fetching a picture from the server. However from what you are indicating in the question I assume this could scale to a large number of images. In this case I would use a single 1px x 1px transparent image from the server with a long cache lifetime as it will be fetched from the server once then cached in the browser and any intermediate proxy servers.As an example this image would be around 95 bytes in size (https://commons.wikimedia.org/wiki/File:1x1.png), for a base64 encoded image string you would find the size would be on par with this image file size but would be repeated for every single image you add it to.For 2-5 images the size and speed would be negligible and would decrease server traffic by eliminating one whole fetch, but for more than that the page size would start to get too large which would affect loading times and in turn SEO ranking.