How to scale images for mobile websites
When you’re rightly proud of your product or service – and you know a good picture paints a thousand words – using the best images on your website makes infinite sense. Adjusting the dimensions and properties of images on your website plays a crucial role in how well it performs, particularly in achieving effective website design for mobile phones.
What’s not so obvious or widely understood, is that size matters! (Especially on small screens.)
Look and learn; website image priorities
Always look and check your chosen images and their size.
Let’s start with the cost of getting your website images wrong in general. If they look poor – including failing to load properly on mobile phones – it’s not only disappointing, it’s potentially damaging to your reputation. It communicates a lack of planning and care. Which effects the all-important credibility and trust you need to convert leads into sales.
Whereas masses of visual references – including moving graphics – can be bewildering and overshadow your USPs. Also, oversized images eat into your website storage space detrimentally.
Get your images right on your mobile optimised website, and it increases its performance substantially.
According to Hubspot, words alone have a recall rate of about 10% (after three days). When you put that information alongside a strong visual ‘marker’, the recall rate rockets up to 65%!
Images help your storytelling, brand identity, UX and SEO; so they’re top priority! As over half of your potential customers will visit your site on a handheld device, making them ‘mobile-friendly’ vital.
Tips on sizing pictures for mobile sites
Mobile optimised images come from having the correct images on your website- Photoshop is a great way to amend image size.
Using an affordable responsive design agency (Factory Pattern) puts you ‘in the picture’ on images, and makes sure your visual marketing is impressive on any device or browser.
However, if you’re wondering how to load mobile website pictures correctly, the trick is to start with an appropriate size on your desktop. Uploading or downloading large image files to use puts you on a back foot when preparing it for your digital marketing.
We recommend that you use Photoshop to resize images to fit more intuitively into the spaces on your website design. Photoshop allows you to tinker with resolution and format too, creating visual content that’s made to measure.
(Don’t forget to save the original when shrinking images to fit on website designs, just in case)
Here’s one of the best ‘secrets’ to sizing images for mobile marketing. Test it! Sometimes the only way to be sure is use it, then evaluate its clarity and impact yourself.
Or, ask us to do a professional assessment of your website’s appearance and performance on any device, and to provide quick-fix solutions.
The best size for website images
The size of your images depends on your website layout, always amend your images accordingly.
You’re convinced about the importance of visual content in marketing, but how can you size images properly to appear on phone screens?
Much depends on your website layout – and the size of the columns. For example, one column offers an opportunity to use 980 pixels images, two columns confines you to 640 pixels for assured performance.
Images of around 200 – 250 pixels wide can work great as a simple visual reference on mobile sites.
As a rule of thumb, for problem freeloading and clarity, optimised website images should be:
At least 72 dpi (dots per inch)
Have a quality rating of 80%
Never more than 2000px wide.
Incidentally, resist the temptation to pack in lots of thumbnails of your products. Such is the attention span of the modern consumer tiny images – that they have to focus on with purpose – don’t work. Too much visual input is off-putting when you’re scrolling and zooming on a small screen.
With responsive websites, keeping it clear, clean and simple is definitely best!