How to Best Incorporate Photos in Your Website’s Design
A picture is worth a thousand words, but it’s not worth slowing down your website. No matter how awesome your images are, the user won’t wait on the website to load. So let’s explore how you can incorporate great pictures in your website’s design without compromising speed or usability.
Using the Right Sized Images on Your Website
By not using oversized images in your website’s design, you will speed up your website tremendously. For example, don’t use a 3000px wide photo when it will only be 700px wide on the website. Take some time to plan out what photos will go where on a site, and then edit the photos for that size in Photoshop. Once you’ve resized the photo, you’ll also need to compress each photo. Compressing a photo removes metadata and reduces the file size by up to 80% without any loss in quality! By resizing and compressing the photos during the development of your website, you will be able to make sure your website loads in less than 2 seconds, which is very important, especially on mobile.
Using Images on Mobile Websites
Photos that look great on a desktop might not always look great on mobile. Unlike desktop screens, mobile content stacks in a long column- potentially causing important content to get pushed down further on the page. Make sure your content is suited for various screens by using media queries to adjust size and position of photos. You can also consider hiding unimportant images in order to optimize mobile browsing.
Using Images as Backgrounds
Ensure that any text on top of photos looks good on both mobile and desktop. Busy background photos can conflict with overlaying text making content on your website hard to read. We recommend using Photoshop to add an overlay color of your choice and then exporting in an optimal size. Doing this will help keep things simple and easy to load.
Ultimately, keeping your site simple and easy to load should always be a priority. Images compressed and edited at the right size will certainly help to achieve the 2 second goal. Having content mobile ready and removing unnecessary images is a second priority. Finally, double check background images and observe what happens when content gets pushed around due to screen sizes.