JPEG's too large

[Antelope]

I've got some graphics that I want to put on a website, but they are too large and too many pixels, so it takes a long time to load (1700 KB to 11,000KB).

What is the optimum size for jpegs on webpages and what can I do to decrease the size of these. They are that large because they have high pixel #s.

 

[mkrausnick]

It sounds like what you have are digital camera files meant for printing high quality photographs. YOu don't need nearly that much resolution to display on the web.

Use a photo editing program like Photoshop, MS Image Editor (MS Office 2K) or MS Picture Manager (Office 2003) or one of the dozens of freeware image editors to re-size your images so they are whatever your desired screen-size is: 480x640 or 800x600 or 1024x768. Specify a low "pixels per inch" value. I use 72 pixels/inch for images in my Adobe PDF files.

An easier approach if you have lots of these might be to utilize slide-show software to create the web images from th full photos, then copy the smaller files to your web site. Again, there are lots of free ones out there that would work just fine. The one I use is called Jalbum. It creates a re-sized version of each photo in a separate directory.


Mike Krausnick
Dublin, California

 

[Foamcow]

The pixels per inch value means nothing in the case of working on screen.
All it does is confuse matters.

Work in pixels and not any other unit. Inches mean nothing so specifying a number of pixels per inch is worthless for on screen work.

Set your images to be a set number of pixels wide by a set number deep.

Pixels is pixels is pixels. If you make your image 400px x 200px then it will be that many pixels on anything it's viewed on.

It can be 400px x 200px and a million pixels per inch and it will still be the same size on screen and no larger in file size.



Foamcow Heavy Industries - Web design and ranting
Target Marketing Communications - Advertising, Direct Marketing and Public Relations
I wonder what possesses people to make those animated gifs. Do you just get up in the morning and think, "You know what web design r

 

[Foamcow]

I should also mention to make the images RGB (if you are working in CMYK). This will drop their size by a quarter too.

Foamcow Heavy Industries - Web design and ranting
Target Marketing Communications - Advertising, Direct Marketing and Public Relations
I wonder what possesses people to make those animated gifs. Do you just get up in the morning and think, "You know what web design r

 

[Kjonnnn]

I usually drop images into a table cell. I drop the ppi/dpi to 72 and specify the image to the dimension of the cell.

If my cell is 50 by 60, I resize the image to 72 and dropn the pixels down to fit that cell. You can still compress it you want.

 

[Foamcow]

Not that it really matters, but WHY do you drop the dpi/ppi to 72?

Foamcow Heavy Industries - Web design and ranting
Target Marketing Communications - Advertising, Direct Marketing and Public Relations
I wonder what possesses people to make those animated gifs. Do you just get up in the morning and think, "You know what web design r

 

[johnwm]

If you specify display size and don't resize the image first then the download will be the same and the browser will do the resizing. As Foamcow says, resize the image first to the pixel size that you want. When you specify display size (which you should to avoid ugly re-positioning on slow downloads), make the dispaly size the same as the actual (externally resized) image.
My camera takes pictures at 2048 x 1536. For website use I reduce that with one of the standard image processors (I use PSP) to typically 512 x 384. I then use on the webpage:

<img src="images/x.jpg" alt="alt text" width="512" height="384" />

In PSP you can specify compression when you save as JPG which will help downloads if applied judiciously

________________________________________________________________
If you want to get the best response to a question, please check out FAQ222-2244 first.
'If we're supposed to work in Hex, why have we only got A fingers?'
Drive a Steam Roller

 

[Foamcow]

Well, what I am saying is that if you resize your image in an editor like PSP or Photoshop, and you specify a size in pixels then it makes NO difference what ppi/dpi you use.

A 400px x 300px image is the same filesize whether it is 1 dpi or 1 million dpi. It will be around 350Kb. Go ahead, try it.

It will ALWAYS be 400px x 300px. On an 800x600 monitor it will fill about a quarter of the screen.


dpi/ppi only matters when the image is intended for print.

Foamcow Heavy Industries - Web design and ranting
Target Marketing Communications - Advertising, Direct Marketing and Public Relations
I wonder what possesses people to make those animated gifs. Do you just get up in the morning and think, "You know what web design r

 

[johnwm]

I certainly agree about the dpi (only relevant to printed images)

However if you do a 'Save As' to jpg in PSP, and select the Options button you can then choose your own compression ratio.

400x300 at 20% compression = 37.3K
400x300 at 50% compression = 22.1K
400x300 at 80% compression = 12.3K
400x300 at 95% compression = 5.1K

Clearly at 95% compression you will find pixellation is unacceptable, but you can choose what level to compress to. As I said earlier, choose judiciously!

________________________________________________________________
If you want to get the best response to a question, please check out FAQ222-2244 first.
'If we're supposed to work in Hex, why have we only got A fingers?'
Drive a Steam Roller

 

[Foamcow]

Of course compression matters. For "normal" sized web use you can normally get away with a compression level of about 60-70% without too many problems.

Because of the way JPEG compression works you will get different size/quality results with different image content.

I don't know about PSP, but Photoshop has a handy "Save for Web" option that lets you alter compression levels, apply blurring etc while seeing a "live" preview of the file.

Foamcow Heavy Industries - Web design and ranting
Target Marketing Communications - Advertising, Direct Marketing and Public Relations
I wonder what possesses people to make those animated gifs. Do you just get up in the morning and think, "You know what web design r

 

[johnwm]

.....looks like we're in complete agreement then Foamcow , and we seem to have answered the original question completely! I hope it didn't sound as if I was disagreeing, I only intended to amplify and expand on your answer.

________________________________________________________________
If you want to get the best response to a question, please check out FAQ222-2244 first.
'If we're supposed to work in Hex, why have we only got A fingers?'
Drive a Steam Roller

 

[Foamcow]

hehe

Foamcow Heavy Industries - Web design and ranting
Target Marketing Communications - Advertising, Direct Marketing and Public Relations
I wonder what possesses people to make those animated gifs. Do you just get up in the morning and think, "You know what web design r

 

[ChrisHunt]

The last two or three versions of PSP have included "export to jpg/gif/png" functions, which give you a live preview of the file and let you alter the compression, pallette, etc. Very handy for shrinking those file sizes.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd