Downsizing Images (Storage wise)

[Joe Ridener]

My images are for the backgrounds. They are not hugely complex and should not take up one megabyte. I am using the Adobe PS for this. How do I downsize images so that it takes up a moderate amount of KB's as opposed to a whole megabyte?

[Greg Charles]

Have you tried to save them as JPEGs? You should be able to select a compression factor. Higher compression means smaller files, but with a loss of quality. It might take some trial and error to get the right balance.

[Bear Bibeault]

How are you saving the images? Even a good size high-quality PNG won't take up megabytes. Are you saving them at some ridiculous resolution and size?

[Joe Ridener]

Yes I saved them as PNG files. They were about 1 mb in size and took a moment to load on a slower connection. The options for file formats included bitmap tiff and PNG. I am used to jpg, jpeg, gif and png so I chose png. not certain that a browser would display tiff or the photo shop file extension type formats.

The size I save was the actual size I wanted it to display. I am not certain how to display a background image and control the size. With an img tag you have height and width attributes but with the style attribute background-image you do not have the option of resizing it that I know of. Scaling the image down to 1/3 or so of its actual size would work. But it would display that size and not display properly. For example if you have a large screen size by width. You'll see... even at 1000 pixels of horizontal resolution the image repeats itself on the right of the screen http://www.joerdesigner.net/Sitemap/employers.html

[Greg Charles]

I'm not a Photoshop guy, but I know it can definitely save images as JPEGs. There may be a need to reduce color depth first, but the online help or a Photoshop forum would help you with that.

Now, if I understand you right, you want your background image to scale based on the browser window size. I don't know how to do that directly, but if instead of using a background image, you just defined a regular image right under the body tag, and gave it a class background, then this CSS should do the trick for you.

<style> .background { top: 0; left: 0; position: absolute; width: 100%; z-index: 0; } </style>

The z-index 0 should (I think) make the image paint behind anything else in the window.

[Bear Bibeault]

What image are we talking about? The gradient? Why aren't you just using CSS for that?

That said, a JPEG is fine for that type of image where the lossy-ness would be irrelevant.

Images where quality is more important, or that use the alpha channel, need to be PNG.

And all that said, there's still no need for even a large PNG to be megabytes.

[Rob Crowther]

Are you doing 'Save As' or 'Save for web'?

[Joe Ridener]

Rob Crowther wrote:Are you doing 'Save As' or 'Save for web'?

I was using the save and save as.... I got it fixed..

I got it fixed though... I just used a img tag and set the z-index on it. Could also have used the background attribute in CSS3 as well.. with a background-size attribute. Thanks antway.