Optimizing Images – for the web and devices

When it comes time to save your images in Photoshop, there are many formats and options for saving and exporting. When saving images for use on the Internet we have to take the Web browser into consideration.

Images are either made from Raster or Vector based files. Raster images are made up of small dots or squares called pixels (picture elements). Each pixel has hue, saturation, value and the more pixels the image had per inch (DPI- dots per inch), the higher the resolution and the file size.

Imagine the Internet is the information superhighway. If so, then the windshield of your car is your Web browser. Your browser allows you see to see and navigate the Web, just as your windshield allows you to se the road ahead. There are several popular browsers such as Explorer, Safari, and Firefox.

When you look at images on facebook, or any site, they take time to load on your browser depending on factors such as the speed of your internet connection and the file size of the image. To decrease this time we will “optimize your images, or “Save For Web”.

Here’s how: Choose – Save For Web  (See below image)…  

…then choose to save your image as a JPEG, click the box for “optimize”, and read photoshop’s estimate on loading time for the new image near the bottom. If you need to, adjust the image more to make it load faster by saving an even lower quality version.

Just remember two ideas: resolution ( or DPI) and file size. High res images are good for print and editing, you need low res images for the web, or at least a small thumbnail to put on your page so that the person may choose to click on that thumbnail to take the time to view your larger photo.

Here are two photos, one that has been optimized and one that is is still in its original, high resolution format. Watch how long each one takes to load using Explorer.

Now find all of your assignments rom this class, open them in Photoshop and practice File-Save for Web. Keep them in a new folder that you create on your “U” drive (your personal drive). Call this new folder “Web Images” and save all of todays optimized pics there…

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s