7.2. Resources for images#
Using HTML to lazy-load images
Extra more in-depth info on adding height and width attributes to <img>, lazy loading, and using the new aspect-ratio property:
Smashing Magazine’s Setting Height and Width on Images is Important Again
7.2.1. Free stock photos#
7.2.2. Image editing#
Be Funky - simple online image resizing. It won’t allow you to adjust compression and optimize images, but the resizing ability is fine for this class.
Compressor.io - online image compressor
Photoscape - (Windows) an older program that I still use. I don’t like Photoscape X, so avoid that version, unless you are a Mac user and want to try it out.
Gimp - (free) open source alternative to Adobe Photoshop
remove.bg - remove image background - because cool
7.2.3. SVG#
A Practical Guide to SVGs on the Web - good introductory guide to SVGs
SVG Tutorial | MDN Web Docs - lots of code samples
List of SVG filters from MDN Web Docs
Finessing `feColorMatrix` - a good resource for understanding how to create color filters
SVGOMG - SVGO’s Missing GUI. An online version of SVGO , tool for optimizing SVGs, particularly those created by graphics programs such as Adobe Illustrator
How to code SVG icons by hand - pro tip: set the viewbox to 120,120 so you can use whole numbers instead of decimals like in the tutorial