There are many reasons why you might want to add an image to a web page. You might want to include a logo, photograph, illustration, or diagram. There are several things to consider when selecting and preparing images for your site, but taking time to get them right will make your site look more attractive and professional.
Three Rules for Using Images
There are three rules to remember when you are creating images for your website, which are summarized below.
Save images in the right format
Websites mainly use images in .jpeg, .gif, or .png format. If you choose the wrong image format, then your image might not look as sharp as it should and can cause the web page to load slowly.
Save images at the right size
You should save the image at the same width and height it will appear on the website. If the image is smaller than the width or height that you have specified, the image can be distorted and stretched. If the image is larger than the width and height you have specified, the image will take longer to display on the page.
Use the correct resolution
Computer screens are made up of dots known as pixels. Images used on the web are also made up of tiny dots. Resolution refers to the number of dots per inch, and most computer screens only show web pages at 72 pixels per inch. So saving images at a higher resolution results in images that are larger than necessary and take longer to download.
Choosing Images for Your Site
A picture can say a thousand words, and great images help make the difference between an average-looking site and a really engaging one.
Images can be used to set the tone for a site in less time than it takes to read a description. If you do not have photographs to use on your website, there are companies who sell stock images. These are images you pay to use, such as istockphoto.com.
Remember that you can be subject to copyright infringement penalties for simply taking photographs from another website.
Convey the right mood.
Fit the color palette.
Whenever you have many different colors in a picture you should use a .jpeg. A photograph that features snow or an overcast sky might look like it has large areas that are just white or gray, but the picture is usually made up of many different colors that are subtly different.
GIF and PNG
Use .gif or .png formats when saving images with few colors or large areas of the same color. When a picture has an area that is filled with exactly the same color, it is known as flat color. Logos, illustrations, and diagrams often use flat colors. (Note that photographs of snow, sky, or grass are not flat colors. They are made up of several subtly different shades of the same color and are not as suited to .gif or .png formats.)
There are several reasons why it is important to properly size the images on your web pages. First, images that seem squashed or distorted just don't look good. Secondly, the size of your images has a major effect on how fast your web pages load.
Fast website loading time is imperative for several reasons. Websites that take too much time to load lose visitors and have reduced search engine ranking. From a search engine optimization (SEO) perspective, the speed of the website is determined through its average page load time. From a user perspective, fast access to your website is crucial in maintaining regular traffic. It can also be costly to a user accessing your site on a mobile device on data plan, the more data on the page the more data cost to render that page. To reduce the loading time of a page, we optimize images because they have a major effect on the speed of a website.
What are some of the sizes typically found on the Columbia Law School website?
Here are some general guidelines for photo sizes frequently used on the website.
Faculty profile headshots (head and shoulders): 300 pixels wide by 360 pixels In-line horizontal shot (a horizontal or landscape style image placed in the copy): 350 pixels wide In-line vertical shot (a vertical or portrait style image placed in the copy): 265 pixels wide Banner (the image across the top of your microsite): 960 pixels wide by 220 pixels
What tools are recommended for resizing and/or cropping images?