Resolve "Lazy load images on the Frontend"

What does this MR do?

It introduces Lazy Image Loading to the Frontend. Currently its about avatars and content images of notes.

See updated Frontend Performance Documentation :

To improve the time to first render we are using lazy loading for images. This works by setting the actual image source on the data-source attribute. After the HTML is rendered and JS is loaded , automatically JS will move the url from data-source to src, if the image is in the current viewport.

• Prepare images in html for lazy loading by renaming the src attribute to data-source
• If you are using the Ruby helper image_tag you can simply add the option lazy: true

If you are adding asynchronously content which contains lazy images then you need to call the function gl.lazyLoader.searchLazyImages() which will search for lazy images and load them if needed.

Are there points in the code the reviewer needs to double check?

Backend : The chaining of the image_tag, String replacement to get src to data-src Frontend : Better setup possible ? UX : Ok with Empty Avatar state ? Maybe have special styling for inline content images

Why was this MR needed?

To make GitLab load faster especially if there are many images + avatars

Screenshots

Does this MR meet the acceptance criteria?

• Changelog entry added, if necessary
• Documentation created/updated
• Tests
  • Added for this feature/bug
  • All builds are passing
• Conform by the merge request performance guides
• Conform by the style guides
• Branch has no merge conflicts with master (if it does - rebase it please)
• Squashed related commits together

What are the relevant issue numbers?

Closes #34361 (closed)