В идеале вы хотите работать с SVG, поэтому вы используете векторную графику и экспортируете как SVG. Это будет масштабироваться бесконечно и очень легко по размеру.
Однако, если у вас не векторная графика, а растровые изображения, вам необходимо экспортировать либо в формате PNG при использовании прозрачности, либо в формате JPEG при отсутствии прозрачности. Кроме того, вам необходимо экспортировать все растровые изображения (PNG, JPEG) в форматы 1x, 2x и 3x.
В своем коде не используйте <img width="300" srcset="...">, потому что вы позволяете браузеру изменять размер изображения, и вы в основном используете изображение большего размера, чем необходимо. Вместо этого вы должны оставить изображения в том виде, в каком они были экспортированы, без установки ширины/высоты, например: <img srcset="image.jpg 1x, [email protected] 2x, [email protected] 3x">.
2x и 3x необходимы, потому что, если ОС имеет масштабирование более 100%, например, мой ноутбук имеет масштабирование 125%, люди увидят ваши 2-кратные изображения, и они будут выглядеть четкими.
Кстати, я рекомендую попробовать Desech Studio, так как он импортирует Figma для вас, а затем вы можете экспортировать в React, Angular, Vue или простой HTML/CSS.
person
dreamLo
schedule
14.05.2021
