Welcome to Scribd. Sign in or start your free trial to enjoy unlimited e-books, audiobooks & documents.Find out more
Download
Standard view
Full view
of .
Look up keyword
Like this
1Activity
0 of .
Results for:
No results containing your search query
P. 1
Optimizing Images for the Web

Optimizing Images for the Web

Ratings: (0)|Views: 17|Likes:
The why and how of resizing images for websites, blogs, and other online sites.
This guide also includes information about display size and resolution, image size and file formats.
The why and how of resizing images for websites, blogs, and other online sites.
This guide also includes information about display size and resolution, image size and file formats.

More info:

Published by: Social Media Exchange Association on Jan 21, 2013
Copyright:Attribution Non-commercial

Availability:

Read on Scribd mobile: iPhone, iPad and Android.
download as PDF, TXT or read online from Scribd
See more
See less

05/14/2014

pdf

text

original

 
Optimizing Images for the Web
The why and how of resizing images for websites, blogs, and other online sites 
When working on the Web, we need to optimize our images. By optimizing, we mean make themas small as possible (in kilobytes) while preserving the image size (in pixels) we need. By using only the size we need, we save storage space and reduce the amount of bandwidthneeded. This can save us money, if our webhost charges according to how much bandwidth weuse. Another important reason to optimize images, especially for small sites, is to enhance usability.Optimized images take less time to load, which reduces wait times for users in low-bandwidthenvironments. In turn, this means that when visitors arrive, they will be able to find the informationthey’re looking for. As the good people at Aptivate, publishers of Web Design Guidelines for Low Bandwidth, say:An image is worth a thousand words, but it will often be a larger file than a thousand wordsof text and thus will take longer to download. It is common for many web pages to havemore data in images than text, so reducing your use of images and reducing the size of the images you do use can make a big difference to the experience of someone on a slowconnection. To begin adopting good image practices, check Aptivate’s page about optimizingimagesand theinformation below, which will help you better understand:display size and image sizeresolution and pixel densityimage file formatshow to resize and crop images for the Web. 
Display size and resolution
 Display is another term for screen or monitor. Displays come in a variety of sizes, and are oftenmeasured diagonally in inches from the bottom left corner to the top right corner.You may also hear people talk about screens in terms of the number of pixels they have. A pixel isa small square or rectangle that uses light to render the images and text we see on screen. Screen resolution is a function of the display size and the number of pixelsa screen has per inch,or pixel density. The more pixels per inch (ppi) a screen has, the greater the pixel density of thescreen, and thus the higher the screen’s resolution. For example, a 17-inch computer screen may be 1,024 pixels wide by 768 pixels tall, giving it apixel density of about 75 ppi. A 19-inch monitor with the same number of pixels would have a pixeldensity of about 67 ppi.
You can reuse or remix this SMEX handout under the following license: http://creativecommons.org/licenses/ by-nc-sa/3.0/ 
 
Optimizing Images for the Web
Image size and 72 ppi
 When talking about images, you’ll often hear the term resolution. This refers to how many dotsof ink or pixels of light are used per inch of an image. The more dots or pixels per inch (ppi), thehigher the image’s resolution. Printing on most paper requires high-resolution images—for example, about 300 dots per inch(dpi) or greater for magazines and art books; 180 dots per inch for newspaper—to ensure that theimage won’t be pixelated or blurry.To optimize images for screen viewing, we need to make sure that our pictures will fit on thescreens on which they’re viewed and that they won’t take more time than necessary to download. To do this, we need to know two things:1.We need to know what the most common screen sizes are in pixels: at the moment, theyare 1024 x 768 pixels, although in the developing world 800 x 600 pixel screens are stillcommon.That means that pictures bigger than 800 x 600 or 1024 x 768 pixels will be too big tosee without scrolling. We don’t want that.2.We also need to know the optimal pixel density for on-screen images: it’s about 72 ppi. Thisis often referred to as the “magic number” for on-screen images.With these two pieces of information we can resize our images so that they are aestheticallypleasing and fast to download. For example, imagine you have imported an 8- x 10-inch landscape photo from your camera thathas a pixel density of 300 ppi. The dimensions of this photo would be 2400 x 3000 pixels, way toobig to show on most computer screen. But if we resize it by changing its pixel density to 72 ppi, theimage gets smaller: 576 pixels x 720 pixels. An image this size will not only be easier to render on screen but will also be much smaller inkilobytes, saving storage space and bandwidth. 
File formats
 In addition to the above, we can also save space and bandwidth by making sure we use thecorrect file format.There are four main types of Web image formats:.bmp, .gif, .jpg, .png The characteristics and best uses of each are outlined in the table of raster image formats below:
You can reuse or remix this SMEX handout under the following license: http://creativecommons.org/licenses/ by-nc-sa/3.0/ 

You're Reading a Free Preview

Download
scribd
/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->