1 / 19

Web Fundamentals Training Series

Web Fundamentals Training Series. Picture This. What We’ll Be Covering…. It’s a Graphic World Image Color Categories Image Size Issues Image Compression Image File Types Megabytes to Megapixels: What does this mean? Basic Image Manipulation

emiko
Download Presentation

Web Fundamentals Training Series

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Web FundamentalsTraining Series • Picture This

  2. What We’ll Be Covering… • It’s a Graphic World • Image Color Categories • Image Size Issues • Image Compression • Image File Types • Megabytes to Megapixels: What does this mean? • Basic Image Manipulation Ex. 01 Check Image Size Using a Mouse Over Method Ex. 02 Check Image Size Using Properties Ex. 03 Resize an Image Using MS Paint

  3. Mosaic (1993) Console View Firefox (2008) It’s a Graphic World… • Prior to the Web and the development of Mosaic, the first web browser, all Internet transmissions were console based and text only. No pictures. No sound. • This has definitely changed • Web pages created to today’s expectations and standards have benefits, but also drawbacks +Visually and audibly appealing + User friendly • High demand on resources • Many “power” users don’t understand supporting system issues

  4. Image Color Categories • There are two basic image color categories • Solid color • Line art • Logos • Text images • Continual color • Gradient filled graphics • Scanned images • Digital photos Colors blend Substantial color variety Flat colors Limited color variety

  5. Image Size Issues • It’s tempting to use high resolution graphics when making a web page • As resolutions get higher, though, more memory is required to both store and process the image • Often, image files used are much bigger than necessary • Slows down web page loading • Bottlenecks Internet traffic • Wastes valuable memory space • Ways to counteract this problem include • File Compression • Image Resizing

  6. Image Compression • Image files can get very large • Image files are compressed to save space • Different compression methods yield different results • Lossy compression: image quality is compromised with each compression • Pieces of the file are lost each time the file is compressed • Each time a copy is made, the copy degrades • Lossless compression: does not affect image quality • Best for images that will be copied regularly • Results in a larger file size

  7. Image File Types • Several different image file types exist • You can tell what the type is by the file extension that is used Ex: my-photo.jpg • Three of the most common image file types for web publications are: • gif • jpg (or jpeg) • png • Each type has its benefits, each has its drawbacks • Different types are typically suggested for different color categories

  8. GIF File Type • GIF = Graphics Interchange Format • Best suited for graphics that consist of solid colors such as logos or dialog boxes • Transparency with solid colors is possible • Uses lossless LZW compression • Does not work well for photographs or gradient (blended color) graphics Note the blotchy “rings” where colors should be more blended Note the smoothness of the lines and the color

  9. JPEG File Type • JPEG (or JPG) = Joint Photographic Experts Group • Best suited for continuous color images, such as photos or gradient graphics • Exceptionally small file type • Uses lossy compression • Can not display a transparent background • Not recommended for solid color graphics due to appearance of “artifacts” Note the “smudging” especially where two different color paths meet. These are known as “JPEG artifacts”. Note how gradient colors and varying tones are smoothly blended

  10. PNG File Type • PNG = Portable Network Graphics • Most recent of all common image file types • Can be used with solid or continuous color images • Transparency with solid or continuous color possible • Not all browsers properly render a transparent png background • Uses lossless ZIP compression • Slightly slower to read and write, due to larger file Smooth continuous lines and color – no artifiacts Smoothly blended gradients

  11. Megabytes to Megapixels • Megabytes (MB) are NOT Megapixels (MP) • Byte • A unit of measurement for memory storage • Pixel (Picture Element) • The smallest unit of information in a digital image • Each pixel consists of three bytes • The prefix “mega”, in both cases, means “one million” • Therefore a 1 MP image will require 3 MB of storage space • Typically, it’s wise to keep web images out of the MB range at all

  12. Ex 01: Check Image Size / Mouse Over • In Windows, to check an image size, simply roll your mouse arrow over the file in question. Note that the size of the image is located at the bottom • A box, known as a tool tip, will appear with relevant information about the file. Size information is located at the bottom of the tool tip.

  13. Ex 02: Check Image Size / Properties • Another way to check the size is to view the Properties: • Right-click on the file to be checked • A menu will appear • Click on Properties • A Properties dialog box will appear • The Size field is the actual size of the file • The Size on disk field is the amount of space in memory that must be allocated to hold the file • To exit, click Cancel 4 2 5 6 3 1 7

  14. Exercise 03: Resizing an Image • Before beginning… • It’s best to keep web images within the lower end of the Kilobyte (KB) range, when possible • 1000 KB = 1 MB • Typically a good web image can be within 50 – 120 KB, depending on the dimensions • There are many different graphics editors and web services available that can resize images • Windows comes standard with the MS Paint application, which can be used for resizing. This feature will be used for the following exercise.

  15. Opening the Image with MS Paint • To open an image file in Microsoft Paint: • Right-click on the file A sample file, bugsy.jpg can be found in the ex-01 folder of the related lab materials if you need a practice image. • Left-click on Open With • Left-click on Paint • The MS Paint application opens 2 3 4 1 Note that only part of the image is viewable • Only part of the “Bugsy” file is viewable because the file is so large that the application view screen doesn’t have room to show it all! MS Paint application

  16. MS Paint Stretch / Skew 1 • Now we’re ready to shrink the image • Click on Image • Click on Stretch/Skew • The Stretch and Skew dialog box opens • Enter the percentage of the original you want to end up with in bothHorizontal and Vertical boxes. • Click OK 2 3 5 Note both fields must have the same numbers entered to guarantee an even resizing 4

  17. Resizing Completion • Bugsy should appear in your view screen in all his glory • To save the file, use the shortcut keys Ctrl + S, or • Click on File • Click on Save 1 2 Original Image Size Optimized Image Size Now when we check the image size, as shown above right , we get a much more optimized 51.2 KB, versus the original 3,900 KB (3.9 MB).

  18. File Extension Awareness • If you are creating a brand new file in MS Paint, or saving another file type as a jpeg, be aware of how MS Paint saves the file extension. • MS Paint will automatically save a new or converted file as filename.JPG – with the extension capitalized. This can be a problem with some programs. • If you happen to encounter a capitalized JPG extension, do the following: • Right click on the file in question • Left click on the Rename menu item • Rename the file with a lowercase jpg extension

  19. Conclusion • This completes the Web Fundamentals tutorial. For additional tutorials, please visit WebTrain, the CWS web publishing training site, at: • http://oregonstate.edu/cws/webtrain • To submit a Help Ticket to Central Web Services go to: • http://oregonstate.edu/cws/contact • Other OSU resources for web and computer help: • http://oregonstate.edu/helpdocs

More Related