Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add new rule EC31: Prefer lighter formats for image files #330

Draft
wants to merge 2 commits into
base: main
Choose a base branch
from
+51 −2
Draft

Add new rule EC31: Prefer lighter formats for image files #330

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
67aa754
Add new rule EC31: Prefer lighter formats for image files
salah-dev-inp May 30, 2024
309a61b
Merge branch 'main' into EC31-prefer-lighter-formats-for-image
salah-dev-inp May 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion RULES.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ Some are applicable for different technologies.
| EC28 | Optimize read file exceptions | | | ✅ | 🚫 | 🚫 | 🚫 | 🚫 | 🚫 | 🚫 |
| EC29 | Avoid usage of CSS animations | ESLint key : @ecocode/avoid-css-animations /// type : Front-end | | ❓ | ❓ | ✅ | ❓ | ❓ | ❓ | 🚫 |
| EC30 | Provide a print stylesheet | ESLint key : @ecocode/provide-print-css /// type : Front-end | | ❓ | ❓ | ✅ | ❓ | ❓ | ❓ | 🚫 |
| EC31 | Prefer lighter formats for image files | ESLint key : ... /// type : ... | | ❓ | ❓ | 🚀 | ❓ | ❓ | ❓ | 🚀 |
| EC31 | Prefer lighter formats for image files | ESLint key : ... /// type : ... | | ✅ | ❓ | 🚀 | ❓ | ❓ | ❓ | 🚀 |
| EC32 | Initialize builder/buffer with the appropriate size | If you know in advance how many characters would be appended, initialize builder/buffer with the appropriate size. They will thus never have to be resized. This saves CPU cycles and therefore consumes less energy. | | ✅ | 🚫 | 🚫 | 🚫 | 🚫 | 🚫 | 🚫 |
| EC35 | Using try...catch calls (on File Not Found error) | When an exception is thrown, a variable (the exception itself) is created in the catch block and destroyed at the end of the block. Creating this variable and destroying it consumes CPU cycles and RAM unnecessarily. That is why it is important not to use this construction and to prefer, as much as possible, a logical test. This new rule replace old EC34 only for a particular use case (FileNotFoundException) | [cnumr best practices (3rd edition) BP_047 (no longer exists in edition 4)](https://www.greenit.fr/2019/05/07/ecoconception-web-les-115-bonnes-pratiques-3eme-edition/) | 🚫 | ✅ | 🚀 | ✅ | 🚀 | 🚫 | 🚫 |
| EC36 | Avoid autoplay for videos and audio content | Autoplaying media consumes unnecessary energy, especially when users might not be actively engaging with the content. | [cnumr best practices BP_4003](https://github.com/cnumr/best-practices/blob/main/chapters/BP_4003_en.md) | 🚫 | 🚫 | 🚀 | 🚫 | 🚫 | 🚫 | 🚧 |
Expand Down
3 changes: 2 additions & 1 deletion ecocode-rules-specifications/src/main/rules/EC31/EC31.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@
"defaultSeverity": "Minor",
"compatibleLanguages": [
"JAVASCRIPT",
"TYPESCRIPT"
"TYPESCRIPT",
"JAVA"
]
}
48 changes: 48 additions & 0 deletions ecocode-rules-specifications/src/main/rules/EC31/java/EC31.asciidoc
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
== Why is this an issue?

Using appropriate image formats and optimizing image sizes is essential for improving application performance, user experience, and overall environmental impact.
Larger image file sizes consume more bandwidth, increasing the data transfer required to load an application.
Some image formats are generally considered better for eco-friendly application design and should be used in most cases.

We recommend using the following formats:

- *WebP*, developed by Google, is a modern image format that provides high compression efficiency without significant loss of quality.
- *AVIF* (AV1 Image File Format) is a relatively new and highly efficient image format that is based on the AV1 video codec.
Files are lightweight and can be scaled without loss of quality.

[source,java,data-diff-id="1",data-diff-type="noncompliant"]

## Noncompliant Code Example

```java
public class ImageHandler {
public void loadImage() {
String imagePath1 = "images/photo.jpg";
String imagePath2 = "images/graphic.png";
//...
}
}
```

## Compliant Solution

```java
public class ImageHandler {
public void loadImage() {
String imagePath1 = "images/photo.webp";
String imagePath2 = "images/graphic.avif";
//...
}
}
```

== Resources

=== Documentation

- https://github.com/cnumr/best-practices/blob/main/chapters/BP_080_en.md[CNUMR best practices - Optimize images]

=== Articles & blog posts

- https://greenspector.com/en/which-image-format-to-choose-to-reduce-its-energy-consumption-and-its-environmental-impact/[greenspector.com - Which image format to choose to reduce its energy consumption and its environmental impact?]
- https://dodonut.com/blog/use-cases-of-web-image-formats/[dodonut.com - The Most Efficient Web Image Formats. Use Cases For Different Types Of Images.]
Loading