Post on 13-Aug-2015
transcript
Mary Iannotti Digital Marketing Deva
Boulder WordPress Meetup - June 23, 2015
How to Properly Use Images to POWER Your Website
Mary Iannotti | digitalmarketingdeva.com | #boulderwp @maryi
The Power of Visuals
2
Views increased by 94% when an article contained a relevant photograph or infographic.
“”Source - Skyward Study
Mary Iannotti | digitalmarketingdeva.com | #boulderwp @maryi
Bittersweet Reality of Website Visuals
3
A poorly executed visual strategy does more harm than good.“
”Here are a few of the challenges ….
Mary Iannotti | digitalmarketingdeva.com | #boulderwp @maryi
After Adding Website Visuals …
4
What is the point behind this image?
#confused
Your audience is confused.
Image by: Steven D. Palmer
Mary Iannotti | digitalmarketingdeva.com | #boulderwp @maryi
After Adding Website Visuals …
5
You realize your website images are used all over the web.
Mary Iannotti | digitalmarketingdeva.com | #boulderwp @maryi
After Adding Website Visuals …
6
It takes too long for your website to load.
Mary Iannotti | digitalmarketingdeva.com | #boulderwp @maryi 7
There are ways to prevent these problems from happening.
Mary Iannotti | digitalmarketingdeva.com | #boulderwp @maryi 8
Step1 - Consult theme documentation.
If that doesn’t work, move on to step 2.
How to Determine Proper Image Dimensions for WordPress Sliders
Mary Iannotti | digitalmarketingdeva.com | #boulderwp @maryi
Step 2 - Use Web Browser Developer Tools
9
1. Install Developer Tools browser extension.
2. Visit theme demo.
3. Right click on image.
4. Select Inspect Element.
5. Dimensions appear below browser window.
Mary Iannotti | digitalmarketingdeva.com | #boulderwp @maryi
Selecting Great Images
10
Mary Iannotti | digitalmarketingdeva.com | #boulderwp @maryi
Good Visuals Reinforce Your Message
11
This image appeared next to a story about freshly baked pound cake.
Image by: Chef Dennis Littley
Great Visuals Make an Emotional Connection
Check out 60 Public Service Ads for more examples of creative images that make an emotional connection at goo.gl/gL7nrd
Mary Iannotti | digitalmarketingdeva.com | #boulderwp @maryi
Customize Stock Images
13
Stock Photo Customized Version
A list of non-stock photo sources can be viewed at goo.gl/jT3UCx
Mary Iannotti | digitalmarketingdeva.com | #boulderwp @maryi
Add Branding Elements to Images
14
Image by: Paul Biedermann
Great example of visual with logo and branding.
Mary Iannotti | digitalmarketingdeva.com | #boulderwp @maryi
Free Photo Editing Tools
15
Mary Iannotti | digitalmarketingdeva.com | #boulderwp @maryi
PicMonkey
16
picmonkey.com
Mary Iannotti | digitalmarketingdeva.com | #boulderwp @maryi
GIMP
17
gimpusers.com/downloads
Mary Iannotti | digitalmarketingdeva.com | #boulderwp @maryi
Optimizing Images to Improve Website Load Speed
18
Mary Iannotti | digitalmarketingdeva.com | #boulderwp @maryi
Website Load Speed
19
Length of time it
takes for a
visitor’s web
browser to
request a page
from your web
server, and for all
page elements to
appear in the
visitor’s browser.
Mary Iannotti | digitalmarketingdeva.com | #boulderwp @maryi
Website Load Speed Matters
20
It Controls How Soon Visitors See Your
Welcome Message It’s Part of Your Brand’s Customer
Service It Influences Your Brand’s
First Impression
Mary Iannotti | digitalmarketingdeva.com | #boulderwp @maryi
Image Dimensions | Image File Size
21
Image Dimensions
Image File Size
1500 pixels
465 pixels
The length of a computer file in bytes.
The size of this file is 421 kb.
Mary Iannotti | digitalmarketingdeva.com | #boulderwp @maryi
Website Load Speed Results
22
It took 1025
ms for that
421 kb image
file to appear
in a web
browser.
Mary Iannotti | digitalmarketingdeva.com | #boulderwp @maryi
Image Optimization Affects Website Load Speed
23
Reducing Image File Size Decreased Load Time by 26%! Original load time: 2.74 seconds. Load time after optimization: 1.99 seconds.
Mary Iannotti | digitalmarketingdeva.com | #boulderwp @maryi
Image Optimization Techniques
24
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 - JPEG or PNG. • Compressing image file size with a photo editing tool. • Using additional tools to compress large file sizes even
further.
Mary Iannotti | digitalmarketingdeva.com | #boulderwp @maryi
Selecting the Right Image File Type
25
JPEG • Lossy data compression. • Generally smaller file
sizes than PNG. • Commonly used for
photographs.
PNG • Lossless data
compression. • Generally larger files
sizes than JPEG. • Ideal for transparent
backgrounds, circular images and screenshots.
Mary Iannotti | digitalmarketingdeva.com | #boulderwp @maryi
Use Photo Editing Tools to Compress Image File Sizes
26
Mary Iannotti | digitalmarketingdeva.com | #boulderwp @maryi
Compressing JPEG Files in PicMonkey
27
Compress file size by selecting Roger, Pierce or Sean. Roger = smallest file size and lowest quality. You can’t compress PNG files with this tool.
Mary Iannotti | digitalmarketingdeva.com | #boulderwp @maryi
Compressing JPEGs in GIMP
28
Slide the Quality scale to compress JPEGs. Lower quality = smaller file size.
Mary Iannotti | digitalmarketingdeva.com | #boulderwp @maryi
Compressing PNGs in GIMP
29
Slide Compression level to adjust file size. Lower compression level = smaller file size.
Mary Iannotti | digitalmarketingdeva.com | #boulderwp @maryi
Compressing JPEGs in Photoshop
30
Slide the Quality scale to compress file size, lower quality = smaller file size. Preview image to make sure quality level is acceptable.
Mary Iannotti | digitalmarketingdeva.com | #boulderwp @maryi
Compressing PNGs in Photoshop
31
Choose between PNG-24 and 8 to compress file size.
PNG-8 - smaller file size, lower quality.
Mary Iannotti | digitalmarketingdeva.com | #boulderwp @maryi
Additional Image File Compression Tools
32
Mary Iannotti | digitalmarketingdeva.com | #boulderwp @maryi
Compressor.io
33
Browser-based file compression tool. The bomb for compressing PNG files. Find it at compressor.io/compress
Mary Iannotti | digitalmarketingdeva.com | #boulderwp @maryi
ImageOptim and ImageAlpha
34
Only for Apple
ImageOptimCompresses JPEGs
ImageAlphaCompresses PNGs
imageoptim.com
pngmini.com
Mary Iannotti | digitalmarketingdeva.com | #boulderwp @maryi
FileOptimizer
35
Find it at goo.gl/10jpoE
Only for Windows
Mary Iannotti | digitalmarketingdeva.com | #boulderwp @maryi
More Information
36
For a more in-depth study, refer to this article at goo.gl/RrY5wR
Stay in Touch
37
Mary Iannotti
digitalmarketingdeva.com
Twitter: @maryi