properly use images to power your website

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

http://digitalmarketingdeva.com

http://www.skyword.com/contentstandard/enterprise-marketing/skyword-study-add-images-to-improve-content-performance/


Bittersweet Reality of Website Visuals

3

A poorly executed visual strategy does more harm than good.“

”Here are a few of the challenges ….



After Adding Website Visuals …

4

What is the point behind this image?

#confused

Your audience is confused.

Image by: Steven D. Palmer


http://steven4554.deviantart.com/art/Confused-Lisa-351092400



5

You realize your website images are used all over the web.




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



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.



Selecting Great Images

10



Good Visuals Reinforce Your Message

11

This image appeared next to a story about freshly baked pound cake.

Image by: Chef Dennis Littley


http://www.askchefdennis.com/2015/06/tangerine-curd-recipe/

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

http://digitalsynopsis.com/inspiration/60-public-service-announcements-social-issue-ads/


Customize Stock Images

13

Stock Photo Customized Version

A list of non-stock photo sources can be viewed at goo.gl/jT3UCx


https://goo.gl/jT3UCx


Add Branding Elements to Images

14

Image by: Paul Biedermann

Great example of visual with logo and branding.



Free Photo Editing Tools

15



PicMonkey

16

picmonkey.com


http://picmonkey.com


GIMP

17

gimpusers.com/downloads


http://gimpusers.com/downloads


Optimizing Images to Improve Website Load Speed

18



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.



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



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.



Website Load Speed Results

22

It took 1025

ms for that

421 kb image

file to appear

in a web

browser.



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.



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.



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.



Use Photo Editing Tools to Compress Image File Sizes

26



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.



Compressing JPEGs in GIMP

28

Slide the Quality scale to compress JPEGs. Lower quality = smaller file size.



Compressing PNGs in GIMP

29

Slide Compression level to adjust file size. Lower compression level = smaller file size.



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.



Compressing PNGs in Photoshop

31

Choose between PNG-24 and 8 to compress file size.

PNG-8 - smaller file size, lower quality.



Additional Image File Compression Tools

32



Compressor.io

33

Browser-based file compression tool. The bomb for compressing PNG files. Find it at compressor.io/compress


https://compressor.io/compress


ImageOptim and ImageAlpha

34

Only for Apple

ImageOptimCompresses JPEGs

ImageAlphaCompresses PNGs

imageoptim.com

pngmini.com


http://imageoptim.com

http://imageoptim.com


FileOptimizer

35

Find it at goo.gl/10jpoE

Only for Windows


http://goo.gl/10jpoE


More Information

36

For a more in-depth study, refer to this article at goo.gl/RrY5wR


http://goo.gl/RrY5wR

Stay in Touch

37

Mary Iannotti

digitalmarketingdeva.com

Twitter: @maryi


properly use images to power your website

Marketing

maryi step

maryi gimp

maryi picmonkey

maryi good visuals

website images

maryi free photo editing

stock images

great visuals