Optimize your images to decrease Page Load times
Keeping your images optimized for visitors to your website is an important task, and can have a direct effect on page load times. A slow loading site may cause potential customers or visitors to abandon your page, and can also negatively impact SEO results.
When saving images with graphic editing software, or using optimization tools available online, it is becoming very easy to correctly optimize images with proper file-formats and dimensions. There are several techniques that can be easily deployed to prevent large file-sizes, and save your visitors from wasting unnecessary bandwidth to load your website.
1. Choosing the right File Type
Although GIFs were popular for years and can still be used to produce animation (who doesn’t love a great 90’s animated GIF), the primary image file formats used on modern websites are usually PNG, JPG and even SVG.
PNG which stands for Portable Network Graphic, is a file extension developed in 1996 and designed to be an alternative option to the GIF file format. PNGs use lossless compression, and are well suited for websites to display images containing text, logos, or images that use transparency. A few advantages of using PNGs for the web are:
- Ability to set transparency/opacity settings which are not available in the JPG format
- Using an extended colour palette. PNG 24-bit RGB and 32-bit RGBA colours are available
- Can still be optimized for reduced file-size without losing much quality
JPG, or JPEGs is a file extension that stands for Joint Photographic Experts Group. This format was introduced in 1992 and is a commonly used lossy compression format. The compression can be adjusted during file-saving, allowing for a reduction in quality vs file size depending on what options you choose. JPGs can work great for colour and photographs, however there can also be a slight loss of quality due to compression. Photo editing software such as GIMP and Photoshop can be used to save optimized JPGs by default; providing a live preview of the image to see how much the quality degrades when saving at a more optimized file-size. A few advantages of using JPGs can be:
- JPGs can be saved in high quality, low quality, or anywhere in-between and allow you to save an optimized image while balancing quality and file-size
- Larger images can be saved with smaller file-sizes, providing a popular option for photographs and large homepage banners
- Huge colour palettes to work with so can be well-suited for images with lots of shadows, gradients, complex patterns
SVGs, or Scalable Vector Graphics, are now becoming more widely used on the web as a popular format for images. Previously, there was a lack of browser support and plugins such as Adobe SVG viewer were required to even view them in your browser. The SVG file-format is now well supported directly by all modern browsers (see browser support here http://caniuse.com/#feat=svg), and is a viable image format option for vector based graphics.
The SVG format is also resolution independent, meaning that one image can be made larger or smaller and the quality will not be changed. This means that you can provide one full resolution image for your visitors; no matter what size screen or resolution the user’s device has. Some good uses for SVG file formats are:
- Vector based images such as Logos or UI Elements; allowing you to auto-scale your logo or page elements larger or smaller, based on the user's device
- Graphs, Shapes, Infographic images. This can also be well-suited for “live” graphs or images that update based on AJAX requests the user is making to the page
2. Saving with the right Dimensions
Website visitors love fast page speeds, and if they are waiting too long for pages to load they could abandon your website. Saving and displaying images on your website at the wrong dimensions (not properly setting the height and width) can drag down performance and have a negative impact on overall usability of your site.
A common mistake is to save an image at an exceptionally large size (say 1920px or even 3000px width), but only load the image in an element on your website that is actually much smaller (think 350px homepage feature image). Using an image larger than the area it is actually being displayed in on your website is a complete waste of your user’s bandwidth, and will cause the browser to take longer to load the page. Too often you may come across a webpage where a smaller image is showing, but opening the source image URL in your browser will display a much, much larger image! Even though this image is only being displayed at an actual size of 350px, the browser is still forced to download the entire 1920px wide (or larger) image.
To optimize your images, make sure to adjust height/width appropriately and save images at smaller scale so the browser is not required to download a larger image needlessly. With software for graphic editing such as GIMP or Photoshop, an image can be scaled using the scaling tool; a tool which can maintain the aspect ratio and allow you to set variable height and width before saving. For quick scaling of images automatically online, try the website http://webresizer.com/. This site will allow you to upload an image, and have the optimization done for you while maintaining your original image’s aspect ratio. You can also adjust the height and width of the image manually before resizing and saving the adjusted image. To get full control over editing your images and learning to scale and resize independent of online tools, try the free and open-source image editor GIMP (Gnu Image Manipulation Program).
3. Compressing for smaller file-sizes
Not only can saving images with proper formats and dimensions reduce file- size, but compression techniques can also help further optimize images without reducing the quality. Sometimes the original source image size can be reduced significantly. A large image that is not compressed could cause users to download possibly several MB of data. The same image compressed could potentially be scaled down to only a few hundred Kilobytes with virtually no quality loss.
Graphic editing software like Photoshop or GIMP have options when saving to use optimization (or “Web Safe” images), and can even save files without extra metadata to further reduce and remove unnecessary file information. For a guide on how to optimize images using Photoshop, see this link from Adobe. Similar tutorials are available for GIMP at docs.gimp.org.
If you want to automatically compress images online, there are a variety of free tools such as:
- TinyJPG/TinyPNG: these tools are great for quick drag and drop upload of images to be provided with a sometimes significantly reduced file, with virtually zero quality loss
- Compressor.IO: a similar tool, but also supports SVG images
Saving images for the web by using proper file-formats, image dimensions and compression techniques will ensure that you have a speedy website to respond to your visitors. Your website can present a great visual experience, while saving the end-user (and yourself) the potential bandwidth cost of loading significantly larger images in the browser. As bandwidth grows, every little KB can add up to some significant savings, leading to a more pleasant experience for your visitors and search engines.