Rules Hub
Code Ruleset
Rule priority, scope & exceptions
Use this to align rules with the senior-level structure (P0/P1/P2, scope, exceptions/tradeoffs).
Match image intrinsic width/height to its rendered size
Match image aspect ratio and reserved layout to its rendered use; intrinsic dimensions and CSS display size need not be numerically equal.
Bad example
| 1 | <img src={squareImageUrl} alt={imageDescription} width={98} height={48} /> |
Explanation (EN)
An incorrect aspect ratio or unreserved space can shift layout as an image loads.
Objašnjenje (HR)
Good example
| 1 | <img src={squareImageUrl} alt={imageDescription} width={98} height={98} className="h-10 w-10 lg:h-[98px] lg:w-[98px]" /> |
Explanation (EN)
Accurate square dimensions reserve the right ratio while CSS chooses responsive display sizes.
Objašnjenje (HR)
Notes (EN)
Provide an accurate image aspect ratio and reserve its layout space; choose resource resolution separately for the rendered size and device pixel ratio.
Exceptions / Tradeoffs (EN)
HTML width/height attributes can intentionally differ from CSS display size while preserving ratio and preventing layout shift. Do not delete useful dimensions merely because a responsive CSS rule overrides them.