Tek-Tips is the largest IT community on the Internet today!
Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!
-
Congratulations IamaSherpa on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!
redusing the size of an image for the web 2
- Thread starter Bealy
- Start date
-
2
- #4
The resolution of the graphic isn't really relevent in this case because we're talking about specific pixel dimensions rather than physical dimensions. For example, a standard web banner measuring 468x60 pixels is identical whether it's 72 dpi or 300 dpi.
Find out the pixel dimensions you need and use the Save for Web option as mentioned above. Even cropping and resizing the image down will save a lot of space : typical web banners are only around 80k BEFORE compression.
Also, certain image attributes compress really well (for example, areas of large flat color). Finally, try both JPEG and GIF formats to see which gives you the best trade off between size & quality (there's also PNG, but it's not as widely supported yet). All of this can be done interactively using the Save for Web option.
Find out the pixel dimensions you need and use the Save for Web option as mentioned above. Even cropping and resizing the image down will save a lot of space : typical web banners are only around 80k BEFORE compression.
Also, certain image attributes compress really well (for example, areas of large flat color). Finally, try both JPEG and GIF formats to see which gives you the best trade off between size & quality (there's also PNG, but it's not as widely supported yet). All of this can be done interactively using the Save for Web option.
DPI is relevant however if you aren't using the save for web it does anyway. 72dpi for the web, 300 for print. Simple.
The save for web option as deZiner and blueark stated is your best bet by far. -----------------------------------------------
These are endless galaxies which are yours.
You can journey to infinity
through the endless passages of the cosmos.
Even better. This all belongs to you.
This is your mind.
The save for web option as deZiner and blueark stated is your best bet by far. -----------------------------------------------
These are endless galaxies which are yours.
You can journey to infinity
through the endless passages of the cosmos.
Even better. This all belongs to you.
This is your mind.
A bit of confusion here I think... Traditionally, anything destined for screen display is referred to as 72 dpi (although it's not a very accurate measurement nowadays). The web as most people see it is a screen based medium, so many people think any graphics produced for it should be 72 dpi.
However, web browsers don't use this information, which is why it's irrelevent. If a banner graphic is 468 pixels wide, the browser just renders 468 pixels, period. Look at the Image Size dialog box in Photoshop. Turn off the resample checkbox and try a few different resolutions. They all render the same in a web browser because they all have the same pixel dimensions.
Of course, printing is a different matter entirely, and changing the resolution as described above will have a direct effect on both the size and quality of the final print.
I hope this clears things up a little!
However, web browsers don't use this information, which is why it's irrelevent. If a banner graphic is 468 pixels wide, the browser just renders 468 pixels, period. Look at the Image Size dialog box in Photoshop. Turn off the resample checkbox and try a few different resolutions. They all render the same in a web browser because they all have the same pixel dimensions.
Of course, printing is a different matter entirely, and changing the resolution as described above will have a direct effect on both the size and quality of the final print.
I hope this clears things up a little!
mscallisto
Technical User
As Blueark notes "cropping and sizing will save a lot of space" and usually is the best place to start.
There's something about reducing the number of colors to reduce size, maybe Blueark can comment on the following:
I remember reducing a .bmp by two thirds by:
Image, mode, index color
then reducing the colors from 250 to 100 (where I saw no significant difference in appearance).
After saving the .bmp it reduced the size from 800kb to 200kb.
I don't know what I'm doing when it concerns "indexed colors", I simply found this while experimenting.
There's something about reducing the number of colors to reduce size, maybe Blueark can comment on the following:
I remember reducing a .bmp by two thirds by:
Image, mode, index color
then reducing the colors from 250 to 100 (where I saw no significant difference in appearance).
After saving the .bmp it reduced the size from 800kb to 200kb.
I don't know what I'm doing when it concerns "indexed colors", I simply found this while experimenting.
A bit of background first. When dealing with web graphics, an image will ultimately be in one of two color modes. One is RGB Color, and the other is Indexed Color. RGB images can theoretically contain over 16 million colors, making them suitable for photographs etc, and are usually saved in JPEG format for the web. Indexed color mode gives you a maximum of 256 colors to work with, and are usually saved in GIF format for the web. As you point out, other formats, such as .bmp, can also handle these color modes.
So how does this affect file size? Well, for RGB, every pixel needs 3 bytes to store the color. You could think of it as 1 byte each for Red, Green & Blue. Indexed color, however, only uses 1 byte per pixel, so it will always end up a third of the size of RGB.
However, all this is based on uncompressed images. On the web, all the popular formats are compressed to speed up download times. In the case of indexed color images, reducing the amount of colors can help in a number of ways.
Firstly, there is a color table associated with the image which is basically an index of the 256 colors being used. If this table is reduced to 100 entries, the file size is slightly reduced.
Secondly, and more importantly, when an image is converted to Indexed Color mode, there are some colors that are practically identical, but are being dealt with as unique entries. An area of seemingly flat color can actually contain a subtle amount of 'noise' which can hinder compression techniques. Reducing the amount of colors effectively reduces some of the noise, and in turn makes the image easier to compress.
Obviously there is a lot more to compression than this, but hopefully this long rambling post has been of some help!
So how does this affect file size? Well, for RGB, every pixel needs 3 bytes to store the color. You could think of it as 1 byte each for Red, Green & Blue. Indexed color, however, only uses 1 byte per pixel, so it will always end up a third of the size of RGB.
However, all this is based on uncompressed images. On the web, all the popular formats are compressed to speed up download times. In the case of indexed color images, reducing the amount of colors can help in a number of ways.
Firstly, there is a color table associated with the image which is basically an index of the 256 colors being used. If this table is reduced to 100 entries, the file size is slightly reduced.
Secondly, and more importantly, when an image is converted to Indexed Color mode, there are some colors that are practically identical, but are being dealt with as unique entries. An area of seemingly flat color can actually contain a subtle amount of 'noise' which can hinder compression techniques. Reducing the amount of colors effectively reduces some of the noise, and in turn makes the image easier to compress.
Obviously there is a lot more to compression than this, but hopefully this long rambling post has been of some help!
mscallisto
Technical User
Thanks Blueark...very helpful and worth a star!
I also noticed that saving as a jpeg with quality = 1 (small) also reduced the size and in most cases did not degrade my pics.
(still a novice but learning thanks to you people)
I also noticed that saving as a jpeg with quality = 1 (small) also reduced the size and in most cases did not degrade my pics.
(still a novice but learning thanks to you people)
LittleHavoc
IS-IT--Management
In addition
Some sites have image upload restrictions on the size. You may also want to pass the image through another program if you need just a little more off the top. This is because Photoshop adds some information into the image as well as the image itself.
But don't think it will be that useful to your situation.
I was auto-scaling images with PHP, and GIF no-longer supported due to licencing problems so tried PNG.
Be aware that when I tried converting uploaded images into PNG to use it's transparency facility, they got 3 times as big as the original. So reverted back to Jpeg and a black background fill.
Some sites have image upload restrictions on the size. You may also want to pass the image through another program if you need just a little more off the top. This is because Photoshop adds some information into the image as well as the image itself.
But don't think it will be that useful to your situation.
I was auto-scaling images with PHP, and GIF no-longer supported due to licencing problems so tried PNG.
Be aware that when I tried converting uploaded images into PNG to use it's transparency facility, they got 3 times as big as the original. So reverted back to Jpeg and a black background fill.
- Status
Similar threads
- Locked
- Question