Blog

Check out the Neoreef blog for the latest industry insights and guides.

Preparing Images for the Web

Images are a part of almost every page on a website these days. Everything from logos, locations, employees and many more images are being used on websites. One important part of putting images on your site is making sure that they are good quality images and are formatted appropriately for the web. This entry will cover the basics for preparing a good quality image to place on your site.

Generally, when you have a digital image (whether it is from a digital camera, scanner or other source), it is much too large for the web and has a weird file name (like DSC187618736.jpg). The first step is to rename the file to something meaningful that will enable you to easily identify the file. This will help greatly as your image library grows and you have to sort through dozens of images to locate the one you want. As a side note, when you upload images to the server, make sure that you use folders to categorize similar images into groups. Between renaming and extensively using hierarchical folders, you should be able to easily find the specific images you are looking.

Now that the image has renamed it is time to format it for your website. Your image is most likely much larger than what you actually want to appear on your website. Using HTML, there is an option to constrain the size of an image. This option works fairly well if you are making SMALL changes (i.e. a couple pixels or so) but is horrible if you are greatly altering an images size. The reason for this is that it doesn’t redraw the image; it simply takes the height and width parameters you specified and squishes the image into them. This means the image is still just as large as original (file size) and will take just as long to load, causing poor performance and degraded image quality. 

The proper way to resize an image is to use image editing software. The software will redraw the image for you which will keep the quality of the original and reduce the file size considerably. While you are in your image editing software, you can also apply a variety of effects to the image that you want such as a shadow, blurred edges, etc. Keep in mind that you do not want to go overboard on effects, use them minimally as needed and then move on.
 
The simple steps listed above will greatly increase the quality of images on your website. The last step is to save the image and upload it to a server. When you are saving an image for the web you should use either .jpg, .gif or .png as these file types are readable by almost every browser and eliminate compatibility issues. You will also want to change the quality of the image while saving. Generally for the web, you want this to be around 72 dpi or the medium quality option in your image editing program. Once the file is saved you can upload it to the server and your image is all ready to go on your site.
 
If you don’t have an image editing program on your computer and don’t feel like spending a ton of money there is an alternative solution. Visit http://www.picnik.com. This is a free online image editor that is very easy to use even for the novice. This will allow you to easily edit your images and get them web ready without spending hundreds of dollars on image editing software.

Powerful Tools, Unlimited Support

Neoreef addresses the two biggest issues with websites: lack of control and lack of support. We enable easy control of your website, while a dedicated support team provides you with training, mentorship, and specialized skills.

Start Your Project Today