In our previous blog on optimizing images for the web, we went over the importance of professional photography. Today we will be walking you through optimizing image files for your website. It is important to understand that the file size plays a major role in the overall quality of your images and functioning of your website.
Choosing the Right Program
Which program are you going to use to optimize your image files? You will want to choose a program that has a wide range of capabilities. In other words, use something other than Microsoft Paint. There are a variety of photo editing software programs available such as Photoshop or Photoshop Elements. There are also a variety of other high-quality products available online such as Picassa and Gimp (a Linux brand of Photoshop) which allow for a comparable level of optimization.
Optimizing the Image File
When optimizing images for the web, there are some extra steps you need to consider. It isn’t as simple as when you’re cropping a photo and putting it on your Christmas card. File size plays a major role in the speed of your site and the user experience.
A website image only needs to be 72 dpi. The dpi stands for dots per inch (also referred to as pixels per inch). Dpi is all about the tiny pixels of color that make up a particular photo. 72 dpi means there are 72 pixels of color in one square inch of the photo. Images from professional photographers as well as some stock photos may often be 150-300 dpi. Although this quality is great for print, it is not necessary for the web.
The kilobytes, or size, of the photo matter as well. A smaller photo, say 47KB, is optimal rather than a larger photo of 235KB. Pages with a smaller size load faster and smaller photos use less bandwidth and display better on mobile devices. This is all very important for an optimal user experience.
Picking a Color Scheme
When optimizing an image for the web you will want to use the color scheme RGB rather than CMYK. According to Overnight Prints, RGB is the 3-color (red, green, blue) “color scheme that is associated with electronic displays, such as CRT, LCD monitors, digital cameras and scanners.” Additionally, photo-editing software (like Photoshop) use RBG because it “offers the widest range of colors.” On the contrary, CMYK is a four-color mode (cyan, magenta, yellow, black). Printers “print color onto paper using the CMYK color mode only.” You will want to opt for RGB for your website because it “has a greater range of colors than CMYK and can produce colors that are more vivid and vibrant.”
Take a look at the two images below. The image on the left is much larger in size and dpi and is using CMYK rather than RGB. The image on the right uses RGB and is a much smaller file, allowing for faster page load time. Obviously, you are going to want to opt for the image on the right. The best part is you can’t even tell the difference in quality!
If you need assistance with choosing or optimizing images for your website, contact Informatics. Also, stay tuned for the next step in optimizing images for the web: How to Choose the Right Image File Format.
