Preparing Images for Website Design
Preparing images for website design means balancing visual quality, file size and the way each picture appears across devices. This guide answers practical questions about supplying images, helping you and your designer make informed choices before development begins and when you update the finished website.
It presents some important insights based on the image related questions I get from my clients. It will help you get the most from your images and the website development experience as a whole.
Q: What’s the ideal image size to use for websites?
Take note that you need to supply your images in the most optimal upload ready format. Doing this will not just help you save a huge amount of time in the development stage, but it will make sure you accomplish your preferred result when it comes to the visual effect.
You also need to consider that in the post-development process. That’s especially true if you want to upload the image content to the website. The crucial thing to keep in mind here is what the image will be used for and where it will be used.
For instance, are you going to use it as a banner? A cover image? Or maybe an icon or thumbnail? A low-resolution picture might look good in some areas of your website. However, it may become unclear when enlarged as a feature image.
As a general rule, make sure you supply images to your development team in the most high-resolution format possible, allowing them to be resized properly for upload. On top of that, you want to make sure they are the correct size to show on your website. Enlarging a small image beyond its useful resolution can make it look pixelated or blurry. Are you the one in charge of the upload? Choose dimensions for the intended display size and compress the file while checking quality. There is no universal width or 600KB limit that suits every image, layout and device.
Q: Will the images I use have an impact on the website’s loading speed?
A larger file does not automatically mean a better-looking image. Resolution, compression and the original photograph all affect quality. Uploading unnecessarily large files can increase download time and slow the page down.
In turn, that could lead to your users losing patience and just leaving your website altogether. To reduce that risk, check image quality at its actual display size and test the finished page on mobile. Use the smallest suitable export rather than relying on one fixed file-size rule.
WordPress normally creates several image sizes and provides responsive markup so browsers can select a suitable version. The result still depends on the theme or page builder and how the image is inserted.
Q: What’s the ideal way to save my image files?
Are you delivering your image files? PNG and JPG image files are common choices; WebP and AVIF are also used online. Agree the preferred format with your designer. These are not ordinary web image formats:
.DOC .TTF .PSD .PDF
A filename is separate from alt text. Write useful alternative text describing the image in its page context, rather than assuming the filename supplies it. Google’s image SEO guidance explains how descriptive filenames and alt text help it understand images.
As a practical tip, make sure you provide your files with clear, short and descriptive names that identify their subject. There is no fixed eight-word SEO rule. Doing so will make it simple for users to reference and stick to simple hyphens, underscores, letters, and numbers. As much as possible, stay away from using rogue characters like percentage signs or questions marks. That’s because those can upload erroneously or cause unexpected behaviour in your galleries.
For example, your current image name is IMG_0002004.jpg. As an alternative, you can change that into something descriptive like man-drinking-coffee-11.jpg
Q: Is it important to consider aspects like orientation or aspect ratio?
You may not know it yet, but supplying images with a constant aspect ratio (width: height) is unnecessary, but it can help you have a lighter and simpler development process. Further, it will be much simpler to expect how your images will crop. Besides, you can spread the courtesy of rotating pictures wherever needed to make sure they are oriented so they must be visible on the site.
Q: My images have been cropped. How does that happen?
It is more likely that some of the pictures you show on your site will need to be cropped to fit the available space. That’s especially applicable when we talk about your mobile design.
For instance, a wide banner image on your desktop design may need a different crop on a narrow mobile screen. Keep its main subject away from vulnerable edges and preview the result at different screen sizes. Agree a separate mobile crop with your designer when the original composition does not adapt well.
Q: I want to supply my logo or similar graphics. How should I do that?
Would you like to supply your logo files or any other similar graphics on your site? Then make sure these images are vector files. Keep in mind that vector images are resolution and zoom independent. Meaning, the clarity and quality will be sustained whatever size you’re displaying the graphic throughout your website.
Final Thoughts
To sum up, you should not underestimate the importance of the quality and size of the images you upload to your website. Using and uploading poor quality images on your site can substantially cheapen your brand and services. Worse, it can cause your website to load slowly, leading your website visitors to just leave the site completely. When we talk about your images, take the time to get them right the first time. It will help you accomplish a professional finish at the end and a website that efficiently converts your site visitors into loyal customers.
Review your image collection before the design work starts and identify any gaps in quality, size or subject matter. For ideas about creating visuals that reflect your business, read our guide to bespoke website imagery. A clear image brief will help your designer choose an appropriate approach for the project.