# Resolution, dimensions, and DPI: how to get image size right Источник / Source: https://picwin.co/en/blog/image-size-resolution-and-dpi Язык / Language: en Рубрика / Topic: Technology Автор / Author: The Picwin editors Опубликовано / Published: 2026-03-10T00:00:00.000Z Обновлено / Updated: 2026-09-03T11:17:26.468Z Слов / Words: 1574 · Чтение / Reading: 8 min Обложка / Cover: https://picwin.co/api/picwin/blog-images/62dddda0c58464672ed278059229bff1f27a6fd2c7b570c90945c0a8b2873e82.webp Переводы / Translations: kk: https://picwin.co/kk/blog/suret-olshemi-jane-dpi, pt: https://picwin.co/pt/blog/tamanho-resolucao-e-dpi, ru: https://picwin.co/blog/razreshenie-razmery-i-dpi, uz: https://picwin.co/uz/blog/tasvir-olchami-va-dpi Pixels, inches, and dots per inch are three different measurements that are constantly confused. Here is how to convert between them, calculate the pixels needed for screens and print, and choose an aspect ratio without painful cropping. --- **In short** An image’s dimensions are its pixels, nothing else. Dots per inch enter the picture when those pixels are put on paper: physical size is pixels divided by ppi. For a screen, calculate the slot width in pixels and account for display density; for print, divide millimetres by 25.4 and multiply by 300. One idea resolves half the questions about image size: a file has no centimetres. It contains a pixel grid—for example, 4000 × 3000. Centimetres and inches appear later, when that grid is displayed on a particular device or transferred to a particular sheet of paper. ## How is resolution different from size? A file’s resolution is the number of pixels horizontally and vertically. 4000 × 3000 is 12 million pixels, or “12 megapixels.” The file says nothing else about its physical dimensions. Dots per inch (dpi) and pixels per inch (ppi) are not properties of the image, but the density at which it will be printed or displayed. Strictly speaking, ppi applies to an image and screen, while dpi applies to a printing device. In everyday use and print-shop specifications, however, the terms are often used interchangeably. A JPEG or TIFF does contain a ppi value, but it is merely a hint for an editor. Changing that hint from 72 to 300 adds no pixels to the file. It only changes the size at which the editor places the image on paper. How to check in ten seconds Open the file properties and find the line with two numbers separated by a multiplication sign. That is all the actual size information you have. “300 dpi” without a pixel count beside it means nothing. ## How do you convert millimetres to pixels? There is one short formula: **pixels = millimetres ÷ 25.4 × ppi** Twenty-five point four is the fixed number of millimetres in an inch. This formula produces the entire standard print-size table at 300 ppi. Format Millimetres Pixels at 300 ppi Business card 85 × 55 1004 × 650 10 × 15 photo 100 × 150 1181 × 1772 A6 postcard 105 × 148 1240 × 1748 A5 flyer 148 × 210 1748 × 2480 A4 sheet 210 × 297 2480 × 3508 A3 poster 297 × 420 3508 × 4961 The reverse calculation works the same way: divide pixels by ppi to get inches, then multiply by 25.4 to get millimetres. A 2000 × 1500 frame at 300 ppi is 169 × 127 mm, slightly smaller than A5. At 150 ppi, the same frame becomes 339 × 254 mm, almost A4, but with half the detail density. For a closer look at when 150 ppi is enough and when it is not, read our guide to [preparing images for print](/en/blog/preparing-images-for-print). ## How many pixels does a screen need? As many pixels as the image occupies on the page, multiplied by the screen density. Layouts are measured in CSS pixels, while a display usually has more physical dots. Retina phones and laptops show two or three dots for one CSS pixel. The browser calls this value `devicePixelRatio`. If an image occupies 800 CSS pixels in width, its actual width on a display with a density of 2 is 1600 pixels. This gives us a practical rule: **file width = slot width × 2**. There is no need to chase a larger multiplier. The difference between 2× and 3× is barely visible, while file weight grows with area—by 2.25 times. Our article about [fast images for websites](/en/blog/fast-images-for-websites) explains how to handle that extra weight. ## Which aspect ratios should you choose? Aspect ratio matters more than absolute size. Size is easy to reduce, but changing the ratio requires cropping, and cropping can ruin a composition. Aspect ratio Common uses 1:1 catalogue previews, avatars, product cards 4:5 vertical feeds, mobile posts 3:2 classic camera frame, photo printing 16:9 covers, slides, video frames 1.91:1 social-media link preview (og:image) 9:16 vertical video and stories Calculate what is lost when reframing. Converting a 3:2 shot to 4:5 preserves 0.8 ÷ 1.5 = 0.53 of its width, so nearly half the frame disappears. A subject intended for both a feed and a cover should therefore be shot or generated with extra space around the edges. ![Three-column table matching common image uses with aspect ratios and pixel dimensions](/api/picwin/blog-images/f45c3fae8ff6e5dff9f620eac64199bff492d2b5739b422cb9757c16b50e9983.webp) Count pixels from the use case, not the other way around: slot first, then density. ## What dimensions do platforms require? Platform requirements change, so their own help pages are the only reliable source. At the time of publication, the official documentation gives the following specifications. Platform or use Requirement Social-media link from 1200 × 630, minimum 200 × 200, file up to 8 MB YouTube thumbnail 3840 × 2160, minimum width 640, JPG or PNG Picwin article cover 1200 × 675 Picwin work preview square 1024 × 1024 The first two rows come from the [Open Graph image requirements](https://developers.facebook.com/docs/sharing/webmasters/images/) and [YouTube thumbnail help](https://support.google.com/youtube/answer/72431). They also state file-size limits: 8 MB for a link preview and 2 MB for a thumbnail uploaded from a phone. The final two rows are our own dimensions, declared in the website markup. ## How do you choose dimensions for a task? - ### Identify the final medium Screen, print, or both. Until this is decided, there is no basis for choosing a pixel count. - ### Measure the slot For a screen, measure the area width in CSS pixels. For print, measure the product width in millimetres. - ### Multiply by density For a screen, multiply by 2. For print, convert millimetres with the formula above at 300 ppi; use a lower density for large-format work. - ### Round up sensibly An extra two hundred pixels costs virtually nothing, while a shortage of two hundred forces you to enlarge the image. - ### Choose the ratio for the tightest platform If you need both a square and a wide frame, generate a wide version with extra space at the edges and crop the square from it. - ### Keep the source file The maximum-size original is the only way to produce another size later without further loss. ## What happens when an image is reduced? Downscaling is also resampling, just a less painful kind. Four neighbouring pixels become one, and fine details are averaged: thin lines fade, lettering on a sign becomes unreadable, and noise turns into uniform grey. Two rules follow. First, reduce an image in one step rather than a staircase of 10% reductions: every step averages the pixels again. Second, after substantial reduction, apply a little sharpening or the frame will look dull. Sharpening must be the last operation at the final size; otherwise compression turns it into halos along the edges. Most importantly, create every derivative from the original, not from another derivative. An image reduced to 800 pixels, stretched to 1200, and compressed again loses quality three times, even if each step looks harmless. ## Can you enlarge a small image? You can enlarge it, but you cannot add real detail. Ordinary interpolation calculates new pixels from their neighbours, making edges softer and textures mushy. AI upscaling looks better, but it does not restore what was lost. It draws plausible additions, inventing hair, letters, and tiny patterns. A practical limit for screens is roughly twofold enlargement, provided viewers will not inspect the image closely. For print, check any enlargement at 100%: the screen displays the image reduced and gives a misleading impression of sharpness. The three most expensive mistakes Setting “300 dpi” in file properties and assuming the image is print-ready. Cropping the only source file for one platform. Ordering a square generation when the required cover is 16:9. ## What does this mean when using a stock library? When you select an existing image, its dimensions have already been decided, so check them before buying, not afterwards. Picwin works are created by neural networks from catalogue briefs. The storefront preview is 1024 pixels on one side, while the final dimensions are shown on the work’s page. [TechnologyFrames about devices, interfaces, and data—subjects that most often need both wide and square versions. See the works](/en/category/technology)[MockupsMockups and backgrounds, where ratio matters most because the frame is later cropped to fit a layout. See the works](/en/category/mockups) **Key takeaways** - File dimensions are pixels; ppi appears only with a physical medium. - To convert millimetres to pixels, divide by 25.4 and multiply by density. - For screens, use the slot width multiplied by 2. - Choose the aspect ratio in advance: it can only be changed by cropping. - Enlargement adds no real detail, whether conventional or AI-powered. Need a frame at the right size? In the Picwin mini app, an image is created for a task with a known aspect ratio and arrives ready to use in the storefront. [Open the mini app](/en/partners) ### What size should a website banner be? Multiply the banner width in CSS pixels by 2. A full-width laptop banner is about 1440 CSS pixels, so the file should be 2880 pixels wide. ### What is 300 dpi, and is it always necessary? It means 300 pixels per inch of paper, the standard for publications viewed at arm’s length. A poster viewed from three metres away needs noticeably lower density. ### How many megapixels are needed to print A4? 2480 × 3508 = 8.7 megapixels at 300 ppi. Any modern camera and almost any high-resolution generation exceeds that requirement. ### Why does an image look blurry on a phone? The file was probably supplied at the CSS-slot size without accounting for display density: the phone stretches 400 pixels across 800 physical dots. ### Can you change the aspect ratio without loss? No. You can change it by cropping or extending the canvas. Cropping discards part of the frame; extension adds content that was not there. ### At what size should the original be stored? At the largest available size, without repeated compression. Always create every derivative from it, never from other derivatives. ### What size should you choose if no platform is specified? Use 2000 pixels on the long side. That is enough for full-screen display and printing up to A5, while keeping file weight moderate. Continue with [image formats and when to use them](/en/blog/image-formats-jpeg-png-webp-avif) and [preparing images for a fast website](/en/blog/fast-images-for-websites). Browse finished work in the [catalogue](/en/catalog).