The Power of Visuals
Views increased by 94% when an article contained a relevant photograph or infographic.
Many of us know how much people love website visuals, which is why images can entice more folks to read our content. However, visual strategies executed poorly can do more harm than good.
In this presentation I gave to the Boulder WordPress Meetup Group, I share tips and techniques that will ensure your visuals enhance your content and get more people to read it.
How to Use Images to Power Your Website
These slides cover:
- How to find good visuals and use them to get more eyes on your content
- Website load speed – why it’s important and how images impact speed
- Image optimization techniques
Slide 2 – Power of Visuals
The shares images get on social networks prove how much people love visuals. According to a Skyward study, articles with visuals got 94% more views.
Slide 3 – Bittersweet Reality of Website Visuals
However, a visual strategy that isn’t executed well may harm your brand. Let’s look at some of the problems that occur when visuals aren’t created correctly.
Slide 4 – Visuals Can Confuse Your Audience
If your image doesn’t reinforce your content, it may confuse your visitors and dilute your message.
Slide 5 – Your Photos Are All Over the Web
You see the stock images you used on other people’s websites and blogs. Yikes!
Slide 6 – Visuals Impede Your Website Load Speed
After adding photos, web pages are taking a long time to load in a web browser.
Slide 7 – You Can Prevent These Problems From Happening
I’m going to share techniques that will help you avoid these issues.
Slide 8 – Good Visuals Reinforce Your Message
Choose images that are related to the stories and messages you publish. By posting a mouth-watering photo of pound cake, food blogger Chef Dennis entices folks to read his article.
Slide 9 – Great Visuals Make an Emotional Connection
Good visuals touch visitors emotionally. They hook people into your content. That’s what the World Wildlife Fund managed to do with this image.
How do you get high caliber images?
Find inspirational visual resources and study images that touch you. To spark your inspiration, visit 60 Public Service ads, a collection of creative images which grab people’s attention.
Consider asking local photographers if you can pay to use their images on your website. If you’re a good photographer, dive into your collection to find visuals.
Another option is to hire a good designer to help you with pages that get a lot of traffic and sell for you like home, products, and services. Professionally designed images will make your pages look sharp.
Slide 10 – Customize Stock Images
If you use a lot of images in your content, you may not have the resources to purchase one-time use photos. In this case, stock photos can be a reasonable alternative.
Keep in mind that many people are also using these photos. If you do go this route, customize stock photography, so your images will stand out and be unique.
Here is an example of a stock photo I customized which was next to a message about website usability. I added the image of Steve Krug’s book, Don’t Make Me Think. He’s a pioneer who has inspired designers to make websites easy to use. It’s a subtle way to show people I’ve studied his method and follow his teachings.
Here are things you can do to customize images.
- Crop photos
- Add special effects
- Slap on a blur
- Augment with a shade
Seek out stock photo resources that aren’t popular. Free High-Quality Non-Stock Photo Sources You’ve Always Wanted has a list of several alternative sources for quality images.
Slide 11 – Brand Your Images
Adding your brand’s typeface and colors is an easy way to customize photos and promote your brand.
Here is a classy example of an image that incorporates branding elements well. Designer Paul Biedermann frequently accents his visuals with a logo and red bar.
Slide 12 – Free Photo Editing Tools
So how do you customize images? Well, you can use photo editing tools, and I’m going to show you a couple of free ones.
Slide 13 – PicMonkey
With this easy-to-use tool you can:
- Resize and crop images
- Adjust the brightness, highlights, shadows, and contrast of your photos
- Shift the colors of your images and sharpen them
- Add text, borders, and backgrounds
- Export images as JPEG or PNG files
It’s a browser-based tool so it can be used with any operating system. Find it at picmonkey.com
Slide 14 – GIMP
GIMP is an open source tool that’s more powerful than PicMonkey and similar to Photoshop. The tool has the same features as PicMonkey plus:
- Sophisticated photo editing including color touch up, contrast, and sharpening
- You can export images in a variety of image file formats besides JPEG and PNG
You have to download the app which is available for many operating systems. Get it at gimpusers.com/downloads
Slide 15 – Optimize Images to Improve Website Load Speed
Let’s move on to techniques that will ensure your visuals don’t slow down your site. First I want to cover some definitions, so you better understand how this works.
Slide 16 – Website Load Speed
Load speed is the length of time it takes for a visitor’s web browser to request a page from a web server, and for the content to be displayed in the browser.
This is a speed test I did when I was redesigning my website. The waterfall shows all of the elements on my home page that needed to load in a browser.
Slide 17 – Why Load Speed is Important
Load speed controls how soon visitors see your warm welcome message. For e-commerce sites, speed is a component of customer service because it influences how fast web transactions happen.
Load speed contributes to the first impression people have of your brand, so ensure you start off on the right foot by serving up web pages quickly.
There’s another reason to pay attention to website load speed; it’s a factor in Google’s search ranking algorithm. It will impact where your web pages appear in search results.
Unfortunately, many owners never know the repercussions of a slow website. It’s difficult to measure how many people left your site while it was loading, or how many folks got frustrated because they had to wait.
Slide 18 – Image Dimension Size and Image File Size
Image dimensions refer to the actual width and height of visuals. This photo is 1500 px wide by 456 pixels high.
Image file size is the length of the computer file in bytes. The file contains all the information that makes up an image such as dimensions, colors, effects, and shades. The size of this file is 421 kb.
Slide 19 – Website Load Speed Results
In my initial test, it took 1025 ms for that 421 kb image file to appear in a web browser.
Slide 20 – Image Optimization Affects Website Load Speed
This retest shows how much return you can get from squeezing down image file sizes. Optimizing that large 421 kb image reduced the time it took for the page to load by 26%. The time went from 2.74 to 1.99 seconds.
I didn’t change the dimensions of the file. I changed the file size.
Image optimization is one of the easiest ways to improve load speed because you don’t need web design or development skills to do it.
Slide 21 – Image Optimization Techniques
There are four lines of defense you can use to safeguard your website load speed from large image file sizes.
- Use the right image dimensions
- Select the right file format
- Compress image file sizes with a photo editing tool
- Use additional tools to compress large file sizes even further
Compressing files will alter photo quality. This is why you have to inspect compressed images to make sure they meet your standards.
Slide 22 – Properly Size Images
The dimensions of your image should be NO BIGGER than the largest size you’ll use on your website. Resize large images.
Slide 23- Determining Image Dimensions for WordPress Sliders
When visuals used in sliders aren’t sized correctly, they can look grainy, blurry, or get cut off. You can avoid these unpleasant effects by sizing images proportionally. And never enlarging an image that’s too small.
But sometimes it’s difficult to figure out what size the photos need to be. First, check your theme documentation because the developer may list image dimensions there. If there isn’t any documentation go to step two.
Slide 24 – View the Theme Demo Slider in Developer Tools
Chrome, Firefox, and Safari offer a handy extension called Developer Tools. By using these tools and the theme demo, you can determine what size to make your photos. Here’s how:
- Once you install the extension, go to the theme demo
- Right click on the image
- Select Inspect Element
- The information below the demo (highlighted in blue) tells you the exact size of the photo used in the demo, and that’s the size you should use
Slide 25 – Select the Right Image File Format
The first line of defense against large image files is choosing the right file format for your visuals. The two most common formats are JPEG and PNG.
JPEG image files are commonly used for photographs on the web. This format uses lossy compression which eliminates some photo information. But that loss doesn’t reduce the quality of web images very much. It does compress files quite a bit.
PNGs tend to be larger than JPEGs because they contain more information. This format uses lossless data compression which means images won’t lose quality when compressed.
PNGs are ideal for images with a transparent background, screenshots, and circular visuals.
Slide 26 – Compress Image File Sizes with Photo Editing Tools
The second line of defense is photo editing tools.
Slide 27 – How to Compress Image Files With PicMonkey
After you’ve edited your photo and you’re ready to save it, compress the file size by selecting Roger, Pierce, or Sean.
- Roger = smallest file size and lowest quality
- Sean = largest file size and best quality
You can’t compress PNG files with this tool.
Slide 28 – How to Compress JPEGs With GIMP
After editing your photo, select the option to Export Image as JPEG.
Slide the Quality scale to compress JPEGs.
Lower quality level = smaller file size.
Slide 29 – How to Compress PNGs With GIMP
When exporting PNGs, slide the Compression level to adjust file size.
Lower compression = smaller file size.
Slide 30 – How to Compress JPEGs With Photoshop
Photoshop is my favorite tool because it produces the best results and it has an efficient workflow.
After editing your photo:
- Select Save for Web & Devices
- Select JPEG as the image file type
- Slide the Quality scale to compress file size, lower quality = smaller file size
- Check out the image file size in the lower left-hand corner
- Preview the bottom image to make sure quality level is acceptable
This editor is a time saver because you can see how the selected quality changes your image, and the file size it produces. You can adjust these settings to your liking before you export the image.
Slide 31 – How to Compress PNGs With Photoshop
To compress PNGs choose either PNG-24 or 8 as your file format. PNG-8 = smaller file size, lower quality. Since PNG-8 offers fewer colors, the shade of your image will change.
Slide 32 – Additional Image File Compression Tools
Here are additional tools you can use if your photo editing tool has limited compression features, and for large photos that need further compression after they are exported from an editor.
Slide 33 – Compressor.io
Here’s a browser-based tool which everyone can use it. Just drag your image into the window and watch the file get compressed. The previous and revised file sizes are displayed. Download your image and inspect it to be sure it meets your quality. Find it at Compressor.io
Slide 34 – ImageOptim and ImageAlpha
These two applications are only available for Apple users.
After sliding your image into the window, ImageOptim will compress it and replace your file so be sure to make a copy of the original. Get ImageOptim
ImageAlpha has a color scale where you can adjust how much you compress the file. Higher number = better quality and larger file. You can preview your image at each compression setting. Get ImageAlpha
Slide 35 – FileOptimizer
The Window fans in the room will want to check out this tool. It compresses JPEG and PNGs. After uploading an image, click on the link to review your image and then download it. Get FileOptimizer
Slide 36 – More Information
For more tutorials, refer to Image Optimization: A Non-Techie’s Way to a Faster Website And More Conversions The article goes into more detail about optimization tactics. I show you samples of images after they are compressed and the resulting file sizes.