Getting The Balance Right With Image Quality
What are your images really saying about your website? Are they picture perfect?
Despite being vitally important to a website’s appearance and appeal, images are often an afterthought. Developers and clients typically focus on functionality and keywords, with visual elements only considered later on in the design process. This can result in amateur photographs taken on a smartphone or downloaded from a copyright-free portal like Wikimedia.
Why are Images so Important?
The choice of photographs should receive greater prominence during a website’s design stages, but individual file size is also crucial. Photos can occupy the majority of data bytes on a typical webpage, and large files will slow page loading. Slow loading pages impact search engine rankings. Multiple images force web browsers to keep resizing dynamic templates as each graphic arrives, yet the absence of visuals results in a dull aesthetic that will hasten each visitor’s departure. That’s also detrimental to SEO performance.
Get Professional
Unless you’re familiar with wide angle lenses and white balancing, it’s worth hiring a freelance photographer to capture unique images of premises, personnel and products. Their professional images will be supplied on a CD or via cloud platforms like Dropbox, in high quality formats. RAW files can be up to 26MB in size, and even a browser-friendly JPG may occupy 7MB in its original state. The equally common GIF files are generally used for logos or background designs, while PNGs are the third file type recognized by any modern browser.
SEO Considerations
Since most of the world’s web traffic is carried on mobile devices, search engine rankings consider how long each page takes to download. An unedited RAW or JPG will damage a website’s final ranking, while few people will wait for a huge graphic to appear across a sluggish 3G or even 4G connection.
To achieve an optimal balance, each file should be cropped or compressed to load as quickly as possible while displaying clearly on a 1920×1080 monitor. This may require a degree of trial and error, viewing each image at 100% with varying levels of resizing. Free photo editing packages may deliver cruder results than purchased software, with pixelated backgrounds or skies common issues.
These are some of the other key tips for optimizing image quality:
- Don’t confuse image size with file size. Photos are measured in pixels, while files are calculated in kilobytes. Try to keep the former large but minimize the latter.
- Ecommerce sites with multiple pictures per page often display compressed thumbnail images, which can be expanded with a mouseover or single click.
- Don’t encode text into a photo, since it’s not selectable and won’t improve search engine optimization. Captions perform far better for SEO purposes.
- Reduce bit depth to save space. For instance, a 7-bit PNG uses a fraction of the data needed by a 32-bit file.
- Strip out unnecessary metadata like the camera model, but include file and alt tags. A brief description of the picture will boost SEO.
- Use scaling web pages to resize images according to each device’s resolution, rather than displaying the same content on every page.
- Test any website on a variety of devices and web browsers before it goes live, to identify broken links or graphics that take too long to download.
Remember, a picture is worth a thousand words and your images say so much about you, so choose them wisely.