This is the fourth piece in our new series entitled: The Secrets Of Good Design. In each article we will cover one of the following topics:
- Tips & Tricks
If you missed the previous article on Color, click here. This one is all about Images. Let's go!
Sometimes, we are tempted to use an image as filler, to avoid having a blank space on the page. A web page can look bare without one, so we might think a little bit of something is better than nothing. While it can certainly help, it can also hurt if it's not done with a deliberate purpose in mind.
Let's look at a few key ways we can get the most out of our images.
Images are always "in a box", that's just how they live in their native state. That's the original format you will always find them in on a stock photo website, on your computer, or anywhere you have photos. When you take the image and place it on a web page, it's just that - an image slapped on the page.
If you cut out the model or main subject of the image by removing the background, you have now created a three-dimensional space where the subject exists with other elements on the page (like buttons and text). I created a few mockups below to show the difference between a "boxed" and "unboxed" image and how it drastically changes the mood of the design.
Point Out the Obvious
When you add an image to your web design, don't be afraid to draw attention to it. Or better yet, don't be afraid to use it to put the focus where you really want it.
In the example above we have the subject of the photo looking in the direction of the headline, subconsciously nudging the viewer in that direction, ultimately steering them where you want them to go.
When adding an image as a background you can lose readability of the foreground content. This is easily fixed by using an image overlay.
This can be achieved by adding a black color fill over your image and reducing the opacity until you get a nice transparency. In the example below, the first background photo has no overlay. The second background photo has a black fill with a 30% opacity which creates a nice transparent layer which makes the text much easier to read while still allowing the beauty of the photo to shine through.
The importance of optimizing the file size of your images cannot be stressed enough. Every single kilobyte adds real, tangible weight that increases your site's load time. Unnecessarily large image files tend to be the number one culprit of this.
In terms of why it is so important to have your webpages load quickly, the graphic below says it all.
You should strive to be in the sub-two-second range if you want users to stick around for any meaningful length of time. Way back in 2010, Google made page load time a factor they take seriously when ranking a webpage:
“Speeding up websites is important — not just to site owners, but to all Internet users. Faster sites create happy users and we’ve seen in our internal studies that when a site responds slowly, visitors spend less time there. But faster sites don’t just improve user experience; recent data shows that improving site speed also reduces operating costs.” – Google
Optimizing images is relatively easy once you know what to watch out for. Understanding the difference between lossy and lossless compression is key to deciding which format to use.
There are a million and one different file types out there, but for this article on images we are going to discuss two:
- PNG (.png) Lossless
- JPEG (.jpeg or .jpg) Lossy
Click here for a comprehensive breakdown on the difference between JPEG and JPG.
Spoiler alert: They're the same thing!
Lossless compression is a method of reducing the overall file size of the image without reducing the quality. Lossless can be used if you need to keep the quality of the image untouched and is generally better for print purposes. Lossless image compression can usually shrink a picture by 5% to 20%.
Lossy compression is a method that reduces the file size by an even greater amount, but with a decrease in quality. Mainly used for images to be displayed on the web. Lossy compression can achieve file size reduction by up to 95% with very little difference to the human eye. As you probably already guessed there are distinct advantages, and disadvantages, to both formats.
PNG uses lossless compression which keeps the original data of the image intact. It is a file format commonly used for images that require a transparent background. While this is a great feature that certainly has it's use in graphic design, a good rule of thumb for the web is if you don't need a transparent background, you most likely don't need to use the PNG file format! Because PNG is a lossless format, the size of the file will be much larger than say, a JPEG file.
JPEG uses lossy compression to eliminate unnecessary data from the image, resulting in a smaller file that loads faster. This means you’re able to adjust the compression ratio and manipulate the size and quality of the image. Although reducing the image size often degrades the quality, you can always adjust the compression ratio to maintain a balance between size and quality.
There are a number of websites that will compress your images for you quickly and easily. My personal favorite is Compressor.io.
Just drag and drop a file from your computer and it will automatically compress the file and produce a link for you to download the new smaller file. I personally use Compressor.io to routinely compress larger images by 50, 60, 70, 80, or even 90%! It is very fast, very easy and best of all free!