Best Image Resolution for Web and Mobile
Make the most of your website by adding proper images
BY ELIZABETH RIGHTS & TERESA FONG
Why it Matters
Who doesn’t want their web and mobile images to pop? With so many online audiences and the challenges brought by responsive design, leveraging pictures to make the most of your design can be a tall order. This guide will walk you through the best image resolutions for web and mobile-based design.
Images can make or break a page ranking in SEO. Images that are too large will lead to slow load times and poor SEO rankings. Correctly sized images balance image resolution and website speed.
Using the Right File Type
Photographs should be in the JPEG format while graphic images should use PNGs; PNGs were created to replace GIF images and retain more colors while being smaller in size.
If you have the choice to save your file, use “24-bit” rather than the more limited “8-bit” file size.
Websites are usually somewhere between 700-800 pixels wide, but best practices for web images do not include the highest resolution.
It is recommended to use between 400 and 600 pixels for a large image and 100 to 200 pixels for a thumbnail.
That translates into 72 DPI; however, on the web, only pixel sizes matter! This is the best way to manage the trade-off of good image resolution and website speed.
With more companies that ever going mobile-first, take a minute to learn the ins and outs of mobile image best practices.
The best image resolution for smartphones is 640 by 320 pixels.
Large images are a liability for mobile design and they can negatively affect website speed and search ranking. Plus, there is more variation of screen size among mobile users.
With SEO ranking affected by website speed, slower pages accrue lower rankings. Using the best images available to stand out and keep users engaged on your site!
Are you ready to add a store to your website? Learn how to with this checklist.