View
29
Download
0
Category
Tags:
Preview:
DESCRIPTION
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 - PowerPoint PPT Presentation
Citation preview
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
Provided by Central Web Services541-737-1189http://oregonstate.edu/cws 3
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 Services541-737-1189http://oregonstate.edu/cws 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
Flat colorsLimited color variety
Colors blendSubstantial color variety
Provided by Central Web Services541-737-1189http://oregonstate.edu/cws 5
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
Provided by Central Web Services541-737-1189http://oregonstate.edu/cws 6
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
Provided by Central Web Services541-737-1189http://oregonstate.edu/cws 7
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
Provided by Central Web Services541-737-1189http://oregonstate.edu/cws 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 smoothness of the lines and
the color
Note the blotchy “rings” where
colors should be more blended
Provided by Central Web Services541-737-1189http://oregonstate.edu/cws 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 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 Services541-737-1189http://oregonstate.edu/cws 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
Smoothly blended gradients
Smooth continuous
lines and color – no artifiacts
Provided by Central Web Services541-737-1189http://oregonstate.edu/cws 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
Provided by Central Web Services541-737-1189http://oregonstate.edu/cws 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.
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 Services541-737-1189http://oregonstate.edu/cws 13
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
Provided by Central Web Services541-737-1189http://oregonstate.edu/cws 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.
Provided by Central Web Services541-737-1189http://oregonstate.edu/cws 15
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
Provided by Central Web Services541-737-1189http://oregonstate.edu/cws 16
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
Provided by Central Web Services541-737-1189http://oregonstate.edu/cws 17
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
Provided by Central Web Services541-737-1189http://oregonstate.edu/cws 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:
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 Services541-737-1189http://oregonstate.edu/cws 19
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
Recommended