Richard Munter and Jessica Westermann lead the unique partnership of Munter Westermann Arts & Media.  A cross-functional team, Munter Westermann has developed communication materials for leading environmental, arts, and service organizations.  We have expertise and extensive experience across multiple disciplines allowing us to design for and deliver optimally across different media.

Richard works on all stages of production including concept development, execution, and delivery on web, video, design, and performance projects. Learn more about Richard.

Jessica’s background lies in performing arts and administration.  She has a particular focus on instruction, design, and planning. Learn more about Jessica.

Richard Munter

Richard Munter

Jessica Westermann

Jessica Westermann

 

File formats for the Web

3062

A few considerations on images for the web. Our goals are:

  1. appearance – we want the image to look as good as possible – minimizing banding, noise, blockiness, etc
  2. file size – minimize file size so that images load quickly. If files are too large, then the web page loads slowly and visitors may abandon the page
  3. search engine optimization (SEO) – naming the files so that they can be indexed and found by Google and other search engines

We must strike a balance between appearance and file size. We can compress a file greatly to reduce its file size but then it may not look very good. Factors to consider that will affect both appearance and file size:

  • image dimensions
  • file format
  • compression

Note that these instructions are guidelines only. You must use your own discretion to decide when to break these rules.

Process:

1. Is an image needed at all? For example, if putting a table of information – it is usually preferable to put this as a table of text instead of an image of a table. This will allow us to edit the data and also extract the data later if needed. It may be faster to download and will be visible to visitors who have images disabled (for example on a mobile device or on screen readers for the visually impaired). As another example, if we just wanted a solid block of color or to put a border, we can place those using HTML and CSS code instead of using an image.

2. Image dimensions – Resize the image to the dimensions required. This will reduce the file size and will also look better on the webpage. If you take a large image and scale it up or down, then the browser has to resize it and this often results in a loss of visual quality on the screen.

3. File format – General rule of thumb: Use GIF for logos and illustrations. Use JPG for photographs.
– GIF is designed for low colour images and can do a very good job of representing those.
– JPG is designed for high colour images and can do a very good job of representing those.
– PNG is best when encoding images that have transparency

4. Compression – Experiment with the compression to find the best compromise between file size and image quality. This is subjective and depends on the image being processed. For GIF, there are several parameters but the most important is number of colours. If you have black and white line art, you can get away with specifying around 8 or 16 colours. For JPG, try dropping the quality setting until the image gets visually blocky. Keep an eye on the file size to see how the reduction in quality affects file size.

5. File naming – This is the easy step. Descriptive names help you when organizing your content and also help visitors find your images in Google.
Do the following:
– give a descriptive name
– avoid abbreviations if possible
– use underscores or dashes instead of spaces
– be sure to put the file extension

Tools:

The king for image processing is Photoshop but for the steps described above any decent image manipulation tool will do. I’m a big fan of Irfanview, which is a free, light-weight image editor with many great features. You might also take a look at Picassa and if you want more editing features, check out GIMP.

Photoshop
Irfanview
Picassa
GIMP

More information on file formats:

Choose the Right Image Format



Leave a Comment

We're glad you have chosen to leave a comment. Please keep in mind that comments are moderated and will not appear until approved. Your email address is required but will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>