Rules Hub
Coding Rules Library
Rule priority, scope & exceptions
Use this to align rules with the senior-level structure (P0/P1/P2, scope, exceptions/tradeoffs).
Optimize raster images before committing
Large PNG, JPEG, and similar raster assets should be compressed, converted, or resized before they land in the repo. Non-critical images should also avoid eager loading by default.
Bad example
| 1 | export function HeroPreview() { |
| 2 | return <img src="/static/img/hero-preview.png" alt="Portfolio preview" />; |
| 3 | } |
Explanation (EN)
This commits a potentially oversized raster image with no optimization strategy and no loading hint. Heavy assets slow page loads, waste bandwidth, and often go unnoticed because the file already "works" locally.
Objašnjenje (HR)
Ovo commit-a potencijalno preveliku raster sliku bez strategije optimizacije i bez smjernice za učitavanje. Teški asseti usporavaju učitavanje stranice, troše bandwidth i često prođu neprimijećeno jer lokalno već "rade".
Good example
| 1 | export function HeroPreview() { |
| 2 | return ( |
| 3 | <img |
| 4 | src="/static/img/hero-preview.webp" |
| 5 | alt="Portfolio preview" |
| 6 | loading="lazy" |
| 7 | /> |
| 8 | ); |
| 9 | } |
Explanation (EN)
The asset is optimized before commit and the browser is told not to prioritize it unless needed immediately. This improves transfer size and keeps below-the-fold media from competing with critical content.
Objašnjenje (HR)
Asset je optimiziran prije commita, a browser dobiva uputu da ga ne prioritizira ako nije odmah potreban. Time se smanjuje količina prenesenih podataka i mediji ispod prevoja ne konkuriraju kritičnom sadržaju.
Notes (EN)
Review both file format and display behavior. If the image is photographic or decorative, WebP/JPEG is often better than a raw PNG.
Bilješke (HR)
Provjeri i format datoteke i način prikaza. Ako je slika fotografska ili dekorativna, WebP/JPEG je često bolji izbor od sirovog PNG-a.
Exceptions / Tradeoffs (EN)
Keep PNG or eager loading only when the content genuinely requires lossless transparency or when the image is critical to first paint.
Iznimke / Tradeoffi (HR)
Zadrži PNG ili eager loading samo kada sadržaj stvarno zahtijeva lossless transparentnost ili kada je slika kritična za prvi prikaz.