> For the complete documentation index, see [llms.txt](https://www.pranaypourkar.co.in/the-programmers-guide/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://www.pranaypourkar.co.in/the-programmers-guide/miscellaneous/image.md).
# Image
## About
A quick reference for common image-related concepts such as screen resolution, DPI vs PPI, viewport behavior, image formats, and best practices for responsive design and web optimization.
## **Image Size**
Image size refers to the actual **dimensions of an image** in terms of pixels—its width and height.
* A `1200×800` image has 1200 pixels in width and 800 in height.
* This size determines how much space it can occupy on a screen or within a container (like a div).
* It affects **file size**, **layout**, and **scaling behavior**.
* On screens, an image is rendered according to its pixel dimensions unless overridden by CSS.
**Real-World Examples:**
* A thumbnail may be `150×150` pixels.
* A blog header image could be `1600×600`.
* Facebook profile picture uses around `400×400` pixels.
{% hint style="success" %}
People often equate **image size** with **file size**, but file size also depends on format and compression (e.g., PNG vs. JPEG).
{% endhint %}
## **Image Resolution**
Image resolution describes the **density of pixels per inch** (PPI or DPI), which is critical for printing and matters less for standard screens.
* **300 PPI** is ideal for high-quality print output.
* **72 PPI** is the de facto standard for digital use.
* Changing resolution affects **how large the image appears in physical units** when printed.
**Real-World Examples:**
* A `1200×800` image at 300 PPI prints at 4" × 2.67".
* The same image at 72 PPI prints at 16.7" × 11.1", but appears blurry.
**On Screens:**
High-DPI displays (like Retina) pack more pixels into the same physical space. So an image designed for a normal display may appear **blurry** on high-resolution screens unless scaled appropriately.
## **Viewport Size**
Viewport refers to the **visible area of a web page** inside the browser window, measured in CSS pixels. It defines the space available for rendering HTML, including images.
* Viewport size **changes with device and browser size**.
* Unlike screen resolution, which is physical and device-specific, viewport is **logical and layout-specific**.
* Critical for **responsive design** and **media queries**.
**Real-World Examples:**
* An iPhone with a native resolution of `1170×2532` may have a CSS viewport of `390×844`.
* A desktop browser resized to half the screen might have a viewport around `720×900`.
* Responsive layouts and image scaling (e.g., `width: 100%`) are based on viewport dimensions.
{% hint style="success" %}
Viewport is not equal to screen resolution. A high-res screen can have a small logical viewport due to scaling.
{% endhint %}
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://www.pranaypourkar.co.in/the-programmers-guide/miscellaneous/image.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.