Client Login 
KontactIntelligence's Blog
KiKwik Tips – Image & Graphic Optimization
Did you know that the size of the images you use on your website can adversely affect its performance? Below are some tips to help you optimize your images so it does not impact your sites’ load time.
- Your website’s photos should be in JPEG format. JPEG allows you to create a smaller file size so it renders more quickly in your users’ browser. Be sure to keep an eye on your images though, because the compression ratio for JPEGs can cause image degradation. If you notice your images begin to lose their luster, simply upload the image again.
- The best file type for images on the Web is the PNG. The compression rate for this type is almost zero. This means the image you upload today will look just as good two years from now. But something to consider is load time. An image with the same dimensions may have a file size 3 times higher than JPEG. It takes browsers longer to download and render. If you only have 1 small image, with no other graphics, this might not be a problem. But an image gallery, or a page with lots of graphics, might be slow to download and could annoy your users.
- If you have images of great importance to you, whether for work or personal use, you should archive your images in PNG format so they maintain their properties for many years. Images on discs, drives and hosted (i.e. website or cloud storage) are digital data, and subject to degradation. A PNG is known as a lossless file type, meaning it loses less data over time than a JPEG. The tradeoff is the PNG is a larger file size and will take lots more room to store.
- Images should be cropped and sized to the dimensions available on your Web page. The height and width can be controlled by HTML properties, but a browser must still download the entire image for it to be displayed.
- When you prepare an image for use on the Web, using an image editor such as Photoshop allows you to optimize your image with little work on your part. Instead of clicking “Save As,” click “Save for Web and Devices.” From here you can select which file type you want (PNG, JPEG, GIF, etc), as well as making sure it’s saved as a sRBG color profile (the color profile used by monitors).
- Do not use TIFF files for the Web. Virtually no browser will render this file type, and your page will only show that annoying ‘X’ where your image should be. This format is best used for images destined for print. A TIFF is also one of the largest file sizes available.
- Do the images you uploaded to your social networks look dull and distorted? That’s because sites such as Facebook and LinkedIn, for example, convert your images to JPEG and strip all extraneous data, and reduces its size up to 80% or more. As a test, I uploaded a 266KB PNG (a small, but nice size image for a gallery). Both Facebook and LinkedIn converted it to a JPEG, and after stripping all the data from compression, left a 20.8KB file. My image lost 92.2% of its data. That means images hosted on many of the most popular social networks are subject to image degradation. To solve for this, consider hosting your images on another site, or on your website. You can then insert your images into a post using the image URL, though they won’t show in your Facebook image gallery.
- Your logos, and any graphics with lines, including text, should be in PNG or GIF format – and never a JPEG. Because JPEGs are a lossy file type, your image will degrade from compression. Colors bleed and become distorted, and you will begin to see artifacts, dots or pixels of color that should not be there. A PNG, for example, is a lossless file type and not subject to much degradation from compression. If possible, use a program best suited for graphics, such as Adobe Illustrator. Photoshop does not deal well with text, and you might have pixelation, color bleed, or text not properly contained.
- Never upsize your images or graphics. Taking a 500kb image, for example, and trying to make a 1MB image from it, will degrade the quality of the image.
