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.