Rules Hub
Coding Rules Library
Prefer focal-point cropping over blind resizing
Avoid simple center-cropping or scaling for editorial images; use focal-point (AOI) metadata to ensure the subject remains visible.
Bad example
| 1 | class Article { |
| 2 | get thumbnail(): string { |
| 3 | // Bad: Blindly resizes the image to 600px width. |
| 4 | // If the subject (e.g., a person's face) is on the side, it may be cropped out. |
| 5 | return ImageService.resize(this.originalImage, { width: 600, height: 400 }); |
| 6 | } |
| 7 | } |
Explanation (EN)
Simply resizing or center-cropping an image ignores its content. This often leads to awkward crops where heads, text, or key details are cut off, degrading the user experience.
Objašnjenje (HR)
Jednostavno skaliranje ili izrezivanje slike iz sredine ignorira njezin sadržaj. To često dovodi do loših rezultata gdje su glave, tekst ili ključni detalji odrezani, što narušava korisničko iskustvo.
Good example
| 1 | class Article { |
| 2 | get thumbnail(): string { |
| 3 | // Good: Uses Area of Interest (AOI) or focal point metadata. |
| 4 | // The cropping engine adjusts the viewport to keep the subject visible. |
| 5 | return ImageService.smartCrop(this.originalImage, { |
| 6 | width: 600, |
| 7 | height: 400, |
| 8 | focalPoint: this.leadImage.focalPoint // or this.aoiData |
| 9 | }); |
| 10 | } |
| 11 | } |
Explanation (EN)
Using 'Area of Interest' (AOI) or focal point metadata allows the image service to crop intelligently. This ensures the main subject remains visible and well-framed regardless of the target aspect ratio.
Objašnjenje (HR)
Korištenje podataka o 'području interesa' (AOI) ili točki fokusa omogućuje usluzi slike pametno izrezivanje. To osigurava da glavni subjekt ostane vidljiv i dobro kadriran bez obzira na ciljani omjer slike.