• Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

Downsizing Images (Storage wise)

 
Joe Ridener
Ranch Hand
Posts: 88
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Sheriff
Posts: 2989
12
Firefox Browser IntelliJ IDE Java Mac Ruby
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Author and ninkuma
Marshal
Pie
Posts: 65120
91
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Ranch Hand
Posts: 88
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Sheriff
Posts: 2989
12
Firefox Browser IntelliJ IDE Java Mac Ruby
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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.



The z-index 0 should (I think) make the image paint behind anything else in the window.
 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 65120
91
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
author
Ranch Hand
Posts: 297
5
Android Fedora Firefox Browser
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Are you doing 'Save As' or 'Save for web'?
 
Joe Ridener
Ranch Hand
Posts: 88
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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.
 
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic