Media Studies Chapter 3 Homework High JPEG compression tends to blur the image detail

Unlock access to all the studying documents.

View Full Document



Worksheet: JPEG vs. GIF vs. PNG

ApplicationProgramRequired

AdobePhotoshop5.5orlater



Objectives:

1. TolearntooptimizefilesinJPEG,GIFandPNGformatandadjustthecompressionsettingstoachievethe

balancebetweenthefilesizeandoverallimagequality.

2. Tolearnthetypeofimagesthateachofthesefileformatsismosteffectiveatcompressing.



Introduction:

ThethreeimagefileformatssupportedbytheWebbrowsersareJPEG,GIFandPNG.Eachemploysdifferent

compressionalgorithmstomakethefilesizesmaller.Becauseofthedifferentalgorithms,theyworkbestwith

differenttypesofimages.



TheJPEGformatworksbestwithcontinuous‐toneimageswithaboardcolorrangeandsubtlecolorandbrightness

variations,suchasphotographsandimageswithgradients.Itsupports24‐bitcolor(millionsofcolors).JPEG

compressionisalossycompressionwhichmeansthatduringcompression,imagedataislosttomakethefilesize

smaller.HighJPEGcompressiontendstoblurtheimagedetail.(SeetheJPEGworksheetformoredetailedhands‐on

experimentation.)



TheGIFformatsupportsupto8‐bitcolor(256colors),butitalsosupportsbackgroundtransparency.Itismost

effectiveforimageswithsolidcolorssuchasillustrations,logos,andlineart.Itusesapaletteofupto256colorsto

representtheimage.Iftheoriginalimagehasmorethan256colors,thenyouwillneedtoreducethecolors.There

areseveralcolorreductionoptionsavailable,oryoucanalsocustomizethecolorstobeincludedinthepalette.A

sequenceofimagescanalsobeputtogetherintoananimatedGIF.



ThePNG‐8formatusesupto256colorstorepresenttheimage;similartoGIF.ThePNG‐24supports24‐bitcolor,

includingtransparencyinformation.UnliketheJPEGformat,PNGisanon‐lossycompressionmethod.Dependingon

theimageandtheJPEGcompression,PNG‐24mayyieldalargerfilesizethanJPEGcompressedfromthesameimage.



Instructions:

Severalsampleimagescanbedownloadedfromthebook’sWebsite.LookunderChapter3’sworksheetonJPEGvs.

GIFvs.PNG.



1. Downloadthesampleimagesfromthebook’sWebsite,oruseimagesofyourown.(Getinstructionsfrom

yourinstructorsaboutthenumberandtypeofimagesyouneedtousetocompletethisexercise.)Each

imageinthisworksheetisprovidedwithabriefdescriptiononthecharacteristicsoftheimage.Ifyouare

usingyourownimages,writeabriefdescriptionabouttheuniquecharacteristicsoftheimageandhowyou

obtainedtheimage(e.g.captureddirectlyfromadigitalcameraaswhatfileformat,scannedfromaslide,a

negative,oraprint,atwhatcolordepthandinwhatfileformat.)



3. Clickonthe4‐Uptabtoseetheoriginalimageandthreepossibleoptimizedimages.(Seethefigureofthe



4. Foreachimage,tryeachofthefollowingfiletypes:JPEG,GIF,PNG‐8,andPNG‐24.Determinethebest

compressionsettingsforeachofthesefileformatsforthesameimage.Notedownthesettingsandthefile

sizeonthefollowingpages.Circletheonethatyouthinkitgivesthebestbalancebetweenfilesizeand

imagequality.And,commentontheresultingoptimizedimageandgivetherationaleforyourdecision.







Figure1.SaveforWeb…dialogboxinAdobePhotoshopCC2014.







Descriptionandcharacteristicsoftheimage



FileSize:__________KB



FileSize:__________KB



FileSize:__________KB



FileSize:__________KB



121.4





Descriptionandcharacteristicsoftheimage

Thisisaslideofapen‐and‐inkdrawing,scannedat24‐bitcolor. Thebackgroundhas a

castofnon‐uniformgraywhenitwasfirstscanned.Thereisanotherimagethathasbeen



FileSize:__________KB



FileSize:__________KB



FileSize:__________KB



FileSize:__________KB



Commentontheresultingoptimizedimageandgivetherationaleforyourdecision,forexample:







Descriptionandcharacteristicsoftheimage



Thisisaslideofawatercolorpainting,scannedat24‐bitcolor. Thebackgroundhad acast

ofnon‐uniformgraywhenitwasfirstscanned.Thisimagehasbeencleaneduptoshowa

uniformwhitebackground.



Foreachofthefileformatsbelow,fillintheoptimizedsettingsandfilesize,especiallythosehighlightedinyellow.

Then,circlethefileformatthatyouthinkisthebestforthisimagefortheWeb.



FileSize:__________KB



FileSize:__________KB



FileSize:__________KB



FileSize:__________KB







Descriptionandcharacteristicsoftheimage



Thiswas paintedinAdobePhotoshopwithmostlysoft‐edgedbrusheswithnocolor

variationinastroke.



Foreachofthefileformatsbelow,fillintheoptimizedsettingsandfilesize,especiallythosehighlightedinyellow.

Then,circlethefileformatthatyouthinkisthebestforthisimagefortheWeb.



FileSize:__________KB



FileSize:__________KB



FileSize:__________KB



FileSize:__________KB



Commentontheresultingoptimizedimageandgivetherationaleforyourdecision,forexample:



93.12





Descriptionandcharacteristicsoftheimage



Thisimagewasoriginallycreatedwithavectorgraphicprogram,andthenexportedtoa

24‐bitbitmapimage.Itisanillustrationtypeofimagethatcontainslargeareasofsolid

colorsandgradients.



Foreachofthefileformatsbelow,fillintheoptimizedsettingsandfilesize,especiallythosehighlightedinyellow.

Then,circlethefileformatthatyouthinkisthebestforthisimagefortheWeb.



FileSize:__________KB



FileSize:__________KB



84 to 132 KB depending on the

compression quality setting





Descriptionandcharacteristicsoftheimage



Thisisacontinuoustoneimage.Itwasshotonaslidefilmandscannedtoadigitalimage.

Therearesoftshadowareas.Boththefloorandtheceilingespeciallyhaveasmooth

gradation.WhenyoucompareJPEGandPNG‐24withGIFandPNG‐8,paycloseattention

tohowsuchgradationishandleddifferently.



Foreachofthefileformatsbelow,fillintheoptimizedsettingsandfilesize,especiallythosehighlightedinyellow.

Then,circlethefileformatthatyouthinkisthebestforthisimagefortheWeb.







Descriptionandcharacteristicsoftheimage



Thisisacontinuoustoneimage.Itwasshotonaslidefilmandscannedtoadigitalimage.

Notethedrumshaveadesignthatusesbigareasofcolors,buttheyarenotreallysolid

colors;therearesubtlechanges.Whichfilecompressionisbestforthisimageandwhat

settingsdoyouchoose?



Foreachofthefileformatsbelow,fillintheoptimizedsettingsandfilesize,especiallythosehighlightedinyellow.

Then,circlethefileformatthatyouthinkisthebestforthisimagefortheWeb.



FileSize:__________KB



FileSize:__________KB







Descriptionandcharacteristicsoftheimage



Thisisacontinuoustoneimage.Itwasshotonaslidefilmandscannedtoadigitalimage.

Notethemountaininthebackgroundisoutoffocusandthushasafuzzyedge.Whenyou

compareJPEGandPNG‐24withGIFandPNG‐8,lookatthedifferenceinthisfuzzyarea.



Foreachofthefileformatsbelow,fillintheoptimizedsettingsandfilesize,especiallythosehighlightedinyellow.

Then,circlethefileformatthatyouthinkisthebestforthisimagefortheWeb.



FileSize:__________KB



FileSize:__________KB



74 to 157 KB depending on

the Quality setting





Descriptionandcharacteristicsoftheimage



Thisisacontinuoustoneimage.Itwasshotonaslidefilmandscannedtoadigitalimage.

Thesteam,thoughnotcolorful,ismadeupofsubtlecolors.WhenyoucompareJPEGand

PNG‐24withGIFandPNG‐8,lookatthedifferenceoftheresultofthesteamandits

neighboringarea.



Foreachofthefileformatsbelow,fillintheoptimizedsettingsandfilesize,especiallythosehighlightedinyellow.

Then,circlethefileformatthatyouthinkisthebestforthisimagefortheWeb.



110 to 209 KB depending





Descriptionandcharacteristicsoftheimage

Useanimageofyours

orfromtheWeb



Foreachofthefileformatsbelow,fillintheoptimizedsettingsandfilesize,especiallythosehighlightedinyellow.

Then,circlethefileformatthatyouthinkisthebestforthisimagefortheWeb.

