-
Notifications
You must be signed in to change notification settings - Fork 19
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add rule GCI31 "Prefer lighter formats for image files" (#46)
Co-authored-by: Lucas Leroux <[email protected]> Co-authored-by: Vincent-Letourmy <[email protected]> Co-authored-by: utarwyn <[email protected]>
- Loading branch information
4 people
authored
Feb 3, 2025
1 parent
a14c77c
commit 3360ca3
Showing
8 changed files
with
302 additions
and
15 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
88 changes: 88 additions & 0 deletions
88
eslint-plugin/docs/rules/prefer-lighter-formats-for-image-files.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,88 @@ | ||
| # Prefer lighter formats for image files (`@creedengo/prefer-lighter-formats-for-image-files`) | ||
|
|
||
| ⚠️ This rule _warns_ in the ✅ `recommended` config. | ||
|
|
||
| <!-- end auto-generated rule header --> | ||
|
|
||
| ## Why is this an issue? | ||
|
|
||
| Using appropriate image formats and optimizing image sizes is essential for improving website performance, user experience, and overall environmental impact. | ||
| Larger image file sizes consume more bandwidth, increasing the data transfer required to load a web page. | ||
| Some image formats are generally considered better for eco-friendly web 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. | ||
| - **SVG** (Scalable Vector Graphics) is a vector image format that is based on XML. | ||
| Files are lightweight and can be scaled without loss of quality. | ||
|
|
||
| ```html | ||
| <img src="./assets/images/cat.jpg" alt="Unoptimized image of a cat" /> // | ||
| Non-compliant | ||
|
|
||
| <img src="./assets/images/cat.webp" alt="Optimized image of a cat" /> // | ||
| Compliant | ||
| ``` | ||
|
|
||
| Remember that the best image format may vary depending on the specific use case, content, and requirements of your website. | ||
| Always test and evaluate the performance of different formats to find the optimal balance between image quality and file size. | ||
|
|
||
| ### Picture | ||
|
|
||
| Images often represent most of the downloaded bytes, right after videos and just before CSS and JavaScript libraries. | ||
| Optimizing images is important to reduce used bandwidth. The first step is to choose the ideal format for your | ||
| display needs. | ||
|
|
||
| Raster images should be reserved for photos and interface elements that cannot be displayed with icons or CSS styles. | ||
|
|
||
| The appropriate format depends on the image properties : black & white or color, color palette, need for transparency... | ||
| Among these properties, the possibility to irremediably alter images quality (lossy compression) tends to favor formats such as JPEG, JPEG XL, | ||
| AVIF, or WebP, while needing transparency and/or the impossibility to alter the image quality (lossless compression) will tend to favor | ||
| PNG or WebP lossless formats (which supports transparency). | ||
|
|
||
| Format importantly impacts images size: on average, .webp images will be 30% lighter than .jpeg | ||
| images or .png images. .avif images can be up to 20% lighter than .webp image and 50% lighter than .jepg images. | ||
|
|
||
| Don't forget to pay attention to browser support. .webp images will not be recognized by | ||
| old browsers and will not be displayed. It is possible to provide several formats for the same image | ||
| to overcome this issue. Some server-side modules (such as Google's modPageSpeed, also available for Apache | ||
| and Nginx) even allow you to provide the appropriate image for the browser that is calling the server. | ||
|
|
||
| Many tools will help you minimize images size: | ||
|
|
||
| - SQUOOSH | ||
| - CLOUDINARY | ||
| - ImageMagick | ||
| - PngCrush | ||
| - JpegTran | ||
|
|
||
| ### Example | ||
|
|
||
| In this example, the DOM <picture> element informs the browser that there are two images: a .webp image and a | ||
| .jpg image, which is used by default. The browser will decide which image will be downloaded. If the .webp format | ||
| is supported, the image.webp image will be downloaded; otherwise, image.jpg image will be downloaded. | ||
|
|
||
| ```html | ||
| <picture> | ||
| <source srcset="image.webp" type="image/webp" /> | ||
| <img src="image.jpg" alt="..." loading="lazy" /> | ||
| </picture> | ||
| ``` | ||
|
|
||
| Also remember to consider browser compatibility. | ||
| Older browsers may not recognize .webp/.avif images and fail to display them. | ||
| To address this issue, you can supply multiple formats for the same image. | ||
|
|
||
| ## Resources | ||
|
|
||
| ### Documentation | ||
|
|
||
| - [CNUMR best practices](https://github.com/cnumr/best-practices/blob/main/chapters/BP_080_en.md) - Optimize images | ||
| - [WSG UX15-2](https://w3c.github.io/sustyweb/star.html#UX15-2) - Optimizing All Image Assets for a Variety of Different Resolutions | ||
| - [RGESN 5.1](https://ecoresponsable.numerique.gouv.fr/publications/referentiel-general-ecoconception/critere/5.1/) - Référentiel général d'écoconception de services numériques 🇫🇷 | ||
|
|
||
| ### Articles & blog posts | ||
|
|
||
| - [greenspector.com - Which image format choose to reduce energy consumption and environmental impact?](https://greenspector.com/en/which-image-format-to-choose-to-reduce-its-energy-consumption-and-its-environmental-impact/) | ||
| - [dodonut.com - The Most Efficient Web Image Formats. Use Cases For Different Types Of Images.](https://dodonut.com/blog/use-cases-of-web-image-formats/) |
72 changes: 72 additions & 0 deletions
72
eslint-plugin/lib/rules/prefer-lighter-formats-for-image-files.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,72 @@ | ||
| /* | ||
| * creedengo JavaScript plugin - Provides rules to reduce the environmental footprint of your JavaScript programs | ||
| * Copyright © 2023 Green Code Initiative (https://green-code-initiative.org) | ||
| * | ||
| * This program is free software: you can redistribute it and/or modify | ||
| * it under the terms of the GNU General Public License as published by | ||
| * the Free Software Foundation, either version 3 of the License, or | ||
| * (at your option) any later version. | ||
| * | ||
| * This program is distributed in the hope that it will be useful, | ||
| * but WITHOUT ANY WARRANTY; without even the implied warranty of | ||
| * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the | ||
| * GNU General Public License for more details. | ||
| * | ||
| * You should have received a copy of the GNU General Public License | ||
| * along with this program. If not, see <http://www.gnu.org/licenses/>. | ||
| */ | ||
|
|
||
| "use strict"; | ||
|
|
||
| /** @type {import('eslint').Rule.RuleModule} */ | ||
| module.exports = { | ||
| meta: { | ||
| type: "suggestion", | ||
| docs: { | ||
| description: "Prefer lighter formats for image files", | ||
| category: "eco-design", | ||
| recommended: "warn", | ||
| }, | ||
| messages: { | ||
| PreferLighterFormatsForImageFiles: | ||
| "You should use lighter formats for image files such as {{ eligibleExtensions }}", | ||
| }, | ||
| schema: [], | ||
| }, | ||
| create(context) { | ||
| const eligibleExtensions = ["webp", "avif", "svg", "jxl"]; | ||
|
|
||
| return { | ||
| JSXOpeningElement(node) { | ||
| const tagName = node.name.name; | ||
| if (tagName?.toLowerCase() !== "img") return; | ||
|
|
||
| const parentTagName = node.parent?.parent?.openingElement?.name?.name; | ||
| if (parentTagName?.toLowerCase() === "picture") return; | ||
|
|
||
| const srcAttribut = node.attributes.find( | ||
| (attr) => attr.name.name === "src", | ||
| ); | ||
|
|
||
| let srcValue = srcAttribut?.value?.value; | ||
|
|
||
| if (!srcValue) return; | ||
|
|
||
| srcValue = srcValue.substring(srcValue.lastIndexOf("/") + 1); | ||
| const dotIndex = srcValue.lastIndexOf("."); | ||
|
|
||
| if (dotIndex === -1) return; | ||
|
|
||
| const imgExtension = srcValue.substring(dotIndex + 1); | ||
|
|
||
| if (eligibleExtensions.includes(imgExtension.toLowerCase())) return; | ||
|
|
||
| context.report({ | ||
| node, | ||
| messageId: "PreferLighterFormatsForImageFiles", | ||
| data: { eligibleExtensions: eligibleExtensions.join(", ") }, | ||
| }); | ||
| }, | ||
| }; | ||
| }, | ||
| }; |
86 changes: 86 additions & 0 deletions
86
eslint-plugin/tests/lib/rules/prefer-lighter-formats-for-image-files.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,86 @@ | ||
| /* | ||
| * creedengo JavaScript plugin - Provides rules to reduce the environmental footprint of your JavaScript programs | ||
| * Copyright © 2023 Green Code Initiative (https://green-code-initiative.org) | ||
| * | ||
| * This program is free software: you can redistribute it and/or modify | ||
| * it under the terms of the GNU General Public License as published by | ||
| * the Free Software Foundation, either version 3 of the License, or | ||
| * (at your option) any later version. | ||
| * | ||
| * This program is distributed in the hope that it will be useful, | ||
| * but WITHOUT ANY WARRANTY; without even the implied warranty of | ||
| * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the | ||
| * GNU General Public License for more details. | ||
| * | ||
| * You should have received a copy of the GNU General Public License | ||
| * along with this program. If not, see <http://www.gnu.org/licenses/>. | ||
| */ | ||
|
|
||
| "use strict"; | ||
|
|
||
| //------------------------------------------------------------------------------ | ||
| // Requirements | ||
| //------------------------------------------------------------------------------ | ||
|
|
||
| const rule = require("../../../lib/rules/prefer-lighter-formats-for-image-files"); | ||
| const RuleTester = require("eslint").RuleTester; | ||
|
|
||
| //------------------------------------------------------------------------------ | ||
| // Tests | ||
| //------------------------------------------------------------------------------ | ||
|
|
||
| const ruleTester = new RuleTester({ | ||
| parserOptions: { | ||
| ecmaVersion: 2021, | ||
| sourceType: "module", | ||
| ecmaFeatures: { | ||
| jsx: true, | ||
| }, | ||
| }, | ||
| }); | ||
|
|
||
| const preferLighterFormatsForImageFilesError = { | ||
| messageId: "PreferLighterFormatsForImageFiles", | ||
| type: "JSXOpeningElement", | ||
| }; | ||
|
|
||
| ruleTester.run("prefer-lighter-formats-for-image-files", rule, { | ||
| valid: [ | ||
| ` | ||
| <img src="./assets/images/cat.webp" alt="A cat"/> | ||
| `, | ||
| ` | ||
| <img src="./assets/images/cat.avif" alt="A cat"/> | ||
| `, | ||
| ` | ||
| <img src="./assets/images/cat.jxl" alt="A cat"/> | ||
| `, | ||
| ` | ||
| <picture> | ||
| <source srcSet="image.webp" type="image/webp" /> | ||
| <img src="image.jpg" alt="..." /> | ||
| </picture> | ||
| `, | ||
| ` | ||
| <img src="./assets/images/cat" alt="A cat" /> | ||
| `, | ||
| ` | ||
| <img src="" alt="" /> | ||
| `, | ||
| ], | ||
|
|
||
| invalid: [ | ||
| { | ||
| code: ` | ||
| <img src="./assets/images/cat.jpg" alt="A cat"/> | ||
| `, | ||
| errors: [preferLighterFormatsForImageFilesError], | ||
| }, | ||
| { | ||
| code: ` | ||
| <img src="./assets/images/cat.png" alt="A cat"/> | ||
| `, | ||
| errors: [preferLighterFormatsForImageFilesError], | ||
| }, | ||
| ], | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
37 changes: 37 additions & 0 deletions
37
...rg/greencodeinitiative/creedengo/javascript/checks/PreferLighterFormatsForImageFiles.java
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| /* | ||
| * Creedengo JavaScript plugin - Provides rules to reduce the environmental footprint of your JavaScript programs | ||
| * Copyright © 2023 Green Code Initiative (https://green-code-initiative.org) | ||
| * | ||
| * This program is free software: you can redistribute it and/or modify | ||
| * it under the terms of the GNU General Public License as published by | ||
| * the Free Software Foundation, either version 3 of the License, or | ||
| * (at your option) any later version. | ||
| * | ||
| * This program is distributed in the hope that it will be useful, | ||
| * but WITHOUT ANY WARRANTY; without even the implied warranty of | ||
| * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the | ||
| * GNU General Public License for more details. | ||
| * | ||
| * You should have received a copy of the GNU General Public License | ||
| * along with this program. If not, see <http://www.gnu.org/licenses/>. | ||
| */ | ||
| package org.greencodeinitiative.creedengo.javascript.checks; | ||
|
|
||
| import org.sonar.check.Rule; | ||
| import org.sonar.plugins.javascript.api.EslintBasedCheck; | ||
| import org.sonar.plugins.javascript.api.JavaScriptRule; | ||
| import org.sonar.plugins.javascript.api.TypeScriptRule; | ||
|
|
||
| @JavaScriptRule | ||
| @TypeScriptRule | ||
| @Rule(key = PreferLighterFormatsForImageFiles.RULE_KEY) | ||
| public class PreferLighterFormatsForImageFiles implements EslintBasedCheck { | ||
|
|
||
| public static final String RULE_KEY = "GCI31"; | ||
|
|
||
| @Override | ||
| public String eslintKey() { | ||
| return "@creedengo/prefer-lighter-formats-for-image-files"; | ||
| } | ||
|
|
||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -9,6 +9,7 @@ | |
| "GCI26", | ||
| "GCI29", | ||
| "GCI30", | ||
| "GCI31", | ||
| "GCI36", | ||
| "GCI523", | ||
| "GCI530" | ||
|
|
||