We have all visited a website where the images load very slowly one line at a time or we’ve seen horribly scrunched and skewed images being forced into a size they were not meant to be. Using properly sized images on your website not only makes your website look more professional, it makes it load faster which is paramount for visitors looking at your site on a handheld device. There are a few things we consider when we are resizing images for use on the web; file size, file type, desired dimensions and cropping.
Most photographs taken with a phone or digital camera are well over 1 MB (megabyte) in size. While 1MB isn’t extraordinary in size and likely wouldn’t take too long to download on a high speed connection, having an image that large on your site is typically unnecessary. An image that is a MB (or 1024 kilobytes) can typically be resized using an image editing program to be much smaller, usually less than 100kb when done properly. Resizing your images before you load them on to your website will keep the site loading quickly and keep the quality of your images in tact as the browser won’t have to resize or reshape the image to fit the location.
Images come in many formats; jpeg, gif and png are a few of the more common file types. So how do you know what to use and when?
- Jpg or jpeg – typically when we are using a photograph on a website, we will reduce the file size and save it as a jpeg. Jpegs were designed to make detailed images as small as possible by removing information that the human eye won’t notice. Jpeg is a good file type for a photograph or an image with a gradient, however, it is not good for logos and line drawings as it tends to make them appear fuzzy.
- Gif and Png – Gif and png files use lossless compression, meaning that you can save the image over and over and never lose any data (unlike a jpeg). This makes a gifs and pngs good for logos, line drawings and other simple images that need to be small and crisp. These file types can also be transparent which makes them useful on websites when designing layered files. Depending on how your image was created and how you will be using the image, a png and gif file can be larger in size than a jpg.
Creating an image to fit an exact area can be tricky. Typically when we are talking about dimensions for a website image, we are talking about pixels. A really wide website image might be 1900 pixels wide while your standard "about us” profile picture would be closer to 250 pixels wide. A custom home builder client of ours recently sent us a group of photos to use on their homepage slider. The slider has fixed dimensions of 1000 pixels wide by 350 pixels tall. The images they sent us were taken by a professional photographer and they were huge (roughly 7MB each and approximately 6000 pixels wide by 4000 pixels tall). If we had loaded the images in their native file format, with no reduction, the image quality would have suffered when it rendered on the website. So what we first did was reduce the image file size by running it though an image resizing program. The program we use is called PixResizer by BlueFive Software. It is freeware and can be downloaded from http://bluefive.pair.com/pixresizer_screenshots.htm. When we resized the images provided to us by our client, we chose to reduce the width of all the images to 1000 pixels which would fit our slider perfectly. However, the height of the image was still too tall for our slider. In this case, we also had to crop the image to make it fit our exact dimension.
In our example above, we had an image that was the correct width, however, the height was too tall. The image was 1000 pixels wide by 667 pixels tall. We needed an image that was 1000px x 350px. For this group of images, we needed to crop them in order to make them the right size for the slider we were using. Cropping can be tricky as you are actually cutting out part(s) of the image in order to make it a specific size. To do the cropping to specific dimensions you can use an online source like http://picresize.com/ or a software program like Photoshop.
Properly sized images can make your website look and function better. If you aren’t sure whether or not the images on your site are sized correctly for the location you can check it by going to your website and then right clicking on the image in question. Select the option to "View Image Info.” Under dimensions, you’ll see a pixel dimension (for example: 1,000px x 471px). If it shows that the dimensions have been scaled to a certain pixel size (see image example below) you may want to resize the image outside of the website and then re-upload it with the proper dimensions. In the example below a very large, 10MB 4,000 px wide picture has been forced into a tiny 152px wide space. Resizing this image and then re-uploading it to the site will increase the load time of this website.