How in the world is it so small?

[Jordanisaboy]

Hey everybody this is my first post on this forum but I look forward to any help you might be able to provide.

I recently came across this background image in a band's Myspace layout.

http://toothandnail.com/ivoryline/myspace/bg.jpg

The image loaded remarkably fast so I opened up the image properties and was surprised to find that this large .jpg was under 200kb

The majority of my work recently has been designing layout for musicians on Myspace and creating a background image that loads quickly is a top priority. In order to achieve small file sizes I've been creating .PNG files and using the Save for Web option in photoshop to decrease the size as much as possible without losing a whole lot of color or definition.

I copied the image in question into my photoshop and used the Save for Web option with it set to JPG and on my program I couldn't even get the file size below 600kb.

Could anyone please explain to me how the artist who created this image was able to get it under 200kb?

[urstwile]

What quality setting are you using when you do a Save for Web? If you choose Maximum or even High, that will give you a larger file. If you choose Medium, it'll come to 168KB. Of course, this image has already been saved as a JPEG, so this is not the best test, as the quality would degrade further, but for many images, JPEG Medium is fine, especially if it's for a background image where other stuff will be sitting on top of it.

[Jordanisaboy]

wow I'm an idiot, that works perfectly. Thanks for the help!

[urstwile]

Glad I could help. :)

[jScott_harris]

Jordan, you are right in trying to use PNG's however. Their quality is superior to other formats available on the web and there's more you can do with them in browsers other then IE. Now we just need to get microsoft on board.

[Jordanisaboy]

I have been using .PNG's for everything for a while now. I love that they can be transparent and how small they are. The PNG's are fine for everything else that I am doing but for these large background images it looks like .JPG's are actually a better choice! Thanks again for the help!

[Rexibit]

In Photoshop, when you Save for the Web, you can choose .jpg also. Jpeg images are notable for their ability to be reduced in quality (usually up to 30% left) and still maintain a good appearance. This will allow you to get the small file size you need.

The .png setting you use is great for transparent, small file sizes. However, it is only smaller than .jpeg on some respects. I would play with both to see what you get.

[natenation]

Is there a way to design to really take advantage of jpegs ability to do this and maintain maximum clarity? I know with gifs if you have larger areas of solid colors and not tons of details it's pretty easy.....

[Jordanisaboy]

Nate I thought there would be a reduction in quality with the jpeg but honestly it help up really well.

[jibble]

well...with flash you can do some cool stuff with images...like full screen images <200-250k with bitmapdataclass, but regardless, quite simply the lower the file size the less quality the image...

up to you really. speed or quality? nowadays speed is less and less a factor...so i go for quality.

[Savvywebdesign]

If you want to get those JPEGs even smaller, save them in a program other than Photoshop. IrfanView (free) and Fireworks (definitely not free) both compress JPEGs more efficiently than Photoshop does.