We are always striving to deliver sites with images of a crystal clear quality across all devices, ensuring an engaging experience for every user. To help us achieve this aim, our design and development gurus have collaborated to put together the following article. Based on the image related questions they receive the most from our clients, it offers some key insights to help you get the most from your images and the website development experience as a whole.
Q. WHAT SIZE SHOULD MY IMAGES BE?
Answer: Supplying your images in the most optimal upload ready format, can not only save a lot of back and forth in the development process, but will help to ensure that you achieve your desired end result in terms of visual effect. It’s also an important factor to consider post development, if you are planning on uploading image content to the site yourself.
The most important aspect to consider is what the image is going to be used for, or more importantly, where it’s being used. For example, is it a cover image, banner, or maybe a thumbnail or icon? A smaller image, taken on an Iphone, might look fine on some areas of your site, but probably won’t work as an enlarged feature image.
As a simple rule of thumb, be sure to supply images to your development team in the most hi-res format possible, so that they can be resized appropriately for upload. At the very least, you’ll want to ensure they’re the exact size that they should appear on your site. Any smaller and they’ll likely be too blurry or pixelated for use.
If you’re the one managing the upload – we recommend a file size of less than 600KB and dimensions between 1500 and 2500 pixels wide, for best results.
Q. WILL MY IMAGES EFFECT THE LOADING SPEED OF MY WEBSITE?
Answer: Typically speaking, the larger the size of the image, the higher the display quality will be. However, it’s important to be aware that uploading files that are too large can have a negative impact on your website’s loading speed. This in turn, is likely to result in your users losing patience and abandoning your site all together. Sticking to the file size and dimensions mentioned above will help you to avoid issues in this area.
Q. HOW SHOULD I SAVE MY IMAGE FILES?
Answer: When delivering your image files, be sure your images are saved as either a .jpg (for photos) or.png (for graphics) file, and remember that the following are not web compatible:
- .pds
- .tff
- .doc
Image names can act as alt text on your site where no other text is provided, and helps search engines to determine what the image is about, making it more likely to show up in search results.
Give your files clear, descriptive, short names (typically 8 words or fewer), that make it easy for others to reference and stick to simple letters, numbers, underscores and hyphens. Try to avoid using rogue characters such as question marks or percentage signs, as these can upload incorrectly or cause unexpected behaviour in galleries.
For example: if your image name is IMG_00345.jpg, change it to something descriptive such as red-cotton-jumper-01.
Q. SHOULD I CONSIDER THINGS LIKE ASPECT RATIO OR ORIENTATION?
Answer: Supplying images with a consistent aspect ratio (height:width), is not essential, but it can help to make lighter work in the development process, as it will be much easier to anticipate how your images will crop. On a similar note, you can also extend the courtesy of rotating images wherever necessary to ensure they’re oriented in the way that they should be visible on the website.
Q. WHY HAVE MY IMAGES BEEN CROPPED?
Answer: It’s highly likely that some of the images you display on your website will need to be cropped in order to fit the space available. This is particularly relevant when it comes to your mobile design. For example, a large banner image on your desktop design may be cropped down to half of its original size in order to appropriately fit a mobile screen.
The following article offers some further insights into image scaling and how and why your images are cropped for your website: https://www.cbwebsitedesign.co.uk/graphic-design/scaling-images-mobile-devices-smaller-screens-guide-clients/
Q. HOW SHOULD I SUPPLY MY LOGO OR SIMILAR GRAPHICS?
Answer: When supplying your logo files or similar graphics for use on your website, it’s important that these are supplied as vector files. Vector images are zoom and resolution independent, which means that quality and clarity will be retained no matter what size you are displaying the graphic throughout your site.
IN SUMMARY…
Don’t underestimate the importance of the size and quality of the images you upload to your site. Poor quality images on your website can dramatically devalue your brand and services or cause your site to load so slowly that users don’t even make it to the page they were looking for in the first place.
When it comes to your images, taking the extra time to get it right, will help you achieve a professional finish in the long run and a website that effectively converts users into customers.
