All About Images on the Web

One of the more complex issues for people who manage the content for websites is making sure that images are sized appropriately but still high quality for the user experience. This post will be a step-by-step guide for using a free image optimizer tool to do just that - and we'll also give you some rules of thumb for thinking about images on websites.

File Types for Web

PNG - this is a great file type for web - especially for transparent files and this is the file type best used if your page may be linked to by a social media site like Facebook - because it is only the PNG file types that are available within Facebook to display next to the link. (To the left is an example of 2 images placed on a page that has a colored background. Notice how the first is transparent and the second is not.)

JPG (JPEG) - these are great file types for photos as they can be saved with good quality at reasonable sizes. These cannot be transparent.

GIF - GIF is similar to PNG, but is an older file type. They can be transparent, but the PNGs can be made smaller. GIFs were very popular at one time for creating animated logos and images. This practice has fallen out of popularity as web users have become more savvy and the trend has moved towards simpler (or less annoying) designs.


File Size versus Screen Size

File size matters when putting images online. The larger the actual file, the longer it takes to load on the page. It doesn't matter if the screen size is tiny - if the file is large it is slow.

Screen size matters - but it is more a question of design. You want to use the size images that look good on a page - that do not 'take over' your content and that bring attention to things on your page and break up the text in a way that 'feels good'. Notice that these are not precise. Designing your content on a page is an art, not a science.

Rules of Thumb for File Sizes:

Image Size (approx screen size)	Max File Size
ICONS - XSM (5-15 pixels wide)	10k
SMALL (15-80 pixels wide)	20k
MEDIUM (80-250 pixels wide)	50k
LARGE (250-500 pixels wide	100k
XLG (only used for banners, large background images, etc.	200k

Images need to be saved for web - which is a process that compacts the image and reduces the quality but in a way that still is good for web viewing. We recommend a simple and free program called RIOT to do this.

You can download RIOT here! (Click the bar at the very top of the screen that says 'Download RIOT standalone application', not the big blue bar that says 'Download')

Then, follow our step by step guide below to convert a single image from a large photo to a web ready PNG or JPG or to convert a batch of images all at the same time.