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