Full Screen JPG Web site help

[liketom]

using a photo as a background on one of my websites , question is on file size i can convert down to JPG and B/W with least compression and it will still come out around the 200k mark is there a better way of getting my file sizes down and at a better res as well ?


here is a sample of what i mean ! please any help would be cool

thanks

http://homepage.mac.com/thestringer/Liketom.htm

 

[Blue Velvet]

What is your imaging software? Photoshop?

You're not going to get increased resolution but what I think you're after is a sense of sharpness.

Unfortunately, that will keep the JPGs files size large... blurring/softening is a common technique to reduce the size of web jpgs.

If you have Pshop you could try saving it as a GIF (save for web) with a bit of messing with the number of colours and the dithering... that can reduce file sizes quite effectively sometimes...

 

[liketom]

What is your imaging software? Photoshop?

You're not going to get increased resolution but what I think you're after is a sense of sharpness.

Unfortunately, that will keep the JPGs files size large... blurring/softening is a common technique to reduce the size of web jpgs.

If you have Pshop you could try saving it as a GIF (save for web) with a bit of messing with the number of colours and the dithering... that can reduce file sizes quite effectively sometimes...

mmm GIF's good idea will try that o and handy tip on the blurring/soft thing

thanks

EDIT : yep using photoshop , just got it so im a newbie to it

 

[iGav]

Don't use Photoshop, use either ImageReady or Fireworks.

 

[Blue Velvet]

...use either ImageReady...

Ah, god. That's the problem with doing stuff for print all the time... I always forget about ImageReady. Don't think I've even looked at the CS version...

The man is right.

 

[ChicoWeb]

The only reason to save images as gif's, is if they are flat files. Your picture of the grass isnt' flat, so saving it as a gif will only add to your file size. An image like that needs to be saved as a jpeg (Photoshop, file>save for web) from there you can mess around with the quality. 200k is prety large for an image on your introduction page.

 

[Blue Velvet]

The only reason to save images as gif's, is if they are flat files. Your picture of the grass isnt' flat, so saving it as a gif will only add to your file size. An image like that needs to be saved as a jpeg (Photoshop, file>save for web) from there you can mess around with the quality. 200k is prety large for an image on your introduction page.

I have to disagree... one of the small things I have to do after I design a publication cover is give the web guys a 200px wide image to go up in the online shopping bit of the site... Properly created GIFs will always be smaller than a JPG albeit with a restricted colour range and an amount of dither...

My avatar is a GIF – far smaller in file size than the equivalent JPG.

 

[decksnap]

My avatar is a GIF – far smaller in file size than the equivalent JPG.

Maybe, but you can tell it's a gif if you know what I mean. the moral is that jpegs and gifs both have their place, and you have to experiment a bit to find the best result for a given circumstance. Gifs DO tend to be the obvious option for lots of flat color stuff, and jpegs for photography, yet for each their are still exceptions.

Looking at this example, a gif might be doable considering it's monochromatic.

 

[iGav]

I have to disagree...

In a way technically ChicoWeb is correct, but sometimes it's better to make a side by side comparison to compare quality, and that's where ImageReady comes into it's own, as opposed to continuously going to File/Save For Web in Photoshop.

I've used GIF's for photo's when the accepted way should have been to use a JPEG purely because I could get a better trade off in quality and size using a GIF, it just depends on the actual image you're intending to compress, there's really no hard and fast rules about compression.

When I used to lecture in design, I used to have to explain as part of the course curriculum the differing compression formats in detail, yet at the end of the lecture I'd always ended up explaining that if the goal is ultimate image quality, sometimes (if they had the time) make a comparison between compression methods because they really might end up surprised by the results rather than blindly adhering to the GIF's for flat colours and JPEG's for photographs rule.

 

[whocares]

On a related note 'bout GIFs:

If I create a GIF with an adaptive/perceptual colour table, will the image display ok over the web (ie more or less the same as on my comp)?

This may be a silly question, but it's always tickled me.

 

[rendezvouscp]

Personally, I'd go with PNG, since it's generally lossless and has very small file sizes. Or maybe I'm ignorant of what's keeping PNG from being an option...
-Chase

 

[Blue Velvet]

Personally, I'd go with PNG, since it's generally lossless and has very small file sizes. Or maybe I'm ignorant of what's keeping PNG from being an option...
-Chase

Is it supported by the majority of installed browsers these days?
i.e. IE on Windows? Not something I use a hell of a lot, i must admit.

 

[decksnap]

I don't see how the PNG could be smaller in size... but there are compatilibilty issues with it also.

 

[rendezvouscp]

The only compatibility issues I have found is with alpha transparency in PNGs with IE and a few random browsers. Otherwise, to my knowledge, PNG is supported by almost every browser out there.
-Chase

 

[ChicoWeb]

I have to disagree... one of the small things I have to do after I design a publication cover is give the web guys a 200px wide image to go up in the online shopping bit of the site... Properly created GIFs will always be smaller than a JPG albeit with a restricted colour range and an amount of dither...

My avatar is a GIF – far smaller in file size than the equivalent JPG.

The file compression for .gif was intended for flat files. JPG was intended for images with depth and more dimension. I'm not saying that a .gif will always be larger in every case, but you may loose clarity. Try taking an image with depth (a picture of a person, place, etc) and slice it in two using the slice tool, save for web. Make one side a gif and one a jpeg. You'll probably notice that the gif image at the same file size is more pixelated and grainy. It is not going to be identical in every case and espeically in small images like your avatar.

But like someone said above, use what looks the best and the smallest file size, but I'd be willing to bet that image the thread starter is using is going to look like crap as a gif. But hey what do i know.

 

[ChicoWeb]

Case in point.
http://www.chicowebdesign.com/development/forum/test.html

 

[mnkeybsness]

Chico: you should be using the same image for each file... it is a much better test as different colors (amounts of colors etc) have a great affect on file sizes for images.

Here's the rundown on PNG vs GIF...

PNG images compress about as much as GIF images but have a lot less dither in them (if any at all). The only real problem with PNGs is that the color palettes get messed up depending on browser and operating system. Find a PNG and open it with Safari and Firefox on the same computer at the same time, you will see a difference. The only part about PNG that is not supported is alpha transparency. Stupid arse Internet Explorer on Windows needs to be forced to run the alphaImageLoader in order to make the transparency work. This requires javascript and the user will almost always see the images flash during page load with a grey background color to a transparent one.

 

[HeWhoSpitsFire]

Don't use Photoshop, use either ImageReady or Fireworks.

Save for web in Photoshop does have a 4up option, just as ImageReady.

They are the same file save engine. So it really doesn't make a difference.