Website, Meet Image - pt I

Website, Meet Image - pt I
High Monkey profile picture

By High Monkey, Our random thoughts collected

Categories: Design,  Web,  Learn

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?

It's also important to note that there are many more file types than this for vector and raster graphics, but you don't need to worry about anything other than these when it comes to displaying on the web.


GIF - If you know what a meme is, you've probably heard of this one. However you pronounce it, this format, believe it or not, is actually good for a lot more than just capturing Homer disappearing into some shrubs. Gifs are great for animations, logos, and other graphics without much color. The thing about the GIF (Graphics Interchange Format) is that it only uses 256 colors, which keeps file sizes low, but doesn't accurately display photos that have a wide array of colors or gradients.

JPEG - The bread and butter of photography, can display basically unlimited variations of color and dynamic range. You have a photo that was carefully composed, and you want to make sure it stays that way online, jpeg is your best option.

PNG - Very similar to the GIF, but can't display motion. Still a good option for your less complex graphics, icons, logos, etc. Beware of using PNG-24 for photography, it might look good but it will be an unnecessarily large file.

SVG - Because it is of the vector variety, this file great for icons, logos, infographics, etc. Scaleable Vector Graphics are written in XML, meaning that they can be changed with JavaScript or CSS, so there are a lot of possibilities for creating interactive and animated elements within your website. For simple graphics with defined areas of color, like flat icons and illustrations, SVG will also be easily the smallest file size you can produce. Beware that as your graphic becomes more complex and detailed, your SVG file size will get larger.

That's it for part 1! Next up in our website images guide we are going to talk about file sizes, why your image is too big and how can you make it more manageable for your website.