WORDPRESS AND IMAGES

How to manage and use imagesbetter

6.4.2017WPTurku

Teemu Suoranta

HI, I’M TEEMU

• Web developer at Aucor

• Organizer at WPTurku

• Twitter: @teemusuoranta

• WPFI Slack: @teemusuoranta

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

1. IMAGE BASICS

RASTER IMAGES

• “Normal images”

• JPG, PNG, GIF…

• Image is a grid of pixels

• Use for pictures

VECTOR IMAGES

• Icons, graphs, maps etc

• Format: SVG

• Has instructions how to draw the image

• Scales to any size without being blurry

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

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

FILE SIZES

• SVG < Raster < RAW

• SVG: complexity, minifying

• Raster: Dimensions and compression

• Filesize goes up exponentially as dimensions grow bigger

2. UPLOADING IMAGES TO WORDPRESS

HOW TO UPLOAD?

1. From “Media”

2. While writing

3. With (S)FTP

4. Import

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/

MEDIA LIBRARY

• All uploaded files

• Basic filters (date, media type, search)

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

IMAGE CROPPING

Full size2000 x 1333

Soft crop500 x 500

“Fit these bounds”

Hard crop500 x 500 “Be this size”

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

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

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 :(

SANITISING FILE NAMES

• File names are somewhat sanitised: spaces to dashes

• Scandic letters äöå are not

• Broken images in Safari

• Plugin: WP Sanitize Accented Uploads

3. DISPLAYING IMAGES

CAPTIONS AND ALT TEXTS

• Captions (text under theimage)

• Alternative text: contextand meaning (visible to screen readers and search engines)

• Sami Keijonen: Writing Accessible Content

IMAGES IN CONTENT

• Images, video, audio etc can be embedded to content

• You can choose size, alignment,captions, link

• Upload new images or selectfrom media library

GALLERIES

• Built-in support for galleries

• Choose columns, sizes, captions, links

• [gallery] shortcode

• Themes and plugins canextend and style them

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

SLIDESHOWS / CAROUSELS

• Bad for: important things, text, news, offersGood for: additional images, galleries

• See: Should I Use Carousels

• Plugins: many (no recommendations)Themes: many (no recommendations)JS libraries: many

LIGHTBOXES

• Open full size image in overlay

• Turns links to image to light boxes automatically

• Plugins: WP Lightbox 2,Simple Lightbox etc

VIDEO THUMBNAILS

• Plugin: Video Thumbnails

• Make featured image from embedded video

• Works with Youtube, Vimeo, Facebook, Twitch etc.

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

4. ORGANISING MEDIA GALLERY

DEFAULT FILTERS

• By default: filter date, media type or search

• Finding images can be difficult

• Would folders solve everything?

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

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

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

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

5. FASTER LOADING TIMES

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.

CDN

• Moving images to faster server or Content Delivery Network

• Is it worth it: ¯\_( )_/¯

• Some examples: Jetpack, Amazon Cloudfront, Google App Engine etc.

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

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”

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

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

6. PROTECTING YOUR IMAGES

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 ©

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

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)

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.

THAT’S ALL, FOLKS!@teemusuoranta