For optimal results, it is best to utilize SVGs for vector graphics and export them as SVG files. This format allows for infinite scaling and keeps the file size minimal.
If you only have bitmap images instead of vectors, consider exporting them as PNG if they contain transparency or JPEG if not. Additionally, make sure to export all bitmap images (PNG, JPEG) in 1x, 2x, and 3x resolutions.
When implementing these images in your code, avoid using
<img width="300" srcset="...">
as this will result in unnecessary resizing by the browser, leading to larger image sizes rendered. Instead, maintain the original dimensions of the exported images without specifying a width/height attribute, like so:
<img srcset="image.jpg 1x, <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b3daded2d4d6f381cb9dd9c3d4">[email protected]</a> 2x, <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d5bcb8b4b2b095e6adfbbfa5b2">[email protected]</a> 3x">
.
The inclusion of 2x and 3x resolutions is crucial, especially for devices with scaling above 100%. For instance, on a laptop set at 125% scaling, users will view the sharper 2x images.
As a bonus suggestion, I recommend exploring Desech Studio, which simplifies the process by importing designs from Figma and offering exports to React, Angular, Vue, or basic HTML/CSS formats.