When done right, images are worth a thousand words and can greatly help clarify, connect, engage, attract and convert. This presentation is about how to do it right and with ease.

1. Pictures Worth a
Thousand Words
How to Make the Most of
Your WordPress Images
Gal Baras
Get Business Online Consulting

2. 1. Why images are important
2. Where to get great free images
3. How to optimise image dimensions and file size
4. How to optimise images for search (image SEO)
5. The manual method to prepare and upload images
6. How to optimise after uploading
7. How to rename image
8. The fulliautomatix method of
adding optimised images
9. How to handle existing images
What’s on the menu

3. 1. “A picture is worth a thousand words”: better
communication through images – clarity, intuition,
emotion
2. great traffic source, especially
for visual industries and visual people
Why images are so important

4. 3. Breaking the flow and impressing readers:
better/richer experience -> longer time on page +
stronger impression -> better SEO + more conversions
Demo
4. Downside: slower page
loading, especially on
mobile phones
Why images are so important (cont)

5.  pixabay.com
 www.google.com.au/advanced_image_search: specify
size and usage rights
 www.flickr.com/creativecommons/pdm-1.0/
 unsplash.com
 Watch out for copyright!
 Aim for the size you need (more on this later)
Where to get great free images

6. 1. “Size matters”: page speed -> SEO,
conversion rate
2. “srcset” and image sizes
3. Matching image sizes to layout breaks
(media queries):
mobile vs.
wide desktop
How to optimise image
dimensions and file size

8. 4. Media settings: standard thumbnail sizes
(dimensions)
5. Custom image sizes: plugins
(WooCommerce), add_image_size()
6. $content_width: maximum width for
embedded object, like images and galleries
How to optimise image
dimensions and file size (cont)

9. 1. Alternative text: accessibility
-> better user experience
-> better SEO
+ more conversions
2. Optimised file name
-> better SEO
Image SEO: How to optimise images
for search

10. 1. Considering maximum dimensions
2. Pre-optimising: crop, resize, convert
to JPG, reduce quality, rename image file
3. Choosing a file name
that contains
relevant keywords
4. Upload, enter title
and alternative text
How to prepare and upload images
manually

11.  Automatic resizing to maximum dimensions
 PNG to JPG conversion
 WEBP conversion
 Quality setting
 Removal of Exif information (local)
How to optimise images after
uploading

12.  Automatic renaming on title change
 Automatic update of posts with renamed file
 Manual renaming of previously uploaded files
 Renames all the image sizes
 No redirection -> potential missing images
How to rename image files after
uploading
Media File Renamer

13. 1. EWWW and Renamer “On”
2. Crop image, if needed
3. Upload image (into post/page)
4. Edit title to include keywords
5. Enter alternative text to describe
image, preferably with keywords
6. Save (post/page): file is renamed,
thumbnails are regenerated and
optimised
7. Use in post/page/product
The fulliautomatix method of
adding optimised images

14. How to handle existing images
1. Add from Server: reconnect images to media
library
2. Regenerate Thumbnails: run after changing
image sizes. Does not delete
3. Force Regenerate Thumbnails: clears old
thumbnails. Handle with care
4. EWWW Image Optimizer:
bulk optimise and/or
schedule optimisation

16. @media (max-width: 599px) {
.alignleft, .alighright {
width: auto;
float: none;
display: block;
margin: 0 0 1em 0;
}
}
@media (min-width: 600px) {
.alignleft, .alighright {
max-width: 55%;
}
}
Styling tips

17. Questions?

18. How to
Make the Most
of Your
Gal Baras
gal@get-business-online.com