Scribd
Upload
49 views3 pages

Lab-Web Media

This document provides instructions for a lab project on image comparisons and web media. The project involves [1] saving JPG images at different quality settings and PNG images at different color depths, [2] resizing images to test quality loss, and [3] adding image and video tags to HTML files. Students are asked to modify HTML and CSS files to display the images and videos for testing.

Uploaded by

THAMIZHARAASAN A L CHANDRAN
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
49 views3 pages

Lab-Web Media

This document provides instructions for a lab project on image comparisons and web media. The project involves [1] saving JPG images at different quality settings and PNG images at different color depths, [2] resizing images to test quality loss, and [3] adding image and video tags to HTML files. Students are asked to modify HTML and CSS files to display the images and videos for testing.

Uploaded by

THAMIZHARAASAN A L CHANDRAN
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

TIS2151 Web Application Development

Lab – Web Media

Project 2: Image Comparisons

Overview
Use a graphical editor to experiment with different quality settings and color depth values.

Instructions

1. Open artwork-original.tif in editor. Save three different JPG versions, one with maximum
quality (100, or 10 if editor is using a 10-point scale), one with medium quality (50), and
one with the lowest quality setting (10). Name the files artwork-quality100.jpg,
artworkquality50.jpg, and artwork-quality10.jpg.
2. Open artwork-original.tif in the editor again. Resize to 250 × 347. Save five different
PNG-8 (that is, 8-bit) versions, each with different color depths: 256 colors, 128 colors,
64 colors, 32 colors, and 16 colors. Name the files artwork-256colors.png, artwork-
128colors.png, etc.
3. Open logo-raster.png in the editor. Resize this image: one at 350 × 188 pixels, the other
at 525 × 282 pixels. Name the files logo-raster-2x.png and logo-raster-3x.png. Notice the
dramatic loss of quality when you make a small raster image larger!
4. Resize chapter06-project01-medium.jpg to 200 3 255. Save resized file as small.jpg.
Resize small.jpg to 1000 3 1275 and save file as big-fromsmall.jpg. Notice the dramatic
loss of quality when you resize an image that has been resized!
5. Edit chapter06-project02.html and add the appropriate <img> tags for your new images
to the <figure> elements so the page will appear as shown in Figure 6.40 . Edit the
<figcaption> for each to reflect the actual file size.
6. Edit chapter06-project02.html and add the appropriate <img> tags for the logo-vector.svg
file. Resize it using the width attribute of the <img> elements.

Test

1. View chapter06-project02.html in the browser. It should look similar to that shown in


Figure 6.40 .

aa
TIS2151 Web Application Development

aa
TIS2151 Web Application Development

Project 3: Share your travel photos

Instruction

1. Open chapter06-project03.html in the browser.


2. Add a <video> element to a <figure> element that will play either paris.mp4, paris.webm,
or paris.ogv in the element. (The files are in the media folder). Do the same for the lake
and sunset videos. Test in different browsers.
3. Modify the CSS file to add a gradient to the <header> element and to the <body>
element.

Test
1. View chapter06-project03.html in the browser. It should look similar to that shown in
Figure 6.41 .

aa

You might also like