1 / 21

Sizing Photos for the Web

Basic HTML Class. Sizing Photos for the Web. File size is important Image files can be very large Large images cause websites to load slowly Use more bandwidth Last thing you want is people getting bored while waiting…and clicking somewhere else!. Importance of size of image.

tadita
Download Presentation

Sizing Photos for the Web

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Basic HTML Class Sizing Photos for the Web

  2. File size is important • Image files can be very large • Large images cause websites to load slowly • Use more bandwidth • Last thing you want is people getting boredwhile waiting…and clickingsomewhere else! Importance of size of image

  3. Cameras take photos with high resolution • Printing a clear image takes 300 pixels per inch (ppi) • Web pages display 72 ppi • The more pixels in an image, the larger the file size • Pixels cannot be added to an image, only taken away • Sizing up loses image resolution Resolution of image

  4. Sizes of images are smaller for computer or phone screens (largest will be about 6 X 9) • File sizes are much smaller • Resolution is lower (only need 72 ppi to be clear) • Images from web are not as clear when printed • Images do not look better on the web with larger file size Images on the web

  5. Squares of color that make up digital image ppi is the number of pixels in an inch2 What’s a pixel?

  6. Before : 2.8 MB After: 28 KB Example

  7. Any image editor can resize images • PC-Windows XP, 7 or Vista (Vista and 7 need download) • Mac-iPhoto • Photoshop • Online image editors What programs can we use?

  8. For this lesson we will only use: Photoshop to resize images Online applications to resize images (FotoFlexer) Photoshop cs4 and online applications

  9. In this lesson we will: • Decide on three basic sizes for photos (small, medium and large) • Use Adobe Photoshop to reduce the file size and save • Use free online photo applications to reduce file size and save overview Reduced using Photoshop Reduced using FotoFlexr

  10. Open image in application • Choose size (in inches) and resolution (in ppi) in application • Resize by saving the image with another name • Once image is sized down, pixels are permanently lost! Don’t overwrite original! • Manage image names-something you will remember. Basic steps to resize an image

  11. Open Photoshop • Choose image from folder and open • Pick a standard size in inches for image (for this class, we’ll use these): • Large 6 x 9 inches • Medium 3 x 4.5 • Thumbnail 1 x 1.5 Note: The original image is called: baxter.jpg Step 1: open image I want this photo To be 3 X 4.5

  12. Pull down Image menu • Choose Image Size • Constrain proportions • Put in the width of 4.5 for widest side • Resolution is 72 ppi • Click OK Step 2: choose size/resolution

  13. Image will look smaller Pull down: File: Save As: Save image as baxter_m.jpg into correct folder to identify image Click: Save Step 3: Save image in folder

  14. Options box appears • Under JPEG options: • drag slider to low unless otherwise specified • Click: OK Step 3: save image

  15. You may save several copies of the same image in different sizes. It’s easy to know which image is right when named properly Save files as x_s, x_m and x_l or any other way you like You will often use several sizes of the same image for websites Step 4: manage images

  16. You can also go to File: Save for Web and Devices It will give you better options to reduce file size Photoshop special web save

  17. Navigate to FotoFlexr or any other online photo editor and upload image Choose resize and pick preset sizes (constrain) Using Fotoflexr online to resizeStep 1: open image

  18. I will choose “website” as my medium (320 X 240) pixels Click: Apply Step 2: Choose size

  19. Click: Save Name image: original is called elimi.jpg resized image is elimi_m.jpg Save onto desktop Step 3: Save image

  20. Pull image from desktop into correct folder Step 4: Manage images

  21. Enjoy sharing your images with the world!!!

More Related