{"id":58,"date":"2026-01-10T19:32:07","date_gmt":"2026-01-11T00:32:07","guid":{"rendered":"https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/?post_type=chapter&p=58"},"modified":"2026-01-11T21:32:45","modified_gmt":"2026-01-12T02:32:45","slug":"chapter-3-images","status":"publish","type":"chapter","link":"https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/chapter\/chapter-3-images\/","title":{"raw":"Chapter 5 \u2022 Images","rendered":"Chapter 5 \u2022 Images"},"content":{"raw":"

Image Resolution<\/h2>\r\nWith photographic images on the web, designers walk a fine line between image quality and file size. Digital bitmapped photos are made up of a matrix of microscopic colored squares, or picture elements (pixels).\r\n\r\nBitmapped images have larger file sizes than vector graphic illustrations and are \"use-specific,\" meaning their resolution should be set correctly for the intended reproduction size. Excessively high resolutions and large photos reduce download speed, while too-small images may show \"pixelization\" in which individual pixels can be seen and create a \"stair-stepped\" effect.\r\n\r\nWhen thinking about the appropriate resolution of bitmapped images, consider the reproduction size you want to use. E.g., if you have a fixed-width page, 1024px wide, a good idea is to set the resolution of full-width images to double that number, or 2048px, to leave room for future enlargement. Likewise a half-width image would be 512px wide and could be sized to 1024px width.\r\n\r\n[caption id=\"attachment_60\" align=\"aligncenter\" width=\"1024\"]\"\"<\/a> Figure 3-1. This original image by Stephen Wong on Unsplash measured 5472\u00d73648px and is too big for a normal fixed-width page. Insets show the relative size of the image at the resolutions written on them.[\/caption]\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n
Resolutions and File Sizes for the Balloon Image<\/th>\r\n<\/tr>\r\n
resolution<\/em><\/th>\r\nfile size<\/em><\/th>\r\n<\/tr>\r\n
5472\u00d73648<\/td>\r\n1.7 MB<\/td>\r\n<\/tr>\r\n
2400\u00d71600<\/td>\r\n291 K<\/td>\r\n<\/tr>\r\n
1920\u00d71280<\/td>\r\n194 K<\/td>\r\n<\/tr>\r\n
640\u00d7426<\/td>\r\n37 K<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n

Procedure<\/h2>\r\nAssume you want a banner image that's 1024px wide. You want an image size that's 1024 to 2048px wide, depending on whether you want to leave open the option to reproduce the image at a larger size. You download an image or take a photo similar to the balloon image above, which originally was 5472px wide\u2014way too big for its intended use.\r\n
    \r\n \t
  1. Open the image in Photoshop, Preview, or other image-editing program.<\/li>\r\n \t
  2. Set the resolution to 1024 or 2048px.<\/li>\r\n \t
  3. Resave in JPEG or PNG (for transparency) format.<\/li>\r\n<\/ol>\r\n

    Image Formats for the Web<\/h2>\r\nImages for the web should be in a compressed format such as JPG, PNG, or GIF. Three key considerations are:\r\n