CODEWITHSUNDEEP
androidcssgraphicsresolution
Clarus Dignus
Clarus Dignus

Reputation: 3897

Blurry web graphics on smart phone - double image size or resolution?

Various web graphics I've created are blurred on high resolution smart phone screens, unlike desktops screens.

Do I need to:

  1. double the image size and programmatically resize it to half
  2. increase the resolution (e.g. 72 to 300).

My understanding is that the latter only affects print rather than digital screens.

Are others experiencing this issue and if so, what it is the recommended work-around?

Upvotes: 2

Views: 479

Answers (2)

hungerstar
hungerstar

Reputation: 21715

Your assumptions are correct. You need to double the image size, maybe even a little more if you wanted to get picky as some screen resolutions have 3x or more pixel density than a desktop monitor. Double works pretty well though so I would start there.

Resolution, as in DPI, won't do anything for web graphics on screens besides make the image resource's filesize larger than it needs to be. You could have a resolution of 5 DPI and they would look the same as 300 DPI on a screen. The main issue with lowering DPI for web graphics is when a user wants to print your page, then any images with really low DPI would be very pixelated.

Depending on the graphics you've created you have some options besides your standard image formats. You can use SVG or create your own icon font. Both are vector images so they will look sharp on any device that supports them. Icon fonts are widely supported and SVG is decent but might need a small shim depending on what you need to do.

Upvotes: 3

3pic
3pic

Reputation: 1219

Double image size.

You should even render image (simple or doubled), depending on the device/viewport resolution.

increasing resolution is quite a complicated matter. Print/digital/dpi/ppi; it could work on a bunch of devices but not all.

Upvotes: 1

Related Questions