web fundamentals training series

Web FundamentalsTraining Series

Picture This

Provided by Central Web Services541-737-1189http://oregonstate.edu/cws 2

What We’ll Be Covering…

It’s a Graphic WorldImage Color CategoriesImage Size IssuesImage CompressionImage File TypesMegabytes to Megapixels: What does this mean?Basic Image Manipulation

Ex. 01 Check Image Size Using a Mouse Over MethodEx. 02 Check Image Size Using PropertiesEx. 03 Resize an Image Using MS Paint

http://oregonstate.edu/cws


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)



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 colorsLimited color variety

Colors blendSubstantial color variety



Image Size Issues

It’s tempting to use high resolution graphics when making a web pageAs 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



Image Compression

Image files can get very largeImage files are compressed to save spaceDifferent 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



Image File Types

Several different image file types exist• You can tell what the type is by the file extension that is

usedEx: 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 drawbacksDifferent types are typically suggested for different color categories



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



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”.



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



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



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



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 appear3. Click on Properties4. A Properties dialog box will

appear5. The Size field is the actual size

of the file6. 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

1

2

3

4

5

6

7



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.



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 With3. Left-click on Paint4. The MS Paint application

opens

MS Paint application

1

23

4

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



MS Paint Stretch / Skew

Now we’re ready to shrink the image1. Click on Image2. Click on Stretch/Skew3. The Stretch and Skew dialog box

opens4. Enter the percentage of the original

you want to end up with in both Horizontal and Vertical boxes.

5. Click OK

1

2

3

4

5

Note both fields must have the same numbers entered to guarantee an even

resizing



Resizing CompletionBugsy should appear in your view screen in all his gloryTo save the file, use the shortcut keys Ctrl + S, or

1. Click on File2. 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



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



ConclusionThis 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


http://oregonstate.edu/cws/webtrain

http://oregonstate.edu/cws/contact

http://oregonstate.edu/helpdocs

web fundamentals training series

Documents

central web services541

image color categoriesthere

image qualitybest

web publications

web browser

common image file types

image compressionimage

check image size