{"id":112,"date":"2020-08-01T20:08:23","date_gmt":"2020-08-02T00:08:23","guid":{"rendered":"https:\/\/pressbooks.library.ryerson.ca\/webdesignlab\/chapter\/tutorial-6-%e2%80%a2-image-optimization\/"},"modified":"2021-02-14T19:09:23","modified_gmt":"2021-02-15T00:09:23","slug":"tutorial-5-image-optimization","status":"publish","type":"chapter","link":"https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/chapter\/tutorial-5-image-optimization\/","title":{"raw":"Tutorial 5 \u2022 Image Optimization","rendered":"Tutorial 5 \u2022 Image Optimization"},"content":{"raw":"Bitmapped images are use-specific, meaning the resolution has to be set for the intended use and reproduction size, so as to avoid \u201cthe jaggies,\u201d or pixelization, and also to avoid excessively large file size, which slows output for print and download time on the web.\r\n\r\nA good place to start thinking about web images is whether the image should occupy a full page, half page, or quarter page. Resolution for web should be 72 ppi. Higher resolution does not produce finer detail unless the image is to be enlarged, e.g., if a smaller image is linked to a larger view.\r\n\r\nTransparency is often useful for web images. GIF and PNG file types support transparency, but not JPEG.\r\n\r\n \r\n\r\n[caption id=\"\" align=\"aligncenter\" width=\"512\"]\"image\" Photoshop\u2019s Camera Raw open dialog box.[\/caption]\r\n\r\n
\r\n

Let\u2019s Optimize Some Images<\/h2>\r\n

DNG Images<\/h4>\r\n
    \r\n \t
  1. In Photoshop, simultaneously open the three .DNG \u201cdigital negative\u201d images, which will open as Camera Raw.<\/li>\r\n \t
  2. Note that the images are a bracketed exposure series of \u00b1\u2153 exposure value (EV). When making an exposure, bracketing only takes a few extra seconds and enables you to compare exposures later on a large screen.<\/li>\r\n \t
  3. Note that the three images can be identically cropped if they are all selected when the cropped area is drawn.<\/li>\r\n \t
  4. Final image size and resolution can be set in the blue link below the preview.<\/li>\r\n \t
  5. Select all 3 images, flip 180\u00b0, and crop to a square 1024\u00d71024 px at 72 ppi, and open.<\/li>\r\n \t
  6. Choose File > Save for Web > JPEG. Note that the dialog box includes settings for quality and size, and also displays the final file size and expected download time at different network speeds.<\/li>\r\n<\/ol>\r\n[caption id=\"\" align=\"aligncenter\" width=\"512\"]\"image\" Photoshop\u2019s Save for Web dialog box.[\/caption]\r\n

    PNG Image<\/h4>\r\n
      \r\n \t
    1. Open the image \u201c4_BlackFlowers.jpg.\u201d<\/li>\r\n \t
    2. With the Circular Selection Tool, hold SHIFT+OPT and draw a circle around the box, starting from the centre. Reposition if necessary.<\/li>\r\n \t
    3. In the selection, right-click or CNTRL-click \u201cNew Layer from Cut.\u201d This places the box on a new layer, leaving the Background empty.<\/li>\r\n \t
    4. In the Layers palette (Window > Layers), delete the Background layer.<\/li>\r\n \t
    5. File > Save for Web, select PNG-24 format, and check Transparency. The background should show as a checkered pattern.<\/li>\r\n<\/ol>\r\n\r\n\r\n\r\n\r\n
      \"\"<\/a><\/td>\r\n\"\"<\/a><\/td>\r\n<\/tr>\r\n
      JPEG image without transparency<\/em><\/td>\r\nPNG-24 image with transparency<\/em><\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n

      Place in Web Page<\/h4>\r\n
        \r\n \t
      1. Place both images into a web page styled with body {background: gray;}.<\/li>\r\n \t
      2. Note that the background of the PNG image is transparent while that of the JPG is not.<\/li>\r\n<\/ol>\r\n<\/div>\r\n

        Images as Links<\/h2>\r\nImages can be linked either to larger versions of themselves or to other HTML documents. Simply surround the image with a link tag (<a href=\"filename\">).\r\n\r\nUnlike a text link, with its default blue color and underline, an image link will not look any different from an unlinked image. However the pseudo-class \u201c:hover\u201d can be used to style the linked image differently when the mouse is over it. Some common styles include putting a border (e.g., \u201cborder: 1px solid grey;\u201d) or drop-shadow (\u201cbox-shadow: 2px 3px 6px grey;\u201d) around the image, reducing the opacity (\u201copacity: 0.50;\u201d), expanding the image slightly (\u201ctransform: scale(1.05);\u201d) or moving the image slightly (\u201ctransform: translateY(5px);\u201d). All of these effects can be faded in by adding the \u201ctransition\u201d style, specifying the style to be transitioned and the time in seconds, e.g., \u201ctransition: scale 0.5s;\u201d.\r\n\r\n \r\n\r\n[caption id=\"attachment_331\" align=\"aligncenter\" width=\"768\"]\"Linked<\/a> Image used as a link to a larger version of itself. The image is styled with a \u201chover\u201d tag so a drop-shadow appears when the mouse is over the image.[\/caption]\r\n

        Captioning with the Figure and Figcaption Tags<\/h2>\r\nUsing the <figure> tag, images can be grouped with a caption written in the <figcaption> tag. All three tags can be styled for size, positioning, margin and padding, and text wrap (float).\r\n\r\n<figure>\r\n<img src=\"image.jpg\" \/>\r\n<figcaption>Figure 1.<\/figcaption>\r\n<\/figure>\r\n\r\n \r\n\r\n[caption id=\"attachment_316\" align=\"aligncenter\" width=\"768\"]\"Figure<\/a> The figure tag used to group an image with a caption.[\/caption]\r\n

        Grouping Photos with Divs or Tables<\/h2>\r\nTwo or more photos can be grouped together with <div> or <table> tags. The div width should be set to equal the sum of the image widths, including an allowance for any borders or margin around the images. Once grouped, the div can be styled by centering and placing spacing around it. A table can be constructed with one photo per cell (<td>) to create horizontal and vertical matrixes of images.\r\n\r\n \r\n\r\n[caption id=\"attachment_321\" align=\"aligncenter\" width=\"768\"]\"Grouping<\/a> A div or division with id \u201cimage-gallery\u201d is used to group 3 photos in a row and center them in the page.[\/caption]\r\n

        Arranging Photos with the Flexible Box and Grid Layouts<\/h2>\r\nThe relatively new \u201cflexible box\u201d and \u201cgrid\u201d layouts are useful for arranging multiple images on web pages.\r\n\r\nWhen a div is styled with \u201cdisplay: flex;\u201d and accompanying \u201calign-items\u201d and related styles, the items in the div will arrange themselves on the page. Additional items can easily be added, such as more photos or documents.\r\n\r\nSimilarly, the \u201cgrid\u201d layout can be used to specify columns, rows, or grid regions on the page.\r\n\r\n \r\n\r\n[caption id=\"attachment_324\" align=\"aligncenter\" width=\"768\"]\"CSS<\/a> The grid layout is helpful for arranging images or other tags. In this case, the style \"display: grid;\" creates the grid, which is defined with 3 columns and two rows.[\/caption]\r\n\r\n \r\n\r\n[caption id=\"attachment_326\" align=\"aligncenter\" width=\"768\"]\"Flexible<\/a> The flexible box layout, style \"display: flex;\" is helpful in arranging images and other tags on the screen.[\/caption]","rendered":"

        Bitmapped images are use-specific, meaning the resolution has to be set for the intended use and reproduction size, so as to avoid \u201cthe jaggies,\u201d or pixelization, and also to avoid excessively large file size, which slows output for print and download time on the web.<\/p>\n

        A good place to start thinking about web images is whether the image should occupy a full page, half page, or quarter page. Resolution for web should be 72 ppi. Higher resolution does not produce finer detail unless the image is to be enlarged, e.g., if a smaller image is linked to a larger view.<\/p>\n

        Transparency is often useful for web images. GIF and PNG file types support transparency, but not JPEG.<\/p>\n

         <\/p>\n

        \"image\"
        Photoshop\u2019s Camera Raw open dialog box.<\/figcaption><\/figure>\n
        \n

        Let\u2019s Optimize Some Images<\/h2>\n

        DNG Images<\/h4>\n
          \n
        1. In Photoshop, simultaneously open the three .DNG \u201cdigital negative\u201d images, which will open as Camera Raw.<\/li>\n
        2. Note that the images are a bracketed exposure series of \u00b1\u2153 exposure value (EV). When making an exposure, bracketing only takes a few extra seconds and enables you to compare exposures later on a large screen.<\/li>\n
        3. Note that the three images can be identically cropped if they are all selected when the cropped area is drawn.<\/li>\n
        4. Final image size and resolution can be set in the blue link below the preview.<\/li>\n
        5. Select all 3 images, flip 180\u00b0, and crop to a square 1024\u00d71024 px at 72 ppi, and open.<\/li>\n
        6. Choose File > Save for Web > JPEG. Note that the dialog box includes settings for quality and size, and also displays the final file size and expected download time at different network speeds.<\/li>\n<\/ol>\n
          \"image\"
          Photoshop\u2019s Save for Web dialog box.<\/figcaption><\/figure>\n

          PNG Image<\/h4>\n
            \n
          1. Open the image \u201c4_BlackFlowers.jpg.\u201d<\/li>\n
          2. With the Circular Selection Tool, hold SHIFT+OPT and draw a circle around the box, starting from the centre. Reposition if necessary.<\/li>\n
          3. In the selection, right-click or CNTRL-click \u201cNew Layer from Cut.\u201d This places the box on a new layer, leaving the Background empty.<\/li>\n
          4. In the Layers palette (Window > Layers), delete the Background layer.<\/li>\n
          5. File > Save for Web, select PNG-24 format, and check Transparency. The background should show as a checkered pattern.<\/li>\n<\/ol>\n\n\n\n\n
            \"\"<\/a><\/td>\n\"\"<\/a><\/td>\n<\/tr>\n
            JPEG image without transparency<\/em><\/td>\nPNG-24 image with transparency<\/em><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

            Place in Web Page<\/h4>\n
              \n
            1. Place both images into a web page styled with body {background: gray;}.<\/li>\n
            2. Note that the background of the PNG image is transparent while that of the JPG is not.<\/li>\n<\/ol>\n<\/div>\n

              Images as Links<\/h2>\n

              Images can be linked either to larger versions of themselves or to other HTML documents. Simply surround the image with a link tag (<a href=”filename”>).<\/p>\n

              Unlike a text link, with its default blue color and underline, an image link will not look any different from an unlinked image. However the pseudo-class \u201c:hover\u201d can be used to style the linked image differently when the mouse is over it. Some common styles include putting a border (e.g., \u201cborder: 1px solid grey;\u201d) or drop-shadow (\u201cbox-shadow: 2px 3px 6px grey;\u201d) around the image, reducing the opacity (\u201copacity: 0.50;\u201d), expanding the image slightly (\u201ctransform: scale(1.05);\u201d) or moving the image slightly (\u201ctransform: translateY(5px);\u201d). All of these effects can be faded in by adding the \u201ctransition\u201d style, specifying the style to be transitioned and the time in seconds, e.g., \u201ctransition: scale 0.5s;\u201d.<\/p>\n

               <\/p>\n

              \"Linked<\/a>
              Image used as a link to a larger version of itself. The image is styled with a \u201chover\u201d tag so a drop-shadow appears when the mouse is over the image.<\/figcaption><\/figure>\n

              Captioning with the Figure and Figcaption Tags<\/h2>\n

              Using the <figure> tag, images can be grouped with a caption written in the <figcaption> tag. All three tags can be styled for size, positioning, margin and padding, and text wrap (float).<\/p>\n

              <figure>
              \n<img src=”image.jpg” \/>
              \n<figcaption>Figure 1.<\/figcaption>
              \n<\/figure><\/p>\n

               <\/p>\n

              \"Figure<\/a>
              The figure tag used to group an image with a caption.<\/figcaption><\/figure>\n

              Grouping Photos with Divs or Tables<\/h2>\n

              Two or more photos can be grouped together with <div> or <table> tags. The div width should be set to equal the sum of the image widths, including an allowance for any borders or margin around the images. Once grouped, the div can be styled by centering and placing spacing around it. A table can be constructed with one photo per cell (<td>) to create horizontal and vertical matrixes of images.<\/p>\n

               <\/p>\n

              \"Grouping<\/a>
              A div or division with id \u201cimage-gallery\u201d is used to group 3 photos in a row and center them in the page.<\/figcaption><\/figure>\n

              Arranging Photos with the Flexible Box and Grid Layouts<\/h2>\n

              The relatively new \u201cflexible box\u201d and \u201cgrid\u201d layouts are useful for arranging multiple images on web pages.<\/p>\n

              When a div is styled with \u201cdisplay: flex;\u201d and accompanying \u201calign-items\u201d and related styles, the items in the div will arrange themselves on the page. Additional items can easily be added, such as more photos or documents.<\/p>\n

              Similarly, the \u201cgrid\u201d layout can be used to specify columns, rows, or grid regions on the page.<\/p>\n

               <\/p>\n

              \"CSS<\/a>
              The grid layout is helpful for arranging images or other tags. In this case, the style “display: grid;” creates the grid, which is defined with 3 columns and two rows.<\/figcaption><\/figure>\n

               <\/p>\n

              \"Flexible<\/a>
              The flexible box layout, style “display: flex;” is helpful in arranging images and other tags on the screen.<\/figcaption><\/figure>\n","protected":false},"author":6,"menu_order":5,"template":"","meta":{"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"chapter-type":[],"contributor":[],"license":[],"class_list":["post-112","chapter","type-chapter","status-publish","hentry"],"part":3,"_links":{"self":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-json\/pressbooks\/v2\/chapters\/112","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-json\/pressbooks\/v2\/chapters"}],"about":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-json\/wp\/v2\/types\/chapter"}],"author":[{"embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-json\/wp\/v2\/users\/6"}],"version-history":[{"count":23,"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-json\/pressbooks\/v2\/chapters\/112\/revisions"}],"predecessor-version":[{"id":335,"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-json\/pressbooks\/v2\/chapters\/112\/revisions\/335"}],"part":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-json\/pressbooks\/v2\/parts\/3"}],"metadata":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-json\/pressbooks\/v2\/chapters\/112\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-json\/wp\/v2\/media?parent=112"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-json\/pressbooks\/v2\/chapter-type?post=112"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-json\/wp\/v2\/contributor?post=112"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesignlab\/wp-json\/wp\/v2\/license?post=112"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}