Web Fundamentals Training Series Picture This

Provided by Central Web Services 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

Provided by Central Web Services 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 Console View Mosaic (1993) Firefox (2008)

Provided by Central Web Services 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 Flat colors Limited color variety Colors blend Substantial color variety

Provided by Central Web Services 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

Provided by Central Web Services 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

Provided by Central Web Services 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

Provided by Central Web Services 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 smoothness of the lines and the color Note the blotchy “rings” where colors should be more blended

Provided by Central Web Services 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 how gradient colors and varying tones are smoothly blended Note the “smudging” especially where two different color paths meet. These are known as “JPEG artifacts”.

Provided by Central Web Services 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 Smoothly blended gradients Smooth continuous lines and color – no artifiacts

Provided by Central Web Services 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

Provided by Central Web Services Ex 01: Check Image Size / Mouse Over In Windows, to check an image size, simply roll your mouse arrow over the file in question. 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. Note that the size of the image is located at the bottom

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

Provided by Central Web Services 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.

Provided by Central Web Services Opening the Image with MS Paint To open an image file in Microsoft Paint: 1.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. 2.Left-click on Open With 3.Left-click on Paint 4.The MS Paint application opens MS Paint application 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! Note that only part of the image is viewable

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

Provided by Central Web Services Resizing Completion Bugsy should appear in your view screen in all his glory To save the file, use the shortcut keys Ctrl + S, or 1.Click on File 2.Click on Save 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). 1 2 Original Image Size Optimized Image Size

Provided by Central Web Services 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: 1.Right click on the file in question 2.Left click on the Rename menu item 3.Rename the file with a lowercase jpg extension

Provided by Central Web Services Conclusion This completes the Web Fundamentals tutorial. For additional tutorials, please visit WebTrain, the CWS web publishing training site, at: To submit a Help Ticket to Central Web Services go to: Other OSU resources for web and computer help: