INTRO TO MULTIMEDIA. MAT 103

Alejandra Jarabo

Multimedia Arts & Technologies Division. Santa Barbara City College
Compressed bitmap file. Jpeg

 

 

 
What is a JPEG, Joint Photographic Experts Group

A JPEG is a standard Compressed Graphic Format optimized to compress images of Photographic nature (with constant changes of color and shades).
Most digital cameras store pictures in THIS format with very little compression (besides the professional "camera raw format).
JPEGS don't support Transparency (transparent areas in the picture), and work best if the image doesn't have sharp lines of hue or tone contrast.

Once you compress an image with JPEG, you have lost data and can never recover it again, so always save an uncompressed original version of your graphics (a Photoshop .psd, or an Illustrator .ai )

Since in Multimedia we work for screen display and not for print, images to be used online or just viewed on a screen should be first adjusted to dimentions that could be seen on a browser or generic display program (like Preview).
For a medium image (not an icon, a thumbnail or an image to be part of a graphic panel), this would mean some number in between 320X240 pixels and 800X600 pixels (not points, inches or centimeters: those are units for printing!).

How to save a jpeg in Photoshop or Illustrator

Once you have the right pixel resolution for your image you should save your JPEG through the "Save for Web" menu located under the FILE main menu of your interface ( n older verion of Photoshop it will show as "Save for Web and Devices").

The Dialog-window that will show up will let you choose between jpeg, gif or png format and customize the options within those formats, so you can create the perfect optimized image for your project, with a full visual preview.

   
       
The "Save for Web " Dialog-Window

If you only see the Original image when you open this window, change the upper-left tab to 4_Up, so you can see 3 options of compressed graphics besides the original image (tab located on the upper-left corner). SEE PIC OF WINDOW BELOW

When you click on a window, that window becomes the selected choice, and the panel on the right will reflect the options of that preview. Notice the blue outline around the selected window.

 

Click on the window that resembles the most what you need and then change settingson the right to get exactly what you want.

You can also choose a window and set it to the file format (jpeg, gif, or png) that you need and speciffic settings.

Choosing settings: If you are compressing an image to email it or post it on a Forum, and it qualifies as a good image to be compressed as a jpeg (lots of colors with smooth transitions), I would choose between 50 and 70% Quality. This will not give you a lot of compression and you will keep a good quality.

If with those settings the estimate file size is still more than 300K, you should lower the quality. Lowering the quality will inrease the compression and at acretain point (usually under 30%) you will begin to see artifacts around areas with a high contrast in hue and tone. Artifacts look a bit like "Bulky pixels".

If you get an estimated file size on the MEGABITES range (Mb), you should cancel the operation and check the pixel dimmensions of your image: you might still be set to printing dimmensions. Resize your image and come back to the compressing menu.

 

The idea is to get the maximum quality for the smallest file size you can afford.
What you exactly need depends on your project: how many images you will have on the page, will you have any other "heavy elements" on the page, like video or audio files.

 


When you are satisfied with quality and file size, click SAVE button (top-right of window).

Photshop will ask you to locate Where you want the image to be saved and define the file name.

Remember that you should keep the original images (with full resolution) in one folder, and make another folder with the compressed images meanwhile you are working on a project.

Folders inside your project folder (name the project, so you find your files when you actually have several projects):

  • images_originals
  • images_compressed