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 convince 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 website content and entice more eyes to view it.
How to Use Images to Power Your Website
These slides cover:
- Properly sizing images for WordPress sliders.
- How to select good website visuals.
- Image optimization techniques which improve website speed.
Slide 2 – Power of Visuals
Folks love visuals which is proven by how many shares images get on social networks and how many more views photos generate on websites. 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 properly.
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 begin to see your website images on other people’s websites, blogs and social posts. This common dilemma happens when using stock images.
Slide 6 – Visuals Impede Your Website Load Speed
After adding photos you find web pages are taking a long time to load in a web browser.
Slide 7 – These Problems Can be Prevented
I’m going to share techniques that will help you avoid these issues.
Slide 8 – Determining Image Dimensions for WordPress Sliders
When visuals used in sliders aren’t sized properly they can look grainy, blurry or get cut off. These unpleasant effects can be avoided if you size images properly.
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 that doesn’t work, ask in the support forum.
What happens if there isn’t any documentation or support forum? Go on to step two.
Slide 9 – 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 image used in the demo and that’s the size you should use.
Slide 10 – Selecting Great Website Visuals
Now I want to show you ways to select images that will entice people to read your content and keep your website looking unique.
Slide 11 – Good Visuals Reinforce Your Message
Choose images that are associated with the stories and messages you communicate on your website. Food bloggers are good at this. By posting an image of the pound cake he’s writing about, food blogger Chef Dennis entices folks to read his content.
Slide 12 – Great Visuals Make an Emotional Connection
Really good website visuals form a connection with your visitors and that’s what the World Wildlife Fund managed to do with this image.
How do you do get a high caliber image?
Find inspirational visual resources and study images that touch you. To spark your inspiration, visit 60 Public Service ads The article has more examples of creative images which grab people’s attention.
Consider asking local photographers if you can pay to use their images on your website. That’s what I did. If you’re a good photographer dive into your collection to find visuals.
Another option is to hire a good designer to help you. View the designer’s portfolio to make sure their style is a good fit for your audience.
Slide 13 – Customize Stock Images
Websites can have a lot of images, especially those with a blog. So, you may not have the resources to purchase all photos from a photographer. 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.
This is an example of a stock photo I customized on my site which is 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 sure websites are easy to use. It’s a subtle way to show people I’ve study his method and follow his teachings.
A few ways to customize photos include:
- Adding borders.
- Changing the shape.
- Adding special effects.
- Adding a blur effect.
- Adding 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 good images.
Slide 14 – Brand Your Images
Adding branding elements is a great way to customize photos and promote your brand. Elements include your brand’s typefaces and colors.
This is a nice example of an image that incorporates branding elements well. The logo and red bar are frequently found in designer Paul Biedermann’s visuals.
Slide 15 – Free Photo editing Tools
So how do you add all these customizations? Well, you can use photo editing tools and I’m going to show you a couple of free ones.
Slide 16 – PicMonkey
With this easy-to-use tool you can:
- Resize and crop images.
- Adjust the brightness, highlights, shadows and contrast of your photos.
- Adjust 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 17 – GIMP
GIMP is an open source tool that’s more powerful than PicMonkey and similar to Photoshop. With this tool you can:
- Resize and crop images.
- Make sophisticated photo edits including color, contrast and sharpening.
- Add text, borders and backgrounds.
- Export images in a variety of image file types including JPEG and PNG.
You have to download this application and it’s available for many operating systems. Get it at gimpusers.com/downloads
Slide 18 – Optimizing Images to Improve Website Load Speed
Let’s move on to techniques that will ensure your visuals don’t slow down your website. First I want to cover some definitions so you better understand how this works.
Slide 19 – Website Load Speed
Website load speed is based on 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 website speed test I did when I was redesigning my website. The Waterfall shows you all elements that loaded in order for my home page to display in a browser.
Slide 20 – Why Load Speed is Important
Load speed controls how soon visitors see your warm welcome message. It influences how fast transactions occur on your website so it’s part of your brand’s customer service. Your site provides service when people buy things, subscribe to your newsletter or fill out your contact form.
Load speed contributes to the first impression people have of your brand, so ensure you start off on the right foot by serving up speedy web pages.
There’s another reason to pay attention to website load speed; it’s a factor in Google’s search ranking algorithm so 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 21 – Image Dimension Size Verses 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 22 – 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 23 – 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 initial time of 2.74 seconds was reduced 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 it doesn’t require knowledge about your hosting environment or software coding skills.
Slide 24 – Image Optimization Tools
There are three lines of defense you can use to safeguard your website load speed from large image file sizes.
- Selecting the right file type.
- Compressing image file size with a photo editing tool.
- Using additional tools to compress large file sizes even further.
Compressing files will alter photo quality. It’s important to always inspect compressed images to make sure they meet your standards. Never sacrifice quality for a smaller file size.
Slide 25 – Selecting the Right Image File Type
The first line of defense against large image files is choosing the right file type for your visuals. The two most popular types for websites are JPEG and PNG.
JPEG image files are commonly used for photographs on the web. This file type uses lossy compression which eliminates some photo information. But that loss doesn’t reduce the quality of web images very much. It does reduce the size of image files quite a bit.
PNGs tend to be larger than JPEGs because they contain more information. This file 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 – Compressing Image File Sizes with Photo Editing Tools
The second line of defense utilizes photo editing tools.
Slide 27 – Compressing 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 – Compressing JPEGs in 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 – Compressing PNGs in GIMP
When exporting PNGs, slide the Compression level to adjust file size.
Lower compression = smaller file size.
Slide 30 – Compressing JPEGs in Photoshop
Since there are a lot of Photoshop fans in the room, I’ll show you how to use that tool to compress images. This is my favorite tool because it produces the best results and saves time.
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 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 – Compressing PNGs in 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 less colors, the shade of your image may appear different.
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
This is a browser-based tool so 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 32 – 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. Download 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 as you compress it. Download ImageAlpha
Slide 32 – FileOptimizer
The Window fans in the room might 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. Download FileOptimizer
Slide 36 – More Information
For a more in-depth study, refer to Image Optimization Improves Website Load Speed Doubling as a case study and tutorial, the article goes into more detail about optimization tactics. I show you samples of images after they are compressed and the resulting file sizes.
Subscribe to my Digital News for optimization tactics that will make your website sell better for you. No more cold calls forever! Copywriting, conversion and design tips… all free.
Sign up now and get my guide –How to Get More Home Page Visitors into Your Sales Funnel.