Best practices, how to prepare an image for the web or social media, handy tools and live demos.
Notes
File formats
Formats (JPEG, PNG, EPS SVG) Compression
Best pixel size
Vector/icons
(respective sizes of example artwork)
JPEG PNG SVG EPS
147KB 12KB 2KB 324KB
Raster/photos
5760 x 3840 (resolution of example photo)
(respective sizes of example artwork)
JPEG 20% JPEG 40%. JPEG 80% JPEG 100%
471KB 628KB 1.4MB 9.7MB
Image dimensions
At least 1500px on the smallest edge
Recommend 3000px
Start with the biggest image possible
Always keep the original
Naming images
Describing an image to someone over the phone
Describe the content of the image in text
Add keywords if you can, may show up in Google image search
Name before you upload
A tabby cat in a wicker basket.jpg (example file name)
Live demos
Cutting out an image – Colour correction
Social profile icon
Social post
YouTube thumbnail – Podcast cover art
Finding legal images online
Free and paid image libraries
Free – www.pexels.com
Free – pixabay.com
Free – https://www.flickr.com
Free – giphy.com
(make sure you check license is for commercial use)
£14/mo – elements.envato.com/photos/
Other paid options (Adobe Stock, 123RF, Getty images)
Media Selection tips
Show don’t tell – Product in action
Evoke emotion – Include people
Draw up a shortlist, use light boxes
Test out with previews before committing
Useful image processing apps
Free – https://pixlr.com/x/ (image editor, browser based)
Free – https://www.canva.com (image editor and layout, browser based)
£22 – https://www.pixelmator.com/pro/ (image editor, macOS only)
Free – https://imageoptim.com/mac (image compressor, macOS only)
Free + paid – https://imagify.io/optimizer/v (image compressor, browser and WordPress)
£49 – https://flyingmeat.com/retrobatch/ (multi image processor)
Free – Digital Colour Meter (colour picker, macOS only)
