I have a question that have been on my mind for several time now: how should I prepare the images that I am going to use on a website to be retina-ready?
Yes, I have been spending hours on the interweb on this topic, but so far I haven't find the one 'ultimate answer'.
In this thread for example (link: image size for retina display), it is only mentioned that I need to double the dimensions. But how about the resolution?
Real life situation: an image is created using Photoshop (or whatever your fix) at dimension 400px x 200px, with resolution of 72 ppi.How should I modify this image?
800 x 400px at 72 ppi (just resize it, times two)
800 x 400px at 144 ppi (dimensions and resolution times two)
400 x 200px at 144 ppi (just double the resolution)
400 x 200px at 246 ppi (same dimension, higher resolution --I got the number 246 from some tutorial in designing ipad wallpaper)
...et cetera... ??
The target is to select the images and display them on both non-retina and retina displays (i.e. 'normal' computers / laptops, macs (both versions, retina and non), iDevices, Androids, et cetera)
Looking forward for any feedbacks :-)
You could use Retina.js to replace the image with a higher resolution version, but only if the users device is equipped with a retina display.
The question you link is correct. You need to double the size of the image to double the resolution.
What you are getting confused over is the PPI. PPI is Pixels Per Inch, it is simply a measure of how big a picture is, same as display dimensions.
One is not independent of the other.
An image of 400x200 will take up as much screen space on a 72 ppi display as a 800x400 image on a 144 ppi display. The difference is simply that the 144 ppi device is able to fit more pixels in one inch of screen space than the 72 ppi.
So, by doubling the resolution of a 72ppi image, you are indeed insuring that it looks the same/takes the same amount of screen space.
There's a new responsive images HTML5 standard. As of July 2014 it's only in beta builds of browsers yet. But the Picturefill polyfill is already available.
This article explains different use-cases quite well. But what you want here is to simply provide an alternative image for high-resolution (e.g. 'retina') displays:
<img srcset="small.jpg 1x, large.jpg 2x"
src="small.jpg"
alt="A rad wolf" />
Related
I'm so done with this topic ... resolution, pixels, inches, ppi, dpi and all that stuff. I never find a source of explanation which puts me in a state of not-wondering-anymore. Once I have reached that state I'll write a blog post myself.
So, first question: I have an image which I open in Gimp. I click on "Image -> Scale Image". It says my image has 826x1169 pixels at a ppi of 100. Thus the width of my image must be 8,26 inches. I held a goddamn ruler against my screen (feeling stupid doing this): width is 6,1 inches. Why not 8,26? The image demands that its 826 pixels are displayed at a ppi of 100. Why does my screen say "Nope, I only have 6,1 inches for you today, buddy. So I'll squeeze your 826 pixels into those 6,1 inches, enjoy your ~135 ppi lol bye."
Second question, same image: Again I click on "Image -> Scale Image". The "X resolution" and "Y resolution" are chained together. I take it down from 100 to 50/20/whatever. I click on "scale", feeling very confident that my image will shrink since I demand the machine to use more of my precious 826 pixels for each inch ... aaand: nothing changes.
Can someone enlighten me? I got a feeling that both questions are related somehow.
I'm told that DPI and Points are no longer relevant in terminology involving graphical displays on computer screens and mobile devices yet we use the term "High DPI Aware" and in Windows you can set the various DPI levels (96, 120, 144, 192).
Here is my understanding of the various terms that are used in displaying images on computer monitors and devices:
DPI = number of dots in one linear inch. But DPI refers to printers and printed images.
Resolution = the number of pixels that make up a picture whether it is printed on paper or displayed on a computer screen. Higher resolution provides the capability to display more detail. Higher DPI = Higher resolution, however, resolution does not refer to size, it refers to the number of pixels in each dimension.
DPI Awareness = an app takes the DPI setting into account, making it possible for an application to behave as if it knew the real size of the pixels.
Points and Pixels: (There are 72 points per inch.)
At 300 DPI, there are 300 pixels per inch. So 4.16 Pixels = 1 point.
At 96 DPI there are 1.33 pixels in one point.
Is there a nice way to "crisply" describe the relationship between DPI, PPI, Points, and Resolution?
You are correct that DPI refers to the maximum amount of detail per unit of physical length.
Computer screens are devices that have a physical size, so we speak of the number of pixels per inch they have. Traditionally this value has been around 80 PPI, but now it can be up to 400 PPI.
The notion of "High DPI Aware" (e.g. Retina) is based on the fact that physical screen sizes don't change much over time (for example, there have been 10-inch tablets for more than a decade), but the number of pixels we pack into the screens is increasing. Because the size isn't increasing, it means the density - or the PPI - must be increasing.
Now when we want to display an image on a screen has more pixels than an older screen, we can either:
Map the old pixels 1:1 onto the new screen. The physical image is smaller due to the increased density. People start to complain about how small the icons and text are.
Stretch the old image and fill in the extra details. The physical image is the same size, but now there are more pixels to represent the content. For example, this results in font curves being smoother and photographs showing more fine details.
The term DPI (Dots Per Inch) to refer to device or image resolution came into common use well before the invention of printers that could print multiple dots per pixel. I remember using it in the 1970's. The term PPI was invented later to accommodate the difference, but the old usage still lingers in places such as Windows which was developed in the 1980's.
The DPI assigned in Windows rarely corresponds to the actual PPI of the screen. It's merely a way to specify the intended scaling of elements such as fonts.
DPI vs. resolution – What’s the difference?
The acronym dpi stands for dots per inch. Similarly, ppi stands for pixels per inch. So, why have two different acronyms for measuring roughly the same thing? Because there is a key difference between the two and if you don’t understand this difference it can have a negative impact on your digital signage project.
Part of the confusion between the two terms stems from the fact that many people who use them are lazy and tend to use the terms interchangeably. The simplest way of thinking about them is that one is digital (ppi) and represents what you see on the computer screen and the other is physical (dpi) for example, how an image appears when you print it out on a piece of paper.
I suggest you to check this in-depth article talking about the technicality of this topic.
https://blog.viewneo.com/blog/72-dpi-resolution-vs-300-dpi-for-digital-solutions/
The following element is a pic, it can be parsed by PowerPoint. I got confused with it's
measuring units for a couple of hours.
English Metric units (EMUs), points, picas, and inches ?
DPI=96
xmlns:p="http://schemas.openxmlformats.org/presentationml/2006/main"
xmlns:a="http://schemas.openxmlformats.org/drawingml/2006/main"
<p:pic>
....
<a:srcRect l="5556"/>
<p:spPr bwMode="auto">
<a:xfrm>
<a:off x="3545" y="759"/>
<a:ext cx="782" cy="150"/>
</a:xfrm>
.....
</p:spPr>
</p:pic>
English Metric Units are used for measuring sizes and positions of Vector Drawing and Pictures. Everything you need w.r.t. to Measuring Units in Open XML can be found here.
Hope this helped.
This involves more than a mere measure unit...
"DPI 96" comes from a VGA screen size of (or mode) 640x480... maybe other values you could find out there can be "DPI 72" for an EGA screen size of 640x350 or "DPI 48" for a CGA screen size of 640:200 ...
Those things came from the very beginning: MSDOS, Macintosh(Sw&Hw) and IBM PC. On those years (80's) there was several graphic modes each with their own pixel size that graphical drivers managed to draw on those very primitive monitors (very low resolutions and screen size, monochrome, no standars!). DPI 96 stands for "dot per inch 96x96", as VGA pixel is a square of 96x96. CGA and EGA have rectangular pixels of 48×96 and 72×96 respectively...
I'm sure that checking this URLs will help you...
Where does 96 DPI come from in Windows?
DPI & PPI explained
I took a look at the phone specifications and is says something like this
"HTC Desire. It comes with a 3.7" LCD screen (480 x 800 pixels of resolution)"
ok the screen is 480x800 pixels but how many dips it has ? and how do I calculate that.
Also it is confusing for me the fact that Desire HD has the same resolution 480x800 pixcels, and they both use hdpi images. I have application and when I install myApp they both use the images from hdpi folder
can someone tall me what is the resolution in dips in desire and desireHD ?
You can get information about display, such as size, density, and font scaling using DisplayMetrics.
Documentation gives a usage example.
Is there a recommended smallest button size under normal conditions?
By "recommended" I mean prescribed by some document like:
Apple HCI Guidelines
Windows UX Guidelines
or some ISO standard..
By "normal" conditions I mean:
desktop/office use
standard 96dpi monitor resolution
mouse/touchpad for pointing (no touchscreen)
non-disabled or visually impaired users
standard "theme" (no large fonts/icons)
Microsoft's UX Guide for Windows 7 and Vista recommends:
"Make click targets at least 16x16 pixels so that they can be easily clicked by any input device. For touch, the recommended minimum control size is 23x23 pixels (13x13 DLUs)." where"A dialog unit (DLU) is a device-independent metric where one horizontal dialog unit equals one-fourth of the average character width for the current font and one vertical dialog unit equals one-eighth of the character height for the current font. Because characters are roughly twice as high as they are wide, a horizontal DLU is roughly the same size as a vertical DLU, but it's important to realize that DLUs are not a square unit."
You may also want to look up Fitts' Law, which calculates the time necessary to complete an action as a function of the target size. That can help mathematically determine the trade-offs of different button sizes.
Well, I try to make important/common mouse targets as large as possible without looking bad, something about 20 pixels (assuming 96 DPI) height, and as much width as needed to accomodate labels. If the button has no labels, which is very rare, I found out it's actually comfortable to have an aspect like 20w/50h (with the icon on top, not center), since the mouse is easier to move horizontally. So it's also good to keep them in the same row.
In addition to what MsLis suggested the UX Guide also suggests a minimum width of 75 pixels specifically for Command Buttons.
UX Guide - Recommended sizing and spacing