Contents

Assignment: Image Processing and Optimization

Assignment: Image Processing and Optimization

Description

  1. Remember from Unit 3 that all sites we build must be accessible

    1. Make sure your site is easy to navigate using the “Tab” key.

    2. Make sure your site is easy to understand using a screen reader.

  2. Make sure you’re following copyright laws with all images used on your site:

    1. Are you giving appropriate credit?

    2. Are you using royalty-free images?

    3. Are you using images you can modify? (You’ll be modifying most images for this lab)

  3. Use Pixlr (or photo editing software of choice) to do the following:

    1. Create a banner image for your site

    2. Create a logo for your site

    3. Choose an image on your site and remove the background. Save it using the appropriate format for it to have a transparent background.

  4. Add your banner, logo, and transparent image to your site.

  5. Time how long it takes for your each page to load on your site (write it down).

    1. Use “Inspect element” and click on “Network” to see how large each file is, how long it took for each element to load, and how long it took for your entire site to load.

    2. IMPORTANT: Test your loading time in a NEW browser AND in Incognito/Private Browsing mode

  6. Optimize all the images on your site so each page on your site loads in no more than .3 seconds (300 milliseconds).

    1. Be careful to balance quality and size– you don’t want blurry images on your site!

    2. IMPORTANT: Test your loading time in a NEW browser AND in Incognito/Private Browsing mode

  7. Upload all necessary files to cPanel and make sure all the images and links work, and that your site looks the way you expect it to.

    1. Create a text post on Tumblr with the following:

    2. Your custom homepage (using your URI-given domain)

    3. Answers to the following questions:

      1. How many, if any, images did you have to replace due to not following copyright laws?

      2. What, if anything, did you have to change to make your site accessible?

      3. What tools (e.g., eraser, magic wand, crop, etc.) did you use to remove the background of the image you selected?

      4. How did you optimize your images?

      5. How long did it take your site to load pre and post optimization?

  8. Define, in your own words, the following terms in your dictionary:

    1. TIFF

    2. JPEG

    3. PNG

    4. GIF

    5. RAW

  9. Link your post as Lab 8 on your Labs page

Overview: What to submit

  1. Link to your Lab 8 post

Requirements

  1. Post is linked on Labs page

  2. Post includes link to site

  3. Post includes answers to all (5) questions

  4. Each page on site loads in .3 seconds or less

  5. Site is accessible (tab key navigation and screen reader)

  6. Site includes custom-made banner, logo, and transparent image

  7. All image sources are somewhere on site

  8. All links work

  9. Correct HTML and CSS syntax

  10. No console errors or warnings

  11. Portfolio has all (5) terms defined in dictionary

previous

Scheme: Specifications Grading in Web Development

next

Syllabus: Skill Acquisition Rubric