Preparing Images and Graphics for the Web

When working with Adobe programs or building a website as a beginner, it doesn’t take very long or very much to become readily confused. Not only do you have to worry about content, style, and layout, but building such projects also requires you to have a working knowledge of images. Though it takes years to gain the knowledge most photographers or editors have, there are a few relatively simple tricks and things you should know that will go a long way in building a website with professional images and graphics. Whether you are selling products, promoting a blog, contributing to a website, or designing a website yourself, there are three essential components to preparing images and graphics for the web.

Type of Image

One of the first considerations before you begin to edit or create your image/graphic is the image format. Speaking within the realm of web design and Adobe programs, images and graphics are either raster images or vector images.

Raster Images

Raster-based images and graphics are edited through the use of pixels. Programs such as Adobe Photoshop cater to editing such images. For the most part, all of the images you will use when building a website will be raster images.

Vector Images

Vector-based images, on the other hand, consist of lines and shapes (vectors) rather than pixels. Vector-images will be the format of most of your graphics (for example, your logo).

It is important to know the difference between the two types of images and the way they are used and manipulated.

Image Dimension

One of the largest misconceptions about preparing images for a website is confusing image weight with image dimension – two very important and critical concerns for anyone designing a website that involves uploading images.

Distinguishing one from the other, image dimension can be thought of as being the physical size of the image – thus when speaking, it is commonly referred to as image size. Just as you print pictures in different sizes to fit certain frames (5”x7”, 8”x10”, 11”x14”, and so forth), images used online work the same way. More simply put, image dimension consists of width and height in pixels. Whether you are using an IPhone or an SLR/DSLR camera to take the images, photos should never be uploaded or used at their maximum dimensions.

In addition, it is important to consider different screen sizes when measuring the image since computer screens range in size. As a general rule, the image file should never be wider than the width of the webpage. With 27” and 30” monitors being the upper-range dimensions, common resolution width should never be more than 2,560 pixels. For most computer screens, the 1,200 range is suitable for width. Despite the fact that image width is important to consider, there is no limit on image height.

Image Size

When you change the size (dimension) of an image, it does not automatically change the weight or loading time of the image. Thus, image weight (also referred to as image size – not to be confusing) should be accounted for and adjusted. Image size (weight) is measured in kilobytes (KB) or megabytes (MB) and is essentially the file size of the image that controls the load time and speed of the website that the image is displayed on.

In the world of marketing, there is a concept called the Eight Second Rule. The rule holds that a website has only eight seconds to capture and interest the website user before they turn away and leave the site. Sure, great design, layout, and strong images contribute to this but the Eight Second Rule also applies to loading time. When images are heavier (larger is memory size), they take longer to load.

Most gung-ho designers have their own opinion, but a safe guideline to follow would be

“For most ‘full page’ web images, you want the image to be 80Kb-100Kb at most. If the image is only part of a page (e.g. half the width of a blog post), then 20Kb-30Kb is usually fine.”

At the end of the day, the most important part of using and resizing images is to ensure professional quality. You want your images to be small enough to load in a timely manner, but large enough to ensure they are not graining or pixelated.

Keeping in mind the type of image, the image dimension, and the image weight, it is easy to transform a mediocre website into a professionally designed and crafted website that caters to the use of strong images without hindering functionality.

Adobe Alternatives and Dupes

    A subscription to Adobe can get a little...

Adobe Alternatives and Dupes

    A subscription to Adobe can get a little...

Adobe Alternatives and Dupes

    A subscription to Adobe can get a little...