Website, Meet Image - part I

Images are important, just ask Andre Agassi. Moreover, they can make or break your website. Using the right images in the right way can increase the overall user experience of your website by decreasing load times and enhancing your content. Many studies have been done on the impact of image use, and the results are un-deniable. Retention of information increases by a multitude of 5 if you pair information with a related image, sometimes website visitors will avoid website text completely to focus only on photos. If you want your content to be noticed, and remembered, images are the best tool for the job.

All that said, if you aren't well versed in design or development, making sure that you have the right images images prepared to run smoothly on your website can be a daunting task. Here at High Monkey, we are starting a new blog series called "High Monkey Help." Our goals are simple, answer some of the questions we hear all the time, and help people learn more about their websites and content. Before we get too far into the weeds we have to understand some basics about images, there are two different types of image files that you will use on the web. Raster and Vector...

Raster Images

Raster images (JPEG, GIF, PNG) are made up of pixels. This means that they are "bitmapped" or comprised entirely of boxes of different colors, that when combined, create a full image. The pros of using raster images are that they are great at displaying more complex images, so they are the standard when it comes to photography and complex illustrations. The downsides of raster images are 2-fold. 1. The more you zoom in, the more the pixels become evident and the more "blurry" the image gets. 2. In order to solve this problem many people opt for higher resolution photos, which almost always means gargantuan file sizes that bog down websites and increases bounce rates. We'll have more on image sizes for web later, but for now just remember that file size doesn't automatically = quality.

Vector Images

Vector images (svg) are made up of mathematical formulas, and are therefore are able to scale up or down without compromising any quality. Because there aren't any pixels in vector images, as the size changes the formula adjusts, making sure that regardless of the size of the image you maintain clean lines, shapes and color. It is important to note that you can always change a vector image into a raster image, but you will need vector graphics software like Adobe Illustrator or Sketch if you want to change a file from raster to vector.

Soo...What do I save my image as?

Vector images (svg) are made up of mathematical formulas, and are therefore are able to scale up or down without compromising any quality. Because there aren't any pixels in vector images, as the size changes the formula adjusts, making sure that regardless of the size of the image you maintain clean lines, shapes and color. It is important to note that you can always change a vector image into a raster image, but you will need vector graphics software like Adobe Illustrator or Sketch if you want to change a file from raster to vector.