Website images are very different from the photos used in print or taken directly from your digital camera.
- Website images are usually optimized using image compression so that they can load faster at slower speeds. They are generally displayed in 72 dpi resolution, and use one of the following file formats: GIF, PNG, JPEG, JPEG-XR, and WebP.
- Images for print or photos on your camera are usually 800 dpi, are a lot larger in size and the emphasis is placed on quality and detail. File types can be different from those used for web, TIFF, BMP or RAW file formats.
Importance of Image Optimization
Not too long ago, the use of images on the web was not as much as it is today. Slower bandwidths meant that images would take a long time to load and slow down the website. With faster bandwidths on both computers and mobile phones, the use of images, animation, and video on websites has dramatically increased over the past few years.
Studies have shown that pages with an image draw more attention from visitors than pages without images. However, if you used non-compressed or non-optimized images on your website, it would still take a long time to load and slow down your site. That is why image compression and choosing the right image format is essential.
Not formatting the images on the site and ignoring optimizing them can result in any of the following problems:
- Large files and poorly optimized images will have a large file size thus, slowing the page down from being loaded into the browser. This often results in the visitor leaving your site.
- Large image formats may not correctly display on a desktop monitor.
- Images without proper optimization may not load properly on a mobile device.
- If an image file type is not correct for the web, you may not be able to show the image in different sizes affecting the design of your web page.
- In extreme cases, too large of an image may crash an entire site due to the web server timing out.
Lossy and lossless Image compression
Depending on the need, you can choose between lossy or lossless image compression. Lossless compression can result in large sizes because of the image details retained. It is the preferred mode for archiving and also for medical imaging, technical drawings, clip art, or comics.
Lossy compression methods take away details from the image to reduce file sizes. These formats are suitable for most web applications like photographs.
Image optimization is not just about reducing image file sizes. It includes:
- Selecting the right image format depending on the type of image and where it is going to be used on the website – the right format would be different between a background image, a photograph, and an icon.
- Sizing the image appropriately is essential – using a large image and displaying it in thumbnail size isn’t optimal optimization. Similarly, using a thumbnail size image and displaying it in large format will result in loss of clarity and pixels shown.
- Optimization for different browsers, speeds and devices to ensure that the image is displayed properly regardless of the device used by your website visitor.
- Compression to make sure the picture is neither too small nor too large – selecting between lossy compression and lossless compression depending on the resolution of the original image and where it is to be used.
- It also includes image file naming and meaningful organization of the folder structures for search engine optimization.
What image formats to use?
Vector vs. Raster Images
It is important to decide which image format will work best for existing or new images for your website. The following explains the difference between vector image formatting and raster image formatting.
- Used for geometrically shaped images, drawings, icons and simple logos
- Images are zoom and resolution independent
Vector images are used for images such as logos, icons, and text. Website visitors can expect to see sharp, crisp images on any size screen; even when zooming in or out. For pictures, vector is not visually sustaining. The amount of code needed to make vector work for photos would significantly slow the page load speed.
- Used for complex and irregular shapes, photographs and complex visuals
- Image quality changes depending on the zoom and resolution
Raster image formatting works best for JPEG, GIF, AND PNG images. While raster image formatting works best for photos, it is not zoom or resolution friendly. When a raster image is made larger, it gets blurry, and the edges turn jagged.
Ask yourself these questions to decide which format is best to use
Q: Are you are trying to get the most out of a photo or other digital image?
A: The best format to use is JPEG and adjust quality settings.
Q: Do you need a high-resolution image to show a lot of detail?
A: The best format to use is PNG.
Q: Do you need a transparent background instead of white?
A: The best format to use is PNG.
Q: Do you need any web animation in your image?
A: The GIF file format is the only format that you can use (but you are restricted to using only 256 colors by definition).
Talk to us about your image formatting and optimization needs
Whether your images are vector or raster, for print or the web, Flying Cow Design’s website image formatting and optimization services can advise you on the best type of image to use. Our team will also ensure the performance of your website is not affected.
Contact Flying Cow Design today!