Mississippi's Leading Website Design Firm on Google

Recent Articles

Categories

Community News

  • Designing Your Own Futuristic-Style Brochures in Photoshop

    If you ever find yourself needing a more modern, futuristic appeal to your brochures like for example in an 8.5 x 14 brochure, this is the perfect tutorial for you. This tutorial will help you design your own, techy looking brochure with included resource links so that you can see where you can find some free stuff to use on your own designs.

  • Creating a Bright Sparkled Text Effect in Photoshop

    If you need something really noticeable and prominent for your poster titles or web designs, you may want to try out this effect. Fortunately, it is not that hard really to setup your own styled bright sparkles for text.

  • Creating A Simple Godfather Type Design

    In this guide, you will learn the simple steps in making a simple "Godfather" like design in Adobe Photoshop perfect for posters or print flyers. The steps are pretty simple, so even a beginner should be able to easily handle it.


Submit Your Own | View More Submissions

For quality graphics display get ATI radeon HD 5850 graphic cards.

Saving For the Web

Categories: tips, website design, photoshop
Posted By Alvina Lopez @ June 6th, 2011 12:55 PM

On first glance, this topic may seem extremely simple and obvious. You have to balance quality of the image and file size of the media to suite your site and its audience. Duh. However, this idea in itself is surprisingly not understood or practiced well on most websites. Certain small and unimportant graphics will have too high a resolution and file size while more prominent graphics will appear to not have enough. A lot of this boils down to the small details of file properties and how they are compressed or represented digitally.

Image Preparation

Before we even go over saving or file types, I'd like to cover a couple details you should understand about web graphics. Images made to be viewed in browsers should be formatted in RBG. CMYK is traditionally reserved for print. This is because RGB is an additive system (the more colors added, the more the image turns white) while CMYK is a subtractive system (the more colors added, the more the image turns black). Think of CMYK as if you're working on a sheet of paper; without any colors added, the sheet is just white. RGB is the exact opposite.

Try not to convert between RGB and CMYK as much as possible. If creating images for the web, always start in an RGB workspace rather than working in CMYK and then converting; this conversion process can add "noise" to gradients and mute colors. To check the color mode of a given image, check under Image > Mode.

Also, try to create the image in your intended file size before you try to save it. The "Save for Web" dialog does allow you to change the size of the image there, but gives you less options in terms of cropping, stretching, and scaling images. If you try to "Save for Web" any image that is too large, you may experience out of memory errors and slow performance.

File Types

All images can be divided into two file types: Lossless or lossy. For anyone familiar with digital music files, images operate on very similar principles. Lossless images are compressed but do not suffer any loss in image quality or information (like .wav or .flac files in music) while lossy images undergo heavy compression that results in a loss of quality and information (like .mp3 files).

The most common lossy image file is a JPEG while the most common lossless image files are GIF, PNG, and TIFF. In general (although there are some exceptions), lossy image files will be smaller in file size and therefore load more quickly.

JPEG

Most photographs are saved as JPEGS. Some cameras don't even allow you to take lossless photos while others allow you to take in the RAW format, which can then convert to TIFF. When you enter the "Save for Web" dialog and select to save an image as JPEG, you will then be able to choose what quality of JPEG to save as. While Photoshop has their own benchmarks (low, medium, high, and max quality), I prefer just choosing from the spectrum of 1-100, using the preview to determine whether or not it's too pixilated.

While photographs are the most common JPEG image files, often times sites will save headers and icons as JPEGs to keep file sizes small and loading times short. Most of the time, people will not be able to notice the lossy compression of a JPEG unless they blow up the image or it is compressed to an incredibly low measure (like below 40%).

GIF

GIF images use a palette of up to 256 individual colors, which makes it great for web graphics that don't use a wide spectrum of colors. Since GIFs are lossless, you will notice sharper edges and noiseless colors as opposed to those same images saved as JPEGs. GIFs are the smallest sized lossless images that I'm covering; just be sure not to use GIF if your image has a lot of different colors or smooth gradients. Then JPEG (for smaller sizes) or PNG (for sharper detail) would be preferred.

PNG

PNG images are the beastly file types of graphic design. They are lossless like GIFs, but support a significantly larger color pool and can even support transparent layers. That's right, you can use PNG images that are slightly or fully transparent at certain parts of the image!

PNGs are higher quality than both GIFs and JPEGs, but this usually comes at the cost of larger image sizes and slower loading times. For graphics sporting sharp lines or text that must be very clear, PNGs are probably the way to go. Of course, it's best to experiment, saving an image under multiple file types to see what looks best and at what cost of file size.

Guest Writer
Alvina Lopez

Alvina Lopez is a freelance writer and blog junkie, who blogs about accredited online degrees. She welcomes your comments at her email Id: alvina.lopez @gmail.com.

Saving For the Web Featured Image Photo Credit: rmgimages

Share Our Article With Your Friends

     

Have an opinion about our article? Please share your thoughts in the comments below.

Be sure to stay tuned: follow us on Twitter, become a fan on Facebook and grab the RSS.

Related Articles

Are you interested in reading other topics like this one? If you are then select from the following blog articles or page through the next or previous article and continue reading.



← PHP Skill Set Tutorial

Share Your Own Opinion

Nibbler report for zero3computers.com >