responsive-design

Images

• Use srcset to serve images of different resolutions based on the device's screen size and pixel density.
• Use <picture> element to provide different image sources for different screen sizes or orientations.
• When using <picture>, ensure you match the pixel sizes with the actual breakpoints defined in CSS.
• When using <picture>, ensure that you add widths and heights to the <img> and <source> elements to prevent layout shifts.