Stack Overflow
Stack Overflow

Questions tagged [pixel-density]

Pixel density, or resolution, is the measurement of pixels per inch/centimeter of devices such as computer displays, smartphones, scanners, or image sensors.

Pixel density is the number of pixels a display can fit into a fixed distance. This measurement is calculated in pixels per inch (PPI) or pixels per centimeter (PPCM). The higher the pixel density, the crisper the output of the display appears. The human eye can not discern granular detail when it is higher than 300 PPI.

Common Pixel Densities

  • 72/96 PPI - Common for standard definition web graphics
  • 150 PPI - Offset Print Quality
  • 220+ PPI - Retina Displays
  • 300 PPI - Large Scale Print Quality
  • 557 PPI - Samsung Galaxy S6
64 questions
121
votes
7 answers

android splash screen sizes for ldpi,mdpi, hdpi, xhdpi displays ? - eg : 1024X768 pixels for ldpi

I have to design splash screens(images that fit screen while loading) for android application using phonegap. I have to design 4 size images that fit for 4types of screens like ldpi, mdpi , hdpi, xhdpi . Can anyone tell me exact sizes in pixels for…
user1767962
  • 2,089
  • 4
  • 18
  • 19
13
votes
1 answer

@2x retina image equivalent in Android

I'm converting a iOS application to android. (using android studio) I have all my image as ...@2x.png So, My 2 questions: 1- Can I copy all my @2x to ONLY folder "xhdpi", and android will auto adjust density for the devices? 2- Was "xhdpi" really…
Franck
  • 8,939
  • 8
  • 39
  • 57
10
votes
0 answers

Android device uses resources from different density sets in debug and signed APK

I noticed that my app shows slightly different layout on the same device depending on whether I am running the debug APK or the signed release APK. After much head scratching, I have isolated the problem to device density specific resource values.…
Amarghosh
  • 58,710
  • 11
  • 92
  • 121
9
votes
1 answer

React Native: Half pixel border issues on high Pixel Density devices

I'm using 0.5px borders in my React Native app. This works great on most devices but on an iPhone 6 plus these borders show up blurry. After reading up on pixel ratios here I've resolved to using something like below. I wonder if anyone else has…
Anshuul Kai
  • 3,876
  • 2
  • 27
  • 48
8
votes
1 answer

Responsive images - srcset and sizes attribute - how to use both correctly: device-pixel-ratio-based and viewport-based selection together?

I have read about this problem quite often so far and it also occurs for my own projects. Here is an introduction of what I have found out so far about the srcset and the sizes attribte. There are two different possibilities on how to use the…
Blackbam
  • 17,496
  • 26
  • 97
  • 150
8
votes
2 answers

Converting dp to px without Context

There is a very neat way of converting dp to px without Context, and it goes like this: public static int dpToPx(int dp) { float density = Resources.getSystem().getDisplayMetrics().density; return Math.round((float) dp * density); } In…
Vladimir Jovanović
  • 2,261
  • 2
  • 24
  • 43
8
votes
3 answers

Android elevation and setElevation not the same effect

I noticed when I use elevation property in xml and set it to 4dp, I get a normal shadow. When I use setElevation(4) in java, I get less of a shadow than the xml property does. How can I fix that?
qwertz
  • 6,206
  • 9
  • 40
  • 62
5
votes
1 answer

Why 2 devices of same size, same resolution, claims different density?

Please take a look at Material IO's device metrics: Pay attention to Google Pixel and HTC One M9. These 2 devices have the same physical size, same number of pixels, but claimed to have different pixel densities. This contradicts with my…
Sira Lam
  • 5,179
  • 3
  • 34
  • 68
5
votes
2 answers

Retina - Correlation between device pixel ratio and size of image?

I don't quite understand what the window.devicePixelRatio value is, and how it dictates what size image (2x, 3x, etc) I need for that device. For instance, on an iMac 5K Retina (Late 2015), I'd expect the pixel ratio to be at least 3 or so, but it's…
ffxsam
  • 26,428
  • 32
  • 94
  • 144
4
votes
2 answers

responsive images with srcset, sizes, media-queries - Prevent loading huge images for higher pixel density

I used picture element for responsive images in different sizes per viewport a long time. it worked fine, but now I am forced to switch over to responsive with srcset and sizes and I try to rewrite my picture element to the IMG-style. After…
Radon8472
  • 4,285
  • 1
  • 33
  • 41
4
votes
1 answer

w and px of the srcset attribute in html

In the srcset attribute of img element in html, we can specify either the width or the pixel density of each source. We use w to specify width and x to specify pixel density. I have some questions about w and x. Does 500w mean that the width of the…
Sara
  • 245
  • 4
  • 11
4
votes
4 answers

Setting JPG density (dpi) with no increase in file size

I use (under Windows) the following command magick convert -units pixelsperinch file_in -density 600 file_out to set the dpi (no resampling, as dpi basically is, as far as I understand, just a tag that specifies pixel size) of a JPG image. It…
mmj
  • 5,514
  • 2
  • 44
  • 51
4
votes
1 answer

Specifying both image size and pixel density in srcset

Here's my img tag:
Sammy
  • 3,395
  • 7
  • 49
  • 95
4
votes
2 answers

Using html5 appcache with media queries for pixel ratio

I have a web app which uses media queries based on pixel ratio to deliver images of an appropriate resolution to client devices. For example, it will deliver 1x images to a Windows desktop and 2x images to an iPhone with retina display. I am…
Michael Bednarek
  • 169
  • 1
  • 13
4
votes
3 answers

Not able to understand how to use different density images for 1.6+?

I'm trying to understand how the res/drawables images should work with different screen densities. Right now I've got a 1.5 app, and for example, I have an image that is 100x100 pixels. When used on the Droid, it scales this image so it appears to…
Mark
  • 39,551
  • 15
  • 41
  • 47
1
2 3 4 5