I'm looking for the most efficient way to preload imagery. I'm familiar lazy loading etc but I'm looking for something specific. For example, LinkedIn when loading up looks to pre-load a generic svg image for all posts before loading the physical post imagery.
I would like to do the same for a website and use a single image or background colour whilst pre-loading imagery until ready. I'm also curious to know whether this is the best method in alignment with core web vitals.
Perhaps I'm Googling the wrong terminology but from what I understand the approach may be to use a combination of the src and data attributes or perhaps to override the image load with JQuery to load the placeholder. I'm not sure but if someone can point me to some documentation or give me a demo that would be great.
Thanks in advance
I think the term that you're looking for is "placeholders" or possibly "low quality image placeholders". Preloading usually refers to using preload resource hints to load a resource earlier. For Core Web Vitals, if you decide to use preload for images you should probably limit its usage to a single image - probably a hero image. These links might be helpful: