Image Formats and Size

Formats

JPEG — Joint Photographic Experts Group

JPEG (or JPG) is a lossy image file format, meaning its quality decreases with the file size. It’s the best choice for nearly all online images that are photographic quality of people, places, or things. JPEG is your go-to option for adding images to websites and documents. When choosing compression, try for mid-range or lower to reduce the file size as much as possible without loosing too much quality. 

GIF — Graphics Interface Format

GIF is a lossless, lightweight image file format ideal for small graphics of mostly solid colors like a logo, cartoon, or line drawing. It supports transparent elements and animated graphics. If you see a small animated image on the web, you’re probably looking at a GIF. However, GIFs are limited to 256 simultaneous colors, so they can’t achieve photographic quality. Use JPEG for photographs. 

PNG — Portable Network Graphics

You can think of PNG as the next-generation GIF. It’s a lossless image file format that supports transparency and millions of colors. It can also create animations, but few applications support this feature. PNGs are ideal for colorful illustrations and graphics. 

Note: there are two types of PNG, 8 and 24.

PNG 8 can support a maximum of 256 colors only. PNG 24, on the other hand, can utilize more than 16 million accessible colors. As a result, PNG 8 is best utilized in small graphics that do not require much color detail, such as computer icons and simple graphic images.

Size

You are looking for three things with image size:

1. Resolution

2. Dimension (width and height)

3. File size (hiw many kb or MB)

Resolution

Measured in dots per inch (dpi) you want to stick with 72dpi for the web. Many print images and phots taken on a phone will be 300dpi. It is more information than needed on the web because a screen sort of blends the image due to rendering it with light. 

Dimension

If the image is going to stretch the entire width of the webpage. Go with 1200 pixels wide by however tall it needs to be.  Half a page? 600 pixels. Quarter page? 300 pixels.

See how this plays off the 12 column grid?
Images will stretch to fill their container and adjust to scvreen resolution.

File size

This relates to how much data is used to make the image. Dropping the resolution reduces the size, as do the dimensions. The format is another step in saving on file size. When using JPEG, the more you compress, the smaller the file size. The more you compress, the fuzzier the picture gets, so you need to find a balance.

Rule of thumb

Always go less than 1MB and1024kb = 1MB

• 1200 pixel wide image - try for 700kb or less

• 600 pixel wide image - try for 350kb or less

• 300 pixel wide image - try for 150 kb or less