wordpress and images: how to manage and use images better
TRANSCRIPT
![Page 1: WordPress and Images: How to Manage and Use Images Better](https://reader031.vdocument.in/reader031/viewer/2022013013/58f9b303760da3da068bd198/html5/thumbnails/1.jpg)
WORDPRESS AND IMAGES
How to manage and use imagesbetter
6.4.2017WPTurku
Teemu Suoranta
![Page 2: WordPress and Images: How to Manage and Use Images Better](https://reader031.vdocument.in/reader031/viewer/2022013013/58f9b303760da3da068bd198/html5/thumbnails/2.jpg)
HI, I’M TEEMU
• Web developer at Aucor
• Organizer at WPTurku
• Twitter: @teemusuoranta
• WPFI Slack: @teemusuoranta
![Page 3: WordPress and Images: How to Manage and Use Images Better](https://reader031.vdocument.in/reader031/viewer/2022013013/58f9b303760da3da068bd198/html5/thumbnails/3.jpg)
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
![Page 4: WordPress and Images: How to Manage and Use Images Better](https://reader031.vdocument.in/reader031/viewer/2022013013/58f9b303760da3da068bd198/html5/thumbnails/4.jpg)
1. IMAGE BASICS
![Page 5: WordPress and Images: How to Manage and Use Images Better](https://reader031.vdocument.in/reader031/viewer/2022013013/58f9b303760da3da068bd198/html5/thumbnails/5.jpg)
RASTER IMAGES
• “Normal images”
• JPG, PNG, GIF…
• Image is a grid of pixels
• Use for pictures
![Page 6: WordPress and Images: How to Manage and Use Images Better](https://reader031.vdocument.in/reader031/viewer/2022013013/58f9b303760da3da068bd198/html5/thumbnails/6.jpg)
VECTOR IMAGES
• Icons, graphs, maps etc
• Format: SVG
• Has instructions how to draw the image
• Scales to any size without being blurry
![Page 7: WordPress and Images: How to Manage and Use Images Better](https://reader031.vdocument.in/reader031/viewer/2022013013/58f9b303760da3da068bd198/html5/thumbnails/7.jpg)
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
![Page 8: WordPress and Images: How to Manage and Use Images Better](https://reader031.vdocument.in/reader031/viewer/2022013013/58f9b303760da3da068bd198/html5/thumbnails/8.jpg)
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
![Page 9: WordPress and Images: How to Manage and Use Images Better](https://reader031.vdocument.in/reader031/viewer/2022013013/58f9b303760da3da068bd198/html5/thumbnails/9.jpg)
FILE SIZES
• SVG < Raster < RAW
• SVG: complexity, minifying
• Raster: Dimensions and compression
• Filesize goes up exponentially as dimensions grow bigger
![Page 10: WordPress and Images: How to Manage and Use Images Better](https://reader031.vdocument.in/reader031/viewer/2022013013/58f9b303760da3da068bd198/html5/thumbnails/10.jpg)
2. UPLOADING IMAGES TO WORDPRESS
![Page 11: WordPress and Images: How to Manage and Use Images Better](https://reader031.vdocument.in/reader031/viewer/2022013013/58f9b303760da3da068bd198/html5/thumbnails/11.jpg)
HOW TO UPLOAD?
1. From “Media”
2. While writing
3. With (S)FTP
4. Import
![Page 12: WordPress and Images: How to Manage and Use Images Better](https://reader031.vdocument.in/reader031/viewer/2022013013/58f9b303760da3da068bd198/html5/thumbnails/12.jpg)
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/
![Page 13: WordPress and Images: How to Manage and Use Images Better](https://reader031.vdocument.in/reader031/viewer/2022013013/58f9b303760da3da068bd198/html5/thumbnails/13.jpg)
MEDIA LIBRARY
• All uploaded files
• Basic filters (date, media type, search)
![Page 14: WordPress and Images: How to Manage and Use Images Better](https://reader031.vdocument.in/reader031/viewer/2022013013/58f9b303760da3da068bd198/html5/thumbnails/14.jpg)
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
![Page 15: WordPress and Images: How to Manage and Use Images Better](https://reader031.vdocument.in/reader031/viewer/2022013013/58f9b303760da3da068bd198/html5/thumbnails/15.jpg)
IMAGE CROPPING
Full size2000 x 1333
Soft crop500 x 500
“Fit these bounds”
Hard crop500 x 500 “Be this size”
![Page 16: WordPress and Images: How to Manage and Use Images Better](https://reader031.vdocument.in/reader031/viewer/2022013013/58f9b303760da3da068bd198/html5/thumbnails/16.jpg)
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
![Page 17: WordPress and Images: How to Manage and Use Images Better](https://reader031.vdocument.in/reader031/viewer/2022013013/58f9b303760da3da068bd198/html5/thumbnails/17.jpg)
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
![Page 18: WordPress and Images: How to Manage and Use Images Better](https://reader031.vdocument.in/reader031/viewer/2022013013/58f9b303760da3da068bd198/html5/thumbnails/18.jpg)
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 :(
![Page 19: WordPress and Images: How to Manage and Use Images Better](https://reader031.vdocument.in/reader031/viewer/2022013013/58f9b303760da3da068bd198/html5/thumbnails/19.jpg)
SANITISING FILE NAMES
• File names are somewhat sanitised: spaces to dashes
• Scandic letters äöå are not
• Broken images in Safari
• Plugin: WP Sanitize Accented Uploads
![Page 20: WordPress and Images: How to Manage and Use Images Better](https://reader031.vdocument.in/reader031/viewer/2022013013/58f9b303760da3da068bd198/html5/thumbnails/20.jpg)
3. DISPLAYING IMAGES
![Page 21: WordPress and Images: How to Manage and Use Images Better](https://reader031.vdocument.in/reader031/viewer/2022013013/58f9b303760da3da068bd198/html5/thumbnails/21.jpg)
CAPTIONS AND ALT TEXTS
• Captions (text under theimage)
• Alternative text: contextand meaning (visible to screen readers and search engines)
• Sami Keijonen: Writing Accessible Content
![Page 22: WordPress and Images: How to Manage and Use Images Better](https://reader031.vdocument.in/reader031/viewer/2022013013/58f9b303760da3da068bd198/html5/thumbnails/22.jpg)
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
![Page 23: WordPress and Images: How to Manage and Use Images Better](https://reader031.vdocument.in/reader031/viewer/2022013013/58f9b303760da3da068bd198/html5/thumbnails/23.jpg)
GALLERIES
• Built-in support for galleries
• Choose columns, sizes, captions, links
• [gallery] shortcode
• Themes and plugins canextend and style them
![Page 24: WordPress and Images: How to Manage and Use Images Better](https://reader031.vdocument.in/reader031/viewer/2022013013/58f9b303760da3da068bd198/html5/thumbnails/24.jpg)
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
![Page 25: WordPress and Images: How to Manage and Use Images Better](https://reader031.vdocument.in/reader031/viewer/2022013013/58f9b303760da3da068bd198/html5/thumbnails/25.jpg)
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
![Page 26: WordPress and Images: How to Manage and Use Images Better](https://reader031.vdocument.in/reader031/viewer/2022013013/58f9b303760da3da068bd198/html5/thumbnails/26.jpg)
LIGHTBOXES
• Open full size image in overlay
• Turns links to image to light boxes automatically
• Plugins: WP Lightbox 2,Simple Lightbox etc
![Page 27: WordPress and Images: How to Manage and Use Images Better](https://reader031.vdocument.in/reader031/viewer/2022013013/58f9b303760da3da068bd198/html5/thumbnails/27.jpg)
VIDEO THUMBNAILS
• Plugin: Video Thumbnails
• Make featured image from embedded video
• Works with Youtube, Vimeo, Facebook, Twitch etc.
![Page 28: WordPress and Images: How to Manage and Use Images Better](https://reader031.vdocument.in/reader031/viewer/2022013013/58f9b303760da3da068bd198/html5/thumbnails/28.jpg)
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
![Page 29: WordPress and Images: How to Manage and Use Images Better](https://reader031.vdocument.in/reader031/viewer/2022013013/58f9b303760da3da068bd198/html5/thumbnails/29.jpg)
4. ORGANISING MEDIA GALLERY
![Page 30: WordPress and Images: How to Manage and Use Images Better](https://reader031.vdocument.in/reader031/viewer/2022013013/58f9b303760da3da068bd198/html5/thumbnails/30.jpg)
DEFAULT FILTERS
• By default: filter date, media type or search
• Finding images can be difficult
• Would folders solve everything?
![Page 31: WordPress and Images: How to Manage and Use Images Better](https://reader031.vdocument.in/reader031/viewer/2022013013/58f9b303760da3da068bd198/html5/thumbnails/31.jpg)
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
![Page 32: WordPress and Images: How to Manage and Use Images Better](https://reader031.vdocument.in/reader031/viewer/2022013013/58f9b303760da3da068bd198/html5/thumbnails/32.jpg)
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
![Page 33: WordPress and Images: How to Manage and Use Images Better](https://reader031.vdocument.in/reader031/viewer/2022013013/58f9b303760da3da068bd198/html5/thumbnails/33.jpg)
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
![Page 34: WordPress and Images: How to Manage and Use Images Better](https://reader031.vdocument.in/reader031/viewer/2022013013/58f9b303760da3da068bd198/html5/thumbnails/34.jpg)
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
![Page 35: WordPress and Images: How to Manage and Use Images Better](https://reader031.vdocument.in/reader031/viewer/2022013013/58f9b303760da3da068bd198/html5/thumbnails/35.jpg)
5. FASTER LOADING TIMES
![Page 36: WordPress and Images: How to Manage and Use Images Better](https://reader031.vdocument.in/reader031/viewer/2022013013/58f9b303760da3da068bd198/html5/thumbnails/36.jpg)
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.
![Page 37: WordPress and Images: How to Manage and Use Images Better](https://reader031.vdocument.in/reader031/viewer/2022013013/58f9b303760da3da068bd198/html5/thumbnails/37.jpg)
CDN
• Moving images to faster server or Content Delivery Network
• Is it worth it: ¯\_( )_/¯
• Some examples: Jetpack, Amazon Cloudfront, Google App Engine etc.
![Page 38: WordPress and Images: How to Manage and Use Images Better](https://reader031.vdocument.in/reader031/viewer/2022013013/58f9b303760da3da068bd198/html5/thumbnails/38.jpg)
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
![Page 39: WordPress and Images: How to Manage and Use Images Better](https://reader031.vdocument.in/reader031/viewer/2022013013/58f9b303760da3da068bd198/html5/thumbnails/39.jpg)
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”
![Page 40: WordPress and Images: How to Manage and Use Images Better](https://reader031.vdocument.in/reader031/viewer/2022013013/58f9b303760da3da068bd198/html5/thumbnails/40.jpg)
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
![Page 41: WordPress and Images: How to Manage and Use Images Better](https://reader031.vdocument.in/reader031/viewer/2022013013/58f9b303760da3da068bd198/html5/thumbnails/41.jpg)
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
![Page 42: WordPress and Images: How to Manage and Use Images Better](https://reader031.vdocument.in/reader031/viewer/2022013013/58f9b303760da3da068bd198/html5/thumbnails/42.jpg)
6. PROTECTING YOUR IMAGES
![Page 43: WordPress and Images: How to Manage and Use Images Better](https://reader031.vdocument.in/reader031/viewer/2022013013/58f9b303760da3da068bd198/html5/thumbnails/43.jpg)
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 ©
![Page 44: WordPress and Images: How to Manage and Use Images Better](https://reader031.vdocument.in/reader031/viewer/2022013013/58f9b303760da3da068bd198/html5/thumbnails/44.jpg)
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
![Page 45: WordPress and Images: How to Manage and Use Images Better](https://reader031.vdocument.in/reader031/viewer/2022013013/58f9b303760da3da068bd198/html5/thumbnails/45.jpg)
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)
![Page 46: WordPress and Images: How to Manage and Use Images Better](https://reader031.vdocument.in/reader031/viewer/2022013013/58f9b303760da3da068bd198/html5/thumbnails/46.jpg)
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.
![Page 47: WordPress and Images: How to Manage and Use Images Better](https://reader031.vdocument.in/reader031/viewer/2022013013/58f9b303760da3da068bd198/html5/thumbnails/47.jpg)
THAT’S ALL, FOLKS!@teemusuoranta