Download as PDF, PPTX
Uploaded byShawn Calvert
Creating Images for the Web
The document provides guidelines for using images on the web, including saving images in the proper format like JPG, PNG, or GIF depending on whether the image needs transparency or a wide color range, and at the optimal size for the context. It discusses using images within HTML and CSS and measuring images in pixels, and provides exercises to practice saving images at different formats and sizes using Save for Web.
More Related Content
Similar to Creating Images for the Web
Creating Images for the Web
- 1. Using Images onthe Web 22-3375 Web Design I // Columbia College Chicago
- 2. Quiz You can useyour notes.
- 3. Project 1: GroupCrits Is there a clear visual hierarcy? Does the wireframe match the user goals (from last week) Did the designer think through and represent the different user tasks (defined last week)? Is the navigation clear; are the labels easily understood? Can the structure be further simplified? Does the designer present a clear vision for how this site will be an improvement over the current version — in visual design, content, and overall message?
- 4. Images can beintegrated into your site as html <img> elements or pulled in from your css. Images on the Web How are images being used in the following sites?
- 5. Images can beintegrated into your site as html <img> elements or pulled in from your css. How are images being used in the following sites?
- 25. Rules for usingweb images
- 26. 1 Save imagesin the right format 2 Save images at the right size 3 Measure images in pixels
- 27. What is the“right size”? With the growing use of responsive design techniques and faster connections, it is becoming less crucial for designers to have their images perfectly sized to their box. The basic guideline is to have (just) enough pixels for your images to look great, however you are using them.
- 28.
- 29. Screen image formats Print image formats
- 30. jpg jpgs are forimages, like photographs, that have a lot of colors and gradations. It uses “lossy” compression, meaning that you can reduce the size of the image by reducing the quality of the image detail. colors transparency? 24-bit: no millions
- 31. What is imagedetail? Image quality is detail; the quality of the original capture can be accessed by how much actual live detail was recorded, pixel-by- pixel. The more you compress your jpgs, the more of these pixel- by-pixel details you making the same (blowing out). The result of too much compression is jpg artifacts and posterization.
- 34.
- 35. Exercise Use Save forWeb to save out a jpg
- 36. png-24 There are twokinds of png images: 24-bit (png-24) and 8-bit (png-8). png-24 is a great format because it supports alpha transparency, which allows you to have images with transparent shadows, anti-aliasing, etc, and color underneath will show through. There is no support for png-24 in ie6 (there is a workaround). colors transparency? 24-bit: yes millions (alpha transparency)
- 37.
- 38. png-8 png-8 is an8-bit image format, meaning that it supports up to 256 colors. It supports binary transparency, meaning that pixels are either on or off – they have no transparency. This translates to jaggy edges (which you have to then plan for and work around). You can reduce the color index (aka color table) to contain only the colors you need, resulting in very small image sizes. gif files are saved in “index” color mode. colors transparency? 8-bit: yes 256 colors (binary transparency)
- 40. Should I usepng or jpg? For photos, you almost always go with jpg, because pngs will usually be much larger. For icons, backgrounds, tiles, etc, that need transparency, use png-24.
- 42. Exercise Use Save forWeb to save out a png 24
- 43. gif gif if theworkhorse for icons and vector graphics (like logos) that don’t need alpha transparency. Like png-8, it uses binary transparency. You can reduce the color index (aka color table) to contain only the colors you need, resulting in very small image sizes. gif files are saved in “index” color mode. colors transparency? 8-bit: yes 256 colors (binary transparency)
- 45. Exercise Use Save forWeb to save out a gif
- 46. Exercise 1 Fixed-widthcentered page 2 Fixed-height header with logo 3 Two Column layout, floated 4 Absolute Positioning