Best Practices for Using Images on the Web

How to Make Good Images for your Website

Blog-Graphic-Jan30

Images can greatly enhance the content of your website. They can also be the downfall of your website. There are a few key things to keep in mind when you are preparing to put images on the web such as image size, file type, and resolution.

Composition

Images cannot only help your website, but they can hurt your website. When choosing an image, the first thing you want to do is make sure you have a compelling one.

What do I mean by that? The image should be relevant to the content that it is representing. It should be a visual explanation of the content or it should demonstrate what you’re talking about. If you need to, resize or crop the image to maximize the visual impact it has with your content.
Last but not least, make sure the image isn’t pixilated. Nothing says web/graphics newbie like having a pixilated image on your website.

Format

There are three primary formats you can use to save your images for the web. They are .jpg, .png, and .gif.

.jpg is the most commonly used file format to use for photographs. This format handles the thousands of different colors in a way that allows you to save the image in a smaller file size without losing quality.

.png is the most versatile format for the web. This format allows you to not only save the image with transparent pixels, but it also lets you save the image with different levels of transparency. As a result, you are able to save a cut out image without a background or you could save that same image with a 50% opaque background.

.gif is an older web file format that is popular for their ability to save multiple frames within a single file. They are also used when you have a very small file or a graphic element with only a few colors.

Size

Pay close attention to the file size and resolution of your images on the web. 72dpi is the best resolution to use for web images. Using this image resolution will keep your file size down when you go to save your image for the web.

To compress your image even more, you can open your file in Photoshop and actually “Save for the Web”. How do you do this? Simply go to File > Save For Web & Devices. From there, you will want to select the correct file type from the drop down menu and then click save. This will compress your image file a little more in order to help it load faster on your website.

Naming Your Files

When saving your image file for the web, it is best to name your files rationally. This will allow you to find and store your images efficiently. If you will be using a thumbnail version and a large version for your website, name the images accordingly. For example, you should name the thumbnail something like myimage-thumb.jpg and the full size image myimage-500×500.jpg where 500×500 is the image dimensions.

Add a Comment

Your email address will not be published. Required fields are marked *