Module 3 Day 4: Adding & Editing Images
Tools to Download:
Fireshot & Colorzilla (for Firefox browser)
Lightshot & Colorzilla (for Chrome)
AwesomeScreenshot (for Chrome)
Guidelines when uploading images to the web:
* Try to keep the image size smaller than 200kb (less than 100kb is ideal)
* .png’s & .gif’s can have transparent backgrounds, .jpg’s can not
* .png files are usually the best quality
* Never use an image larger than 500kb on a website
* Load times matter! Amazon has calculated that they lose $1B for every second of load time over a certain amount (3 seconds, I think)
* Reduce high resolution files to 72 dpi for use on web. 300dpi and higher are only for printing and enlarging files.
* Image Alt tags are your secret weapon. Use them. Add your main keyword phrase and secondary keyword phrases to every image in the alt tags.
* Name the images based on the page they will go on (example: images to be used on the home page of my Idaho Falls Web site would be saved as “Idaho-falls-web-design.jpg”, “Idaho-falls-web-design-2.jpg”, etc.)
Where To Find Stock Images:
* Stock.adobe.com (if you have Adobe Creative Cloud)
* Google images
* Weebly’s image collection (instructions in video)
* Font Awesome icons
* Play with Weebly until you feel comfortable with how the tools work.
* Add all your text, images, pages to the site.
* If you get stumped or you feel unsure about a design, ask for feedback in the FB group
* Finish your website and then show it off in the In-Demand Skills Facebook Group!
Download Module 3 Day 4 Lesson PDF