If possible, the utilisation of svg image format (or <svg/> html tag) is recommended over other image format.

Because SVGs are generally smaller than other image format, they’re less taxing on your server despite needing to render on load.

When to use SVG:

Your image is used for decorative website graphics, logos, icons, graphs and diagrams, and other simple images.
You image require animation.
You image need to be responsive and scale without lack of quality.

Some advantages of using SVG:

SVGs are scalable and will render pixel-perfect at any resolution whereas JPEGs, PNGs and GIFs will not.
SVGs are vector images and therefore are usually much smaller in file-size than bitmap-based images.
SVGs can be embedded into the HTML which means they can be cached, edited directly using CSS and indexed for greater accessibility.
SVGs can be animated directly or by using CSS or JavaScript making it easy for web designers to add interactivity to a site.

Non compliant Code Example

img_jpg = "image.jpg"

Compliant Solution

img_svg = "image.svg"

Non compliant Code Example

public void foo() {
    // ...
    image_format = testImage("image.jpg")
    // ...
}

Compliant Solution

public void foo() {
    // ...
    image_format = testImage("image.svg")
    // ...
}

Non compliant Code Example

public void foo() {
    // ...
    return '<html><img src="xx/xx/image.bmp"></html>'
    // ...
}

Compliant Solution

public void foo() {
    // ...
    return '<html><img src="xx/xx/image.svg"></html>'
    // ...
}

 public void foo() {
    // ...
    return ('<html><svg width="100" height="100"><circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow"/></svg></html>')
    // ...
}

Relevance Analysis

The following results were obtained through local experiments.

Configuration

SQLite Database: 5-6 GB
Processor: Intel® Core™ Ultra 5 135U, 2100 MHz, 12 cores, 14 logical processors
RAM: 16 GB
CO2 Emissions Measurement: Using CodeCarbon

Context

This rule depends heavily on the context. For simple icon, the use of SVG is relevant because they will be lighter than their JPG counterparts. However, for more complex images, such as photographs, SVG will be heavier.

Example: for the same photo in JPG, it will be 370 KB and in SVG, it will be 830 KB.

This is because the vector format is not suitable for details, it is suitable for simple shapes (circle, line, icon, etc.). It has advantages in this area because it is not composed of pixels, it is extremely scalable. In the following cases: data science, convolutional neural networks, multimodal models, OCR, the SVG format is not suitable, it is preferable to use JPG or PNG. And this, because the models were trained on JPG and PNG formats and this is the input format of the CNNs, the use of SVG would involve additional preprocessing of the image. For example, the well-known CIFAR-10 dataset is in JPG format as can be seen in the following image, representing the architecture of a CNN.

References

https://www.tensorflow.org/tutorials/images/cnn?hl=fr https://www.researchgate.net/publication/373715986_Convolutional_Neural_Network_CNN_The_architecture_and_applications