Web Image Terms & Definitions

Pixels
- Pixels (px) are the smallest pieces of information in a photograph; tiny dots that when viewed from a distance, create one cohesive image.
Image Size/Dimensions
- Image size is expressed in pixel dimensions: width x height.
File Size (disk space)
- File size refers to the amount of space a file takes up on a storage medium, such as a computer hard drive. File sizes can be measured in bytes (B), kilobytes (KB), megabytes (MB), gigabytes (GB), terabytes (TB), and beyond.
- We recommend keeping your web images at 100KB or less.
Resolution
- Resolution refers to the number of pixels in an image and is measured in Pixels Per Inch (ppi)*. Most screens display images at 72ppi. However, with advances in 4k and Apple retina, screen resolution is now reaching up to 220+ppi.
- Resolution is sometimes presented with the width and height of the image, as well as the number of pixels per inch in the image. Ex: I have an image that is 1290px x 1080px at 72ppi. The image is 1290px wide and 1080px high, with a resolution of 72 pixels per inch.
- *ppi vs dpi / screens vs print
  - You will see that the term “ppi” is often used interchangeably with “dpi”. Dots Per Inch (dpi) is used in reference to printing and the number of ink dots per inch. Many print terms have carried over into the digital vernacular. In this case, it’s safe to assume that whether the speaker is using ppi or dpi, they mean the same thing.
  - In general:
    - Screens = 72ppi
    - Print = 300dpi
File types
- .jpg: Standard photo file type. Best for photographs.
- .png: Standard image file type. Allows for transparency. Good for logos, pictures with text, lines, graphics.
  - JPG vs PNG: Which to Choose for Your Website?
- .svg: Scalable (can be made larger or smaller with no negative effects on appearance) graphics. Without getting too technical, .svg files are not really images, but a coded map for lines, dots, and colors. Appearance is not based on size, but in the relationship of the elements to one another, so read by your web browser. Therefore, .svgs can be made almost infinitely large or small, and still retain their intended appearance. Great for logos, icons, shapes, simple graphs and charts, etc.
  - How to export SVG | Adobe Illustrator tutorials
Editable, layered files: .psd, .ai, .eps, .svg, .pdf
- Files created in and to be edited with Adobe Photoshop (.psd) and Illustrator (.ai).
- Adobe Illustrator can also edit .eps, .svg, and .pdf.
- When in doubt, send your designer these native files. We have the programs and know-how to get the best results from these file types.

Table of Contents

Related Articles