• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Liutauras Vilda
  • Jeanne Boyarsky
  • Devaka Cooray
  • Paul Clapham
Sheriffs:
  • Tim Cooke
  • Knute Snortum
  • Bear Bibeault
Saloon Keepers:
  • Ron McLeod
  • Tim Moores
  • Stephan van Hulst
  • Piet Souris
  • Ganesh Patekar
Bartenders:
  • Frits Walraven
  • Carey Brown
  • Tim Holloway

Downsizing Images (Storage wise)

 
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?
 
Sheriff
Posts: 3034
12
Mac IntelliJ IDE Python VI Editor Java
  • 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.
 
Sheriff
Posts: 67266
170
Mac Mac OS X IntelliJ IDE jQuery Java
  • 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: 3034
12
Mac IntelliJ IDE Python VI Editor Java
  • 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
Sheriff
Posts: 67266
170
Mac Mac OS X IntelliJ IDE jQuery Java
  • 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.
 
author
Posts: 297
5
Android Firefox Browser Fedora
  • 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
Boost this thread!