The images on your company’s website have a big impact on visitors and are often their first impression of your business. So they need to be professional, up-to-date and fast. You want vibrant images and rich graphics, but if you have too many they can slow the site’s performance. I think we can all agree that no one likes to wait for a page to load, much less an image.
Below are my six top tips for making sure your images aren’t bigger than your bandwidth.
- Compress, compress, compress. Digital pictures can take up an enormous amount of bandwidth if not properly compressed and that, in turn, can turn your website into a frustratingly slow experience. To keep images to a reasonable size, use a program such as Photoshop or Pixelmator and use the Save for Web and image export, respectively, to cut the size down. If you would like to make the image file size even smaller, you could also run the file through an image optimizer software like ImageOptim for the Mac. This application uses several compression algorithms to decrease the file size, yet keeps the image looking the same. ImageOptim can reduce PNG file sizes by 30-40%. The smaller the file size, the faster your site will load. Alternatively, you can reduce the physical dimensions of the image– for example, reducing a 3264 by 2448 jpg image from an iPhone 6 plus, down to 700 by 525, takes the file size down from 2 MB to 295KB. If you go a step further in Photoshop and save it for web, the file size drops to 71KB.
- Know your image formats. Different image formats have different uses. The older GIF format produces small files, but the images aren’t as sharp, and limited to 256 colors. GIFs are best for images with text and flat colors, as well as cute videos of cats. JPG images, on the other hand, are great for photographs or graphics with thousands of colors. However, be prepared for large, files of 3 to 5 MB’s on average. JPGs can, and should be, reduced through resizing and compression (see above) but that could possibly sacrifice some image clarity and colors. For images with large blocks of solid colors, you have a need for transparency and PNG graphics are best. PNG files compress well, but they will have an overall larger size than GIF and JPG images.
- Beware of large galleries. LightCMS (as well as other CMS applications) have an image “gallery” feature which allows web designers to put a number of small thumbnail-sized images on a single screen so the viewer can see them all at once. The viewer can then click on a small image and a larger version of it will load. However, you should keep in mind that galleries can load both the small and the large versions of each image causing the image files to compete for bandwidth.
- Use 3rd party video services. In the old days of Flash players, websites would host their own .flv’s and visitors with free Flash players could view them. Now, however, hosting Flash videos on a site is pretty much history. Today’s answer is to post your company videos to sites such as YouTube or Vimeo and embed the link on your site instead. The video plays on YouTube, saving you the storage space and bandwidth.
- Anticipate new technologies and how they may affect your site. Mobile devices created a need for more cleanly organized sites and fewer, smaller images. Now retina displays are moving things in the opposite direction with displays showing your site in a much higher resolution. To take advantage of the sharper capabilities of a retina display you can have two versions of each image, one for a retina-capable device and one for normal displays. The browser will look to see if the higher quality image is available and serve that image. If not, it will load the regular image.
- Make sure images are your own. Finally, make sure all of your images are your property. Designers are often tempted to “borrow” good images from other people’s sites. Don’t. The odds that someone will notice are higher than you think, and in the era of social media, your theft of someone else’s intellectual property could become a trending topic. Don’t you want to showcase your own high quality content for visitors to admire?
Posted on Tue, December 16, 2014
by Chad Jaggers, Product Manager, LightCMS filed under