Naming
Be consistent with naming. Find out if there is a consistent file naming scheme the developers prefer at your company. In general:
- Avoid capitalization. Use only lowercase because some browsers are case sensitive. This can lead to an issue if a file named Cats.jpg is referenced as cats.jpg in the code. Some browsers will show the cat image, regardless of the capitalization difference. Other browsers will show a broken image error.
- Avoid spaces. Spaces in file names will render as
%20in an image URL. Example:kitty cat.jpg→kitty%20cat.jpg - Separate words with dashes, not underscores. When removing spaces, your instinct may be to smoosh the words together: kittycat.jpg. That’s fine, and you’ll also see developers use camel case, ex.
kittyCat.jpg. But for SEO (Search Engine Optimization) purposes, it’s best to separate words to make keywords readable. Sokitty-cat.jpgis ideal to signal to Google and other search engines your page has to do with kitty cats! - Include the scale if supporting a screen density greater than 1x. For example:
cats@2x.png(more on that below)
✨ Project Check-in:
In the project file, properly name image layers.
Resolution
First, let’s cover two terms: pixels and resolution. Then we’ll cover some information about mobile screens which do not relate directly to our project but is good for future reference.
Pixels
Pixels are the smallest unit of a digital image. Resolution is the number of pixels on a screen and is represented like so: 1284 x 2778, where the first number is the width in pixels and the second number is the height in pixels. Resolution was straightforward until Apple introduced an iPhone with a Retina display. Retina displays doubled the number of pixels per inch, and now newer devices even have three times the number of pixels. Since more pixels can fit into the same physical area, the image is much clearer. Now, many devices–not just iPhones–have high-resolution screens, such as Samsung’s Galaxy S6 Edge.
PPI
We use PPI (Pixels Per Inch) to refer to the number of pixels that fit into a physical area on a screen. By the way, if you hear of DPI, it stands for Dots Per Inch. It’s the same as Pixels Per Inch.
To determine the PPI of a device, lookup the screen size and pixels to plug into a formula below:
number of pixels across the screen / width in inches OR number of pixels down the screen / height in inches
Here’s a list of devices and asset resolutions. The higher the PPI, the higher the resolution. Since devices range in pixel densities, designers export multiple sizes for each asset so it looks good no matter the screen density. I’ll explain this in more detail a bit further down this page. Note: It’s best practice to design at 1x scale and export larger sizes.
iOS scales
There are three screen densities for iOS devices: 1x, 2x, and 3x. To make it more tangible, let’s say you have an iPhone6 and an iPhone12 5.4″. These two models have different pixel densities. The iPhone6 has less PPI than the iPhone12. You’d export an asset at 2x (200%) to serve to the iPhone 6 and at 3x (300%) for the iPhone 12. See a full list of devices and asset resolutions
| Device | Scale | PPI | Display Size |
|---|---|---|---|
| iPhone 6 | @2x | 326 | 4.7″ |
| iPhone 12 5.4″ | @3x | 476 | 5.4″ |
Points
Points are a resolution-independent measurement used to measure text size and UI elements across iOS devices. While pixels, PPI/DPI, and resolution refer to the physical attributes of a screen, points refer to an abstracted system of measurement. Points make it easier to refer to an element’s size, regardless of a device’s pixel density. Depending on a screen’s pixel density, a point can contain multiple pixels.
| Point | Scale | Pixels | Example devices |
|---|---|---|---|
| 1pt | @1x | 1px | iPhone, 1-3 generation. non-Retina Macbooks |
| 1pt | @2x | 4px | iPhone 4 |
| 1pt | @3x | 9px | iPhone 12 |
Android density buckets
Google Android has its own unit, Density-independent Pixels which are commonly abbreviated as DP. Don’t worry, they’re similar to Points in iOS. I’ll explain the nuance in a bit, but first, let’s look at density buckets.
Designing assets for Android is trickier, but only because there is a broader range of models than iOS. While iOS devices are only made by Apple, Android devices are made by Samsung, LG, Motorola, etc. To make it easier for designers and developers, Android grouped common screen densities into six buckets called Logical Density Buckets. To support all Android models, you’ll want to export assets at these six sizes.
| Bucket Name | Description | DPI | Scale |
|---|---|---|---|
| LDPI | Low density bucket; not used much anymore (0.1% of devices per Google) | ~120dpi | 0.75x |
| MDPI | Medium density bucket | ~160 DPI | 1x |
| HDPI | High density bucket | ~240 DPI | 1.5x |
| XHDPI | Extra-high density bucket | ~320 DPI | 2x |
| XXHDPI | Extra-extra-high density bucket | ~480 DPI | 3x |
| XXHDPI | Extra-extra-extra-high density bucket | ~640 DPI | 4x |
How to Find Device Metrics for Any Screen
Ok, let’s understand the difference between DP and Points now. This is subtle, so don’t worry if it doesn’t make sense right away.
This is all you need to know DP (density-independent pixel) is roughly 160 pixels in 1 inch of screen space. iOS Points have exactly 163 pixels in 1 inch.
Converting from points and DP to pixels iOS pixels = (points * DPI) / 163 Android pixels = (DP * DPI) / 160
A deeper explanation, only if you want to learn deeper… A single pt (Point) is exactly 1/72 of an inch on any screen density. That’s because there are 72 pixels per inch in a baseline resolution. Therefore, 1 inch is equivalent to 72 points. Convert pt to px using this formula:
pt / 72 * dpi = px
A single dp (density-independent) is a single px on a device at 160 dpi. 160 dp roughly equals 1 inch. This is because of the way dp is converted to px in Android using density buckets. The vast number of Android models means the dp is not as precise and predictable as Apple can be with its small, contained product line. Here’s the formula to convert dp to px:
dp * scaler = px
Let’s compare dp vs. pt with an example. A 150 DPI device falls into the MDPI density bucket, resulting in a 1x scale. Remember, 1inch = 72pt. Use the formulas above to convert an inch in pt and dp — to px.
iOS: 72 pt / 72 * 150 = 150 px Android: 160 dp * 1 = 160 px
Now try a 170 DPI device.
iOS: 72 pt / 72 * 170 = 170 px Android: 160 dp * 1 = 160 px
On iOS, the pixels fluctuate because the asset is the same physical size on any screen density. Points are helpful if you need exact physical dimensions, such as for text size or any UI that needs precise scale. Images aren’t defined in points because it leads to rendering issues; it’s much more common to use dp or px. On Android, the pixels did not change because dp allows for some physical size variation depending on device density.
Keep in mind
Do you want the asset to display at the same physical size across a wide range of sizes? You may want 20pt text to be larger on a big iPad screen than a small iPhone6. If that’s the case, create an artboard sized to an iPad’s resolution (this is 1x) and export it at the device density (you can look it up here).
Feeling overwhelmed thinking about resolution and multiple assets? Instead of raster images, use vector wherever possible because they do not use pixels! More on that in the next step.
New terms:
- SEO: Search Engine Optimization
- Pixels: The smallest unit of a digital image.
- Resolution: The number of pixels on a screen and is represented like so: 1284 x 2778, where the first number is the width in pixels and the second number is the height in pixels.
- PPI: Pixels Per Inch
- DPI: Dots Per Inch. It’s the same as Pixels Per Inch.
- Scales: Pertains to the percentage increase or decrease of the baseline resolution, ex. 1x=100%, 2x=200%
- Points: A resolution-independent measurement for iOS, equal to exactly 163 pixels in 1 inch. Points make it easier to refer to an element’s size, regardless of a device’s pixel density.
- iOS screen densities: 1x, 2x, 3x Android screen densities: LDPI, MDPI, HDPI, XHDPI, XXHDPI, XXXHDPI
- Density-independent Pixels: A Google Android term commonly abbreviated as DP, they’re similar to Points in iOS. DP is roughly 160 pixels in 1 inch of screen space.