Inserting pictures what resolution

**behzad** · 25 July 2019, 11:42 AM

Considering the now new feature (fit to screen) and the retina feature. A lot of my images that are imported are higher resolution than 96 dpi. I know that xara outputs 96 dpi for the web but what about file size and memory used by xara to calculate the images? Do you think that has an effect on slowing down the processing process (rendering)?

Would you suggest importing all images at 96 dpi? If so, I have found that quality of resolution gets even more degraded once rendered and displayed on browsers.

**Boy** · 25 July 2019, 01:11 PM

Originally Posted by behzad

Would you suggest importing all images at 96 dpi? If so, I have found that quality of resolution gets even more degraded once rendered and displayed on browsers.

I think you answered your own question. In addition, Xara allows you to export/publish pictures at retina resolution for hi-res screens, so 96 would be way too low.

**gwpriester** · 25 July 2019, 02:19 PM

192 for retina. So this resolution (or higher) should work for both options.

**pauland** · 25 July 2019, 02:30 PM

Surprised to hear that DPI is still alive and well in website conversations in 2019.

DPI has no relevance to web pages. All that is important is the size of the bitmap in relation to web page size.

So if your square image is going to fill 1/4 of the width of your web page and your largest variant is for a web page that is 1600 pixels wide, then nominally your bitmap should have a width of 400 pixels. For higher resolution screens ( where multiple pixels = 1 browser pixel ) then double or triple that for modern screen and phones - 800 or 1200 pixels.

Traditionally those higher resolutions will have siffixes @2x and @3x and the browser will choose the right one for the device.

So we need image.jpg 400x400, image@2x.jpg 800x800, image@3x.jpg.

DPI is for print, not web pages.

**behzad** · 25 July 2019, 02:32 PM

My bad Paul, ppi.

**pauland** · 25 July 2019, 02:51 PM

ppi doesn't really matter for bitmaps either because as a web designer we have no control of the device resolution. We design web pages to browser pixels (points) and they are highly unlikely to match the actual pixels on the users display. They may match, or the actual display may display a single point using four pixels (2x2) or even nine pixels (3x3) - hence my advice about the pixel sizes required. So ppi is not relevant to us as web designers beyond understanding that high ppi displays will map multiple screen pixels to one browser pixel(point).

Forget about inch measures when designing web pages. We only work with virtual pixels (points).