Home arrow Photoshop arrow Slicing and Saving Graphics in Photoshop for Use on the Web

Slicing and Saving Graphics in Photoshop for Use on the Web

Images are the number one leader of average bandwidth usage. Usually itís because the images that load on every single page are typically between a total of 60k and a total of 500k. That can easily make your bandwidth usage add up to beyond your limit per month. So what Iím going to be showing you is how you can cut your imageís file sizes in half, if not more.

Author Info:
By: James Murray
Rating: 4 stars4 stars4 stars4 stars4 stars / 33
July 27, 2004
  1. · Slicing and Saving Graphics in Photoshop for Use on the Web
  2. · Butcher your Graphics
  3. · I Like my Graphics Sliced Thin
  4. · Functional Formats
  5. · Please, Save Me!
  6. · Last Words

print this article

Slicing and Saving Graphics in Photoshop for Use on the Web
(Page 1 of 6 )

Byte This

Images are one of the most important parts of web design; they are also one of the most common design flaws on the web. If images arenít used in the correct fashion, they can cause pages to load slowly, use up expensive bandwidth, or even cause an image to timeout and leave a blank spot where the image should be. The bandwidth usage that images cause is typically due to the designer using the wrong format or not compressing the images correctly. For example if all your HTML and content is a total 8k and your images are a total of 112k, that means that every page load is using at least 120k of bandwidth. Divide that by the number of days in a month and youíll usually see that you can only have an average of 142 page views a day, or else youíll run out of bandwidth. Each visitor usually browses 5 to 6 pages before they leave a site; therefore, youíd only be able to serve 23 visitors a day. Which Iím sure isnít anyoneís idea of good traffic. Not to mention those calculations are only based on your average content and layout images, things like downloads and wallpapers eat away at your bandwidth really fast.

The best solution to this problem is to reuse images, and use smaller images which have smaller file sizes. Over the next few parts of this article Iím going to explain what the best image format is, the best image compression scheme, and the best image dimensions to use for the typical website layout.

blog comments powered by Disqus

- Photoshop Text Techniques: Transformers
- 3D Text in Photoshop
- Photoshop Text Tutorial: Creating Indy Text
- Photoshop Productivity Tips and Tricks
- Photoshop Keyboard Shortcuts
- The Critically Important Color and Gamma Cal...
- Using Adobe Photoshop CS, Part 2
- Using Adobe Photoshop CS, Part 1
- 20 Things About Photoshop You Have to Know
- Photoshop Tricks, Part 2
- Photoshop Tricks, Part 1
- Keeping Up Appearances: Techniques for Retou...
- Navigation Menus in Photoshop
- Slicing and Saving Graphics in Photoshop for...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials