From the image’s mood and quality to the dimensions and file size, the images you choose to represent your brand can make or break (literally and figuratively) your website. Here is a simple guide to the basic elements to consider when curating and embedding any image for the web.
Part 1: Aesthetics
Source the Right Images
From your own original shots to stock photography, make sure you source/gather/shoot the best images for your brand before you start building your website on your own (or engage with a web designer). While having a selection of stunning, original images is ideal, most of the time, you won’t have enough original images to fill all the spots in your web template, especially if you’re just starting out. Head on over to Unsplash.com to find free, beautiful images to supplement your own.
The most common images you’ll need to source:
Homepage banner or slideshow images
Interior page banner images
Section background or inset images
Either way, if you’re using original or stock imagery, make sure you keep the following in mind when sourcing and prepping photos:
Use your color palette from your brand’s visual style guide (coming soon: how to create this!) and make sure your images are complementary to those colors and are consistent in that palette across all images. Take notice of the style of the images as well- you don’t want a mash-up of busy dark and moody images with super bright minimal shots. To help with this, try to pick images from the same photographer, or pick one style of lighting, mood, and subject matter and stick with it across the board.
Most of your images for banners, section headers, or full width section background imagery should be landscape in orientation (in other words: horizontal) to optimize space and not make the user scroll and scroll and scroll to get to the next section on your page. Take a look at the example below: both photos are the same width, but if you used the portrait (vertical) orientation on the right your user would have to scroll down the page over 2x as long as if you used the landscape photo on the left.
You’ll have some exceptions, like square or portrait orientation images within sections (like your team’s headshots or product photos), but when hunting for the main imagery of your site, defer to landscape.
Keep in mind if you’ll be using images as a background for a section, especially when there will be text overlaid (like in a banner image or slideshow), make sure there is enough blank “white space” where the text can live legibly and with comfort. Think: blank walls, empty skies, or solid colors.
4. Quality and Size
All images on Unsplash are high quality in production and in file size/resolution, but if you’re grabbing images from elsewhere on the web or pulling from your own repository of brand images, make sure that your images are large enough, and a high enough resolution, that they will be crisp and clear on the web.
In the next section we’ll learn about how to optimize your image and file size, but in order to do that your image has to be too big, rather than too small, in size and quality. For any full width image, the minimum dimensions should be 1920 pixels high x 1080 pixels wide at 72 pixels per inch. This moose was only 600px wide to start, and while the quality was already pretty low, when it goes full width here you can see the pixilation.
Part 2: Technical Stuff
Get your sourced images ready for the web
Finding the perfect images is only half the battle. In order for your beauties to get in shape for the web, you need to do some final legwork – don’t worry, it’s not as hard as it seems!
1. Image and File Size
Too large of image size and your website speed and performance plummets, so you want to create the absolute smallest image possible without compromising image quality. The ideal size of a horizontal/landscape image on a website is 1920 x 1080 pixels, and the .JPG file size should be as small as possible. Your entire page should weigh in at no larger than 2MB, and images generally take up about 50% of that weight. Make sure the sum of all your images on the page are below 1MB. To achieve that, you generally want to shoot for file size of around 200kb on your main full-width images.
While you can resize images within your Content Management System (CMS – like WordPress or Squarespace), it’s much clunkier of a process and workflow than if you do it outside of the CMS. Do your resizing BEFORE you upload to your website using an image re-sizer like Photoshop or an online tool like https://resizeimage.net/ or https://bulkresizephotos.com/
To majorly geek out on this topic visit https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/image-optimization
Or for a less intense study https://kinsta.com/blog/optimize-images-for-web/
2. Rename your Images
Creating descriptive, keyword-rich file names is crucial for image optimization. Search engines not only crawl the text on your webpage, they also crawl your image file names. Rename your images to something in plain english that is both descriptive of what the image is and can be crawled by bots.
Plus, you’ve all seen a slow loading image on a webpage or a broken image where all that shows up is IMG789.jpg or stupiddraft1.jpg. Your file names WILL BE SEEN.
3. Upload and Tag
Alt attributes are the text alternative to images when a browser can’t properly render them. Even when the image is rendered, if you hover over it, you will see the alt attribute text (depending on your browser settings). Adding alt text will also help users with disabilities and search engine bots “read” your image, increasing visibility and rankings. So make sure that when you upload your image to your CMS, make sure you fill in your alt tags.
4. Give Credit
If you use stock photography from a website like Unsplash, where the photographers are donating their photos for free use, give thanks for their generosity and show their talent off to the world by giving credit where credit is due. We always use the “caption” spot in WordPress and incorporate the photographer’s name into the file name whenever possible. This not only applies to web, but do the right thing and list credit anywhere you use another person’s work (that means re-grams too!) on social media or in other spots.
5. Extra Compression
If you’re using WordPress for your CMS, to add an extra layer of awesome install WP SMUSH plugin. It’s free and will further compress and optimize your image to make your pages load even faster.
Overwhelmed with finding your own images? We offer image curation services and custom photography to help make your website shine! Visit our photography page for details.
Co-Founder / Chief Alchemy Officer
Stephanie is Flauk’s head website tinkerer, social strategist, and digital puzzle builder. She’s devoted to transforming all of your company’s offline missions, goals and dreams into solid gold out in the vast webiverse.