Bunch of obvious questions about images and UI:
- What is “HiDPI” and when to use it?
- What is “Cover”?
- …and “Contain”?
HiDPI is for 2x images. Since retina displays are used, it’s a good thing to make icons always twice as big as you need it to.
Cover will cover an area with an image sizing it between left and right.
Contain will cover an area with an image sizing it between top and bottom.
2 Likes
Ad. 1. Should I export ALL images double-sized (e.g. 2048x1536 for FS) and, also, their 1x versions? On what devices (Default, Tablet - portrait, …) should I place double-sized and on what single-sized?
You should not export all images double-size. ESP background images that are already really big. Usually you want to export at 2x the size for graphics, logos, smaller images.
Right now in Webflow you can only upload one image - so you won’t be able to upload a 1x and 2x. We recommend 2x so that it will look crisp on mobile devices. Later on we will be doing auto image processing so that the 2x images scale down for smaller devices (you don’t need the full size sometimes).
1 Like
Normally i use Photoshop, with a resolution of 72Dpi. I heard people using 90 Dpi,
But if i understand it well: The best i can do is using 144Dpi for my images?
It’s best to leave your DPI at 72 and instead double the resolution of your image. So if your image is 100 x 100px you should double its size to 200x200px (this is why working with vectors is important) and select the “@2x” setting so that it displays the image as 100 x 100px to all your users, but with higher density for retina displays.
O.K. Thank you Sergie!