This document provides guidance on best practices for using images on the web and social media. It discusses the differences between raster and vector images, recommends file formats like JPG, PNG and GIF for different uses, and stresses the importance of optimizing image file sizes for faster loading. The document also offers tips on image naming, alt text, resizing and quality checks. It provides links to free stock image sites and services for compressing image files. The overall message is that images should be high quality, optimized for size and format, and properly named and described to enhance user experience on websites and social media.

2. The basics of web images
Laying the foundation
Best practices
Dos and don’ts
Social media specifics
Size matters
1
2
3
4
Free images on the web
What’s free, what’s not?

3. Not all
types are
equal
Know YOUR FORMATS

4. RASTER
versus
VECTOR

6. Vector
Raster

7. Logos should be done as vectors

8. Rasters have pixels

9. Photographs are rasters

11. 3 MAIN
RASTERs JPG
GIF
PNG

12. Think photographs

13. Think very simple graphics

14. (ANIMATED)

15. Think quality & transparency

16. Let‘s do
BETTER

17. LET’S START WITH
OPTIMIZING
Don’t give people an excuse to not see it

18. HAVING LARGE IMAGES
DOESN’T MEAN THAT
YOU NEED TO HAVE
LARGE IMAGE FILE
SIZES

19. WHY BOTHER?
1. Faster loading
2. Google likes you more
3. Patrons like you more
4. Emails become less spammy

20. https://compressor.io/

21. • Kraken (https://kraken.io/web-interface)
• JPEGmini (http://www.jpegmini.com/)
• Image Optimizer
(http://www.imageoptimizer.net/pages/home.aspx)
• Compress Now
(http://compressnow.com/)
Want more?

22. How you name images matters

23. Alt tags matter to you, too

24. Resizing: be careful

25. Size matters

26. QUALITY COUNTSGOOD INTENTIONS DON’T

27. Is this your library’s brand?

28. QUALITY CHECKLIST
1. High resolution?
2. Clear text?
3. Look professionally done?

32. TOO MUCH TEXT
A common problem

36. Trends matter

37. SOCIAL MEDIA
IMAGES ARE OFTEN EVERYTHING

38. Image from http://blog.hubspot.com/marketing/visual-content-
social-media-mistakes#sm.001c8uico19becvmvwq26yfpnebpt
Format for the platform

39. Uploading oversized images: caution!

40. https://makeawebsitehub.com/social-media-
image-sizes-cheat-sheet/

42. Squares
1080x1080

43. GO HORIZONTAL

44. http://mashable.com/2015/02/24/twitter-
twitshot-image/#YRPvwh04gkqh

45. FREE
IMAGES

46. Yes, libraries can get intolegal trouble

47. Google imagesearch is not always your friend

49. Free stock art
• Unsplash (https://unsplash.com/)
• Pixabay (https://pixabay.com/)
• Pexels (https://www.pexels.com/)
• StockSnap (https://stocksnap.io/)
• Burst (https://burst.shopify.com/)

50. FREE PNGS with transparentbackgrounds
• PNG Play (http://www.pngplay.com/)
• Icons8
(https://photos.icons8.com/transparent)
• PNGimg (http://pngimg.com/)

51. Remember…
The Big take-aways
Thank you!
Laura Solomon
laura@designforthelittleguy.com
@laurasolomon
www.meanlaura.com