Whether you’re building a new site from scratch or revamping an existing one, picking media and preparing images for the web can be a daunting task. What images should you look for? Where can you find them? Are there website image size guidelines you should follow? What’s the ideal image resolution for a website? With a little information going into the search, we can answer these questions (and more) and leave you ready to choose and add content that will drive your online presence.
Content and Image Composition
Since the web is an almost strictly visual medium, the images on your site are an excellent opportunity to convey a lot of information instantly. Here are some quick tips to get the most out of them:
Compliment Your Content
Think about the purpose of the image. Should it draw attention away from the text? Or is it going to be decorative and complimentary to some specific section? Will it be a background image?
Also, find images that compliment your site’s color theme to make sure the site stays together visually. Images that clash with the rest of the site will stick out like a sore thumb, but remember, you can often use this to your advantage to draw a user’s eye to specific areas!
Avoid Being Too Literal
It can be tempting to add images that have text explaining what you’re trying to convey, but images give you an opportunity to communicate across language barriers. As they say, a picture is worth a thousand words.
Keep Your Users in Mind
Human beings are predisposed to focus on people (particularly faces and hands), so images with people are going to draw attention. Keep this in mind when choosing images to compliment a call-to-action or any areas of the site you’d like to draw attention to.
Give Yourself Room to Work With
Pick images with negative space around the subject, especially for hero images or anything that stays full-width on mobile and desktop screens. Negative space is any area of a photo that has little important detail, such as sky, shadows, or blank walls.
You can always crop images down, but it’s much harder to add to a photo. That’s why picking images that can be cropped without losing the subject is very important.
Beginning with high resolution images will give you the best possible starting point for your site. However, keeping images at the highest resolution will tank your site’s load speeds and hurt search engine optimization (SEO). In order to optimize images, they need to be properly resized, cropped, and compressed.
Stock/Public Domain/Internal Photography
So, we have a good idea of what we’re looking for in a photo’s content, but where do you find the photos themselves? Which images can you use on the web? Here are some quick tips on the types of images you can pull from the web, how to properly license them, and when you can use them for free:
Good for finding very specific imagery that isn’t viable to shoot with a hired photographer. However, stock photos of people can feel disingenuous or ‘staged,’ so it’s often best to stick to stock images that, at the very least, don’t have identifiable faces.
Great for backgrounds, images of specific or well-known locations and events. Keep in mind that these images are frequently used across the web, so it’s not a great idea to feature them heavily.
Best option for heavily featured images, highly specific content relating to your business, or images depicting team members, since the images will be unique to your company and website. Seeing images of real employees gives a feeling of authenticity, even if the employees eventually move on to other opportunities. The downside is that this tends to be more time-consuming and expensive since it involves hiring a photographer, organizing employees for a shoot, etc.
Image Attribution and Licensing
Most of the images you find online are copyrighted and require some kind of license to use them on your site. Improperly using images can open you up to a whole host of liabilities and legal troubles, so it’s important to have a basic understanding of some common forms of image licensing and where you can find free and licensed images.
Provided by the creator without copyright and can be used freely without licensing or attribution (although it is considered best practice and polite to credit the creator if possible). This is the case with Creative Commons (CC0) licensed content.
Creator’s rights to the image have expired, so they can be freely used without licensing or attribution.
Users pay a one-time fee to acquire usage rights for an image. This is the most common form of stock photography licensing.
Users will likely need to provide exact usage, the number of copies, usage time, and potentially other specific information. Rights-managed images are generally used on products, with more specific contracts and obligations on the buyer. However, these are also often exclusively contracted to one buyer and precludes others from using the images at all.
Looking for free or rights-managed images? Try these resources:
Free/CC0/Public Domain Resources
Stock Image Resources
Image Compression, Resolution, and Cropping
Now that we know what we’re looking for in the content of an image, where to find them, and how to navigate some common license types, it’s time to get into the technical side! Generally, when you download an image from a stock site or public domain resource, it’s going to be an absolutely enormous file, both in terms of how much storage space it takes up and the viewable resolution. So, you’ll need to learn how to optimize images for the web by considering the file size and determining the appropriate resolution.
Refers to the maximum size of an image or screen in pixels. For example, a screen might be 1920×1080 max resolution, or an image could be 800×600. Sometimes, this is shortened when referring to computer screens for common resolutions. For example, 1080p, 720p, or 4k.
The actual size of the image file on a hard drive or storage device, usually measured in Kilobytes (kb) or Megabytes (mb). Resolution has a significant impact on file size, so, generally, higher resolution images will mean a larger file size,and will mean longer download times on your site.
Image compression is the process of using software to reduce the file size of an image file without impacting image quality. Not all images are saved in exactly the same way when they’re created, and compression software is designed to recreate image files in a more efficient manner—without causing errors that would render the files unreadable, of course.
Rendered resolution is the size an image on the web actually displays in a browser, depending on the screen size.
You can generally assume images are going to have the highest rendered resolution on a desktop computer, so we can use the rendered size on a 1920x1080px computer screen (the most common screen size) to determine the size we want to upload the image at.
To determine the rendered resolution, you’ll have to inspect the image block on the front end of your website using in-browser developer tools.
Inspecting Web Elements to Find Your Resolution
At Gravitate, we often use placeholder images while clients are gathering their own content, so we’ll assume there is currently an image displaying on the page and you’re looking to replace it. We’ll start with an example on our own site here:
1. Open the page on a full screen browser window in Google Chrome to ensure everything is displaying at the largest possible width.
2. Right click on the image (or Control + Click on Mac OS) and select “Inspect” from the menu.
3. Assuming there isn’t an HTML element covering the image, it should open the developer tools window or a sidebar in the same window and highlight a line of HTML code starting with <img>.
4. After the ‘<img’ tag and before the closing ‘>’ following it, there should be a snippet of code that shows ‘src=’ followed by a hyperlink. This is the image Source, or the link to wherever the image file is actually stored on the web.
5. Hover your mouse cursor over the hyperlink and it will display a window that shows some information about the image, including it’s rendered size and intrinsic size (the full resolution of the image stored on the web).
Now that we know the rendered size, we have our target size for the new image!
Checking Image Size and Resolution
Now that we have the maximum resolution an image will display on the page, you can check the resolution of any images you have saved to your computer.
1. On a windows computer, right click the file on your computer and choose “Properties.”
2. This should display file size in KB or MB, as well as the current resolution of the image (width x height).
3. On a Mac OS computer, hold control and click an image, and choose “Get Info.”
4. The image size will display under the General tab, and the resolution will show as “Dimensions” under the “More Info” tab.
Cropping and resizing images can be done in a variety of ways, from online tools to most image viewer software that comes free on Mac or Windows computers. I’ll cover the steps to crop and resize images using Adobe Spark, a simplified online tool from the creator of Photoshop. I chose this tool purely because it’s from a reliable company, it works on any computer, and it’s available to use for free online at spark.adobe.com.
1. After you log in, select the blue plus and click “Custom Size Graphic” to start a new project. Here, you can enter the width and height you’d like the image to output to (this would be the “rendered resolution” from earlier). Enter the dimensions you’d like and click “Next.”
2. After a brief load, the editor screen will pop up. Click in the center of the blank white space in the middle to select the background element.
3. On the right side of the screen, you’ll see a sidebar labeled “Edit Background” with a “Choose Image” button. Click this to open the “Add Photos” dialog on the left of the screen and click the “Upload Photo” button.
4. Use the file picker to choose the image you’d like to resize or crop and select “Open.”
5. The image you chose should now fill that background element, and it will likely stretch beyond the boundaries of the background (especially if you’re doing some significant cropping). The “Edit Image” sidebar should now be open on the right side of the screen, with options to replace, remove, and resize the background image you just added. You can also reposition the image by clicking and dragging it while the “Edit Image” sidebar is open.
6. Once you have your image positioned the way you’d like, you can choose “Download” in the top right corner of the screen and select the file type you need (usually JPG). By default, this will be called “My Post,” but you can update the file name by selecting the pencil icon next to “My Post” on the top left of the screen.
The file you downloaded should now be the proper resolution, and you’re nearly ready to upload it!
Why is Compression Important?
We briefly covered what compression is, but why do you want to compress images before you upload them? Especially if you’ve already resized and cropped them? In the end, compression is optional, but it’s a quick and easy way to save image storage space and keep your site fast and responsive. Often, you can shave off 50-80% of an uncompressed image file’s storage size by using a compression tool—and that’s a pretty significant savings, especially on larger sites.
How to Compress Images
With an Online Tool
There are a number of online tools and services that will compress images for you, like tinypng.com, imagecompressor.com, or guetzliconverter.net. Generally, these online tools allow you to upload images in limited batches and return a zip file with the newly compressed images.
These sites are very streamlined and easy to use, making them a great way to compress a few images at a time.
With a Plugin
For WordPress sites—especially sites with a lot of different users uploading content—a plugin is a more comprehensive solution to compression. Instead of compressing images ahead of time, plugins like Smush or EWWW Image Optimizer can compress images as they’re uploaded. Image compression plugins can also bulk compress images that have already been uploaded.
Let’s Start Preparing Images for the Web
Hopefully, this article has given you a good sense of how to select the right images, where to find them, and how to optimize them for your site. Preparing images for the web is a crucial step in ensuring you have a website that not only looks good but also runs quickly and efficiently.
If you need more support in increasing your digital presence using images and other assets, feel free to reach out to Gravitate’s team of digital experts.