How to make sure your website images look great on every screen size

Many of your target customers will view your website on their mobiles or tablets, so you need to ensure it is as usable and looks as good on small screens as it does on a desktop. A properly developed responsive site will deal with usability, but you will still need to think about how best to showcase your images.

When designing a responsive website not many would argue that applying the much talked about ‘mobile-first’ approach is the best way to go. Why? Well you try to deliver content to the user in a simplified way, whether it be cutting down the ‘bulk’ or structuring the ‘heavy’ content so it’s easy to find but not necessarily at the forefront.

This approach alongside other mobile ‘healthy’ techniques like catering for ‘big finger’ touch navigation can only be a good thing if you want to create a truly responsive website. However, one key issue that can still get overlooked today is the serving up of different images for different devices. The lazy approach is to simply let the large desktop images scale down for tablet/mobile - and, believe it or not, some websites still do this!

Our best practice is to create 4 separate images for each device breakpoint - mobile, tablet, laptop and desktop. We apply this to ALL hero, jumbotron, full width foreground and background images. It’s much more time consuming to do this - particularly if the website has hundreds of images - but the benefits far outweigh the extra time spent.

Key benefits for device specific images worth considering are:

  • File size is vastly reduced for mobile devices, creating a truly adaptive experience especially when viewed over a mobile network.
  • The image can be art directed for each device. A boat four miles out to sea may have a huge impact on desktop but not so much on mobile if it’s too small to make out what it is!
  • Enhanced user experience by showcasing your product images in the best possible way across all devices.

Contact Applied Digital Marketing to discuss your web design and development project and how our team can help you to deliver it.

More from the blog

Card Wow

18th May 2017 in Web Design and Development, SEO, Digital Strategy, Apps

By Chris Bardsley

What is the best eCommerce platform : Shopwired vs Shopify vs Magento

Shopwired, Shopify and Magento each offer similar solutions for businesses to sell their products online, however, there are two factors to consider. The first is the time it takes for you to set your store up, and the second is the ease in how your website will expand as your business does. In our experience, Shopify outperforms the competition on both as a result of its simple user interface, and the ability to customise elements to tailor the system to your particular business.

Read article chevron_right
How To Secure Your Website Through HTTPS SSL Certificate

27th April 2017 in Web Design and Development, SEO, Digital Strategy

By Chris Bardsley

How to secure your website through HTTPS & SSL Certificates

We rely on the internet for everything from talking with friends and checking the latest news, to ordering the weekly food shop and registering details for a new passport. We put highly confidential information on the internet sometimes without thinking twice, but now the focus has been put on websites to protect our information.

Read article chevron_right