How to manage your images more efficiently? How to plan image sizes that won't suck? Can you protect your images? How to make your images load faster?

1. WORDPRESS
AND IMAGES
How to manage
and use images
better
6.4.2017
WPTurku
Teemu Suoranta

2. HI, I’M TEEMU
• Web developer at Aucor
• Organizer at WPTurku
• Twitter: @teemusuoranta
• WPFI Slack: @teemusuoranta

3. WORDPRESS & IMAGES
1. Image basics
2. Uploading images to WordPress
3. Displaying images
4. Organising media gallery
5. Faster loading times
6. Protecting your images

4. 1. IMAGE BASICS

5. RASTER IMAGES
• “Normal images”
• JPG, PNG, GIF…
• Image is a grid of pixels
• Use for pictures

6. VECTOR IMAGES
• Icons, graphs, maps etc
• Format: SVG
• Has instructions
how to draw the image
• Scales to any size without being blurry

7. RAW IMAGES
• Modern “negative films” (a type of raster, too)
• You can set digital camera to save images as raw
• In this format you can edit the colors and lightning
better
• File size many times bigger than normal raster
images
• Save as JPG etc before displaying

8. IMAGE DATA
• The actual picture
• Filename: owl.jpg
• EXIF data:
• Camera info: ISO, shutter speed, rotation etc
• Location (See: I know where your cat lives)
• Creation time
• Copyright, credit, caption

9. FILE SIZES
• SVG < Raster < RAW
• SVG: complexity, minifying
• Raster: Dimensions and compression
• Filesize goes up exponentially as dimensions
grow bigger

10. 2. UPLOADING IMAGES
TO WORDPRESS

11. HOW TO UPLOAD?
1. From “Media”
2. While writing
3. With (S)FTP
4. Import

12. ATTACHMENT POST TYPE
• Media files (images, video, audio, documents
etc.) are saved as “attachments”
• EXIF data, description, title, alt texts are saved in
database
• The file goes by default to /wp-content/uploads/
or /wp-content/uploads/2017/4/

13. MEDIA LIBRARY
• All uploaded files
• Basic filters (date, media type, search)

14. IMAGE SIZES
• WordPress generates multiple image sizes
• Sizes are generated when image is uploaded
• Default: Large (1024x1024), Medium (300x300),
Thumbnail (150x150), Full size
• You, plugins and themes can add their own and
modify default sizes

15. IMAGE CROPPING
Full size
2000 x 1333
Soft crop
500 x 500
“Fit these bounds”
Hard crop
500 x 500
“Be this size”

16. MY “GOLDEN STANDARD”
FOR IMAGE SIZES
• Large: full width of text column and as tall as it
happens to be
• Example: 720 x 3000, soft crop
• Medium: half width of the text column and as tall
as it happens to be
• Example 360 x 1500, soft crop

17. REGENERATING
EXISTING IMAGES
• Existing images won’t change if you add or
modify sizes later
• You’ll need to regenerate sizes
• Plugin: Force Regenerate Thumbnails
• WP-CLI: wp media regenerate

18. MANUAL CROPPING
• Plugin: Manual Image Crop
• Default: crop to center
• With plugin you can decide
where to crop each size
• Custom crops reset when
regenerating image sizes :(

19. SANITISING FILE NAMES
• File names are somewhat sanitised:
spaces to dashes
• Scandic letters äöå are not
• Broken images in Safari
• Plugin: WP Sanitize Accented Uploads

20. 3. DISPLAYING IMAGES

21. CAPTIONS AND ALT TEXTS
• Captions (text under the
image)
• Alternative text: context
and meaning (visible to
screen readers and
search engines)
• Sami Keijonen: Writing Accessible Content

22. IMAGES IN CONTENT
• Images, video, audio etc can be embedded to
content
• You can choose size, alignment,
captions, link
• Upload new images or select
from media library

23. GALLERIES
• Built-in support for galleries
• Choose columns, sizes,
captions, links
• [gallery] shortcode
• Themes and plugins can
extend and style them

24. RESPONSIVE IMAGES
• Let the browser decide which image size to use
(Retina, mobile, desktop)
• WP adds alternative versions automatically with
srcset parameter in content
• There’s functions and filters to do it in theme /
plugin

25. SLIDESHOWS / CAROUSELS
• Bad for: important things, text, news, offers
Good for: additional images, galleries
• See: Should I Use Carousels
• Plugins: many (no recommendations)
Themes: many (no recommendations)
JS libraries: many

26. LIGHTBOXES
• Open full size image in overlay
• Turns links to image to
light boxes automatically
• Plugins: WP Lightbox 2,
Simple Lightbox etc

27. VIDEO THUMBNAILS
• Plugin: Video Thumbnails
• Make featured image from
embedded video
• Works with Youtube, Vimeo,
Facebook, Twitch etc.

28. AUTO POST THUMBNAIL
• Plugin: Auto Post Thumbnail
• Makes the first image from content the featured
image if it isn’t set by user
• That’s it

29. 4. ORGANISING
MEDIA GALLERY

30. DEFAULT FILTERS
• By default: filter date, media type or search
• Finding images can be difficult
• Would folders solve everything?

31. MEDIA CATEGORIES
• Plugin: Enhanced Media Library
• You can create you own taxonomies like
• Theme: people, landscape, logo
• License: our, image bank, public domain
• One image can belong to many taxonomies

32. CATEGORIES AND TAGS TO
IMAGES
• Plugin: Enhanced Media Library
• You can use the same tags and categories in
images as posts
• You can display all the images added to certain
category

33. MIME TYPES (MEDIA TYPES)
• Plugin: Enhanced Media Library
• You can control what kind of files can be
uploaded
• You can also filter by these types

34. IN THE END, IT’S UP TO YOU
• Plugins like Enhanced Media Library give you the
tools
• You need to consistently use them and figure
how to organise images
• There is no one right way

35. 5. FASTER LOADING
TIMES

36. COMPRESSION
• Running images through algorithms to make their file size smaller
• Losless (a bit) / lossy (much)
• WP does a little with “82” rate (very high quality)
• Advanced compression requires some things installed in the
server
• Compression as service: WP Smush, Imagify, TinyPNG, EWWW
Image Optimizer etc.

37. CDN
• Moving images to faster server or Content
Delivery Network
• Is it worth it: ¯_( )_/¯
• Some examples: Jetpack, Amazon Cloudfront,
Google App Engine etc.

38. LIMIT FULL SIZE IMAGE
• Users might upload crazy big images
(like 6000x6000)
• You can resize the full size image to safe space
(and loading time if it is used)
• Plugin: Imsanity

39. LAZY LOADING
• Idea: Load the image only when user scrolls to it
• Plugin: Lazy Load (and many others)
• Pros: Initial page load is fast
• Cons: Really just delays page weight, UX:
“images jump around”

40. USING SMALLER IMAGES
• Big images = lot to load
• Slow: full screen images, big slideshows etc.
• Don’t use bigger image than you need:
responsive images
• You can also use fewer images

41. SPEED ISN’T JUST FILE SIZES
• Load time is sum of many things: server
response time, database queries, caches…
• There’s no set limit how many / big images you
can use
• Optimising images won’t fix everything

42. 6. PROTECTING YOUR
IMAGES

43. STUFF THAT WON'T WORK
• Disabling “right click on images”
(Super advanced live hack demo)
• Using only “large” and “medium”: full size url can
be traced from smaller version
(image-300x300.jpg)
• Copyright symbol ©

44. ADDING WATERMARKS
• You can add your logo/name/website in image
• If image is copied, you will have credit
• You can apply watermark
to your images and
backup original versions
• Plugin: Image Watermark

45. IF I WAS PHOTOGRAPHER…
• I’d avoid uploading HQ images and have smaller
web versions available
• I’d add automatic Watermark to images
• I would add copyright info to EXIF data
(remember the caption and copyright info in
image file)

46. RESTRICTING ACCESS
• Normal uploads are accessible with correct URL: WP
can’t control the access
• Plugins can create alternative upload directories that
are only available through their control
• Selling images, showing images only to logged in
• Plugin: Easy Digital Downloads, WooComemmerce,
Download Monitor, Download Manager etc.

47. THAT’S ALL, FOLKS!
@teemusuoranta