Sizing pictures that you're going to imbed in posts (tutorial)

Uncle Frank

Forum Pro
Messages
21,511
Solutions
1
Reaction score
252
Location
San Jose, US
The reason we have cameras is that we like to take pictures and share them with our family and friends. It's particularly fun to do so on the Nikon Talk Forum, to show our fellow photographers our latest work, or illustrate a technical point, and Phil has made it easy by allowing us to imbed pictures in our posts. Actually, we're imbedding a direct link to some other website that's hosting our pictures, but the result is, our pics show up on the screen as part of our post.

A problem arises, when folks imbed pictures that are too large in pixel dimensions, which requires scrolling to see them, or large in file size, which takes too long to download before we can see them, particularly for those with dial-up internet connections. The problem is, some of us are unaware of the problem, and others don't know how to fix it. It's actually a two part fix, involving pixel dimensions and image quality (compression).

Here's a link to an untouched image directly out of my 5700. You really don't want to click on it though, because it's too huge to be of use. The pixel dimensions are 2560X1920 (5MP), and it was taken in the "fine" quality mode, which resulted in a file size of 1,653,901 bytes.

http://www.pbase.com/image/19094478

The first step would be to downsize it, so it can be seen on most people's monitors without scrolling. Easy enough to do in Photoshop. Just go to [image], click on [image size], and change the width to 640 pixels, which automatically changes the height to 480 pixels in this case. That's still pretty large, but can be seen in one shot on anyone's monitor running a resolution of 640X480, which is most everybody these days. Problem fixed, right?

No. Because if you save this picture and upload it to your hosting website without changing anything else, it will result in a file with a size of 477KB, which is still a huge download. Try it and see.

http://www.pbase.com/image/19094479

When you alter an image in Photoshop and go to save it, the program first asks you to name the file, and then asks you to specify [jpeg options]. It gives you the option of changing the compression of the file by moving a slider to select a number ranging between 0 (lowest quality/highest compression) and 12 (highest quality/lowest compression). At the bottom of that screeen , it actually allows you to preview the file size that will result from the degree of compression you choose.

Nobody wants to show a poor quality picture, but guess what? Quality is used in a different sense in Photoshop. Here's an example of my huge picture, downsized to 640X480, at several different "quality" levels. Let's see if you can spot a significant difference:

Compressed to level 8 (158KB)



Compressed to level 5 (108KB)



Compressed to level 2 (63KB)



I've got old eyes, but for purposes of sharing a picture with friends on this forum, I don't see much difference at all.

My own approach is to downsize pics to 640 pixels in the largest direction, and select a level of quality/compression that will result in a file in the range of 100KB. That makes them easy to see, and quick to download. I hope you'll all consider doing the same.

Thanks to Midnight2 for motivating me to write this little piece.

--
Warm regards,
Uncle Frank, FCAS Charter Member, Hummingbird Hunter
Coolpix fifty seven hundred and nine ninety five
http://www.pbase.com/unclefrank
 
Frank...I think I have been guilty of posting file sizes a little large...you tend to forget if you don't have a dialup.
 
Frank...I think I have been guilty of posting file sizes a little
large...you tend to forget if you don't have a dialup.
Yeah, me too. It's really not so bad if you've only got one picture imbedded, but if you have several in one post, it makes it a chore for the dial-up contingent.

--
Warm regards,
Uncle Frank, FCAS Charter Member, Hummingbird Hunter
Coolpix fifty seven hundred and nine ninety five
http://www.pbase.com/unclefrank
 
compressing! I didn't understand that though I have read stuff about it! Your explanation and directions are simple enough for those like me who know little more about the computer than how to turn it on and are so new to digital cameras that all the jargon is like greek! I'm off to photoshop to take a stab at compressing something!
--
Ann
CP 5700
 
Hi Frank -

This is such a great tutorial and a wonderful idea, considering all the discussions about forum use that I've been trying to catch up with since I got back from the Keys kayaking trip! Can I add this one to our tutorial section on the Challenge site?

--
ME
Coolpix FiftySevenHundred, d-OneHundred & a boat
http://www.computerinsite.com/5700/
==================
 
Hi Frank -
This is such a great tutorial and a wonderful idea, considering
all the discussions about forum use that I've been trying to catch
up with since I got back from the Keys kayaking trip! Can I add
this one to our tutorial section on the Challenge site?

--
ME
Coolpix FiftySevenHundred, d-OneHundred & a boat
http://www.computerinsite.com/5700/
==================
--
Warm regards,
Uncle Frank, FCAS Charter Member, Hummingbird Hunter
Coolpix fifty seven hundred and nine ninety five
http://www.pbase.com/unclefrank
 
For users of Photoshop or Photoshop Elements:

After resizing as Uncle Frank noted in Part 1, PS makes it east to decrease the file size to a manageable 100kb.

With the resized photo open, go to File/Save for Web.

This handy program will automatically convert the photo to a JPEG file if it is in another format. It will show 2 views of the photo: before and after.

The file size is shown under each photo, and the after photo also shows the download time for a dial-up modem.

On the right side of the frame is a "Quality" slider that goes from 0-100. Simply move the slider until the after photo shows a file size of ~ 100kb, then click "Done"

--
Ron
CP5700
http://www.pbase.com/ronhrl
 
to my eye there is a slight deterioration in sharpness from 1 to 3,
but I do agree, for sharing 3 is more than adequate.
Try this test, Randy. Import all three versions into Photoshop, and place them as layers, on top of each other. Then use the magnifying glass to zoom the image to full screen size. Use the eyeball icon on each layer to click from one to the other, and see if you can spot differences. I found none between the quality level 5 and 8 images, and a very slight softening in the level 2 image. So based on this particular sample, there is no degradation until the file size was reduced below 100KB, which was my recommended target size for a 640X480 pixel presentation.

--
Warm regards,
Uncle Frank, FCAS Charter Member, Hummingbird Hunter
Coolpix fifty seven hundred and nine ninety five
http://www.pbase.com/unclefrank
 
Uncle Frank:

Thank you. Mike
The reason we have cameras is that we like to take pictures and
share them with our family and friends. It's particularly fun to
do so on the Nikon Talk Forum, to show our fellow photographers our
latest work, or illustrate a technical point, and Phil has made it
easy by allowing us to imbed pictures in our posts. Actually,
we're imbedding a direct link to some other website that's hosting
our pictures, but the result is, our pics show up on the screen as
part of our post.

A problem arises, when folks imbed pictures that are too large in
pixel dimensions, which requires scrolling to see them, or large in
file size, which takes too long to download before we can see them,
particularly for those with dial-up internet connections. The
problem is, some of us are unaware of the problem, and others don't
know how to fix it. It's actually a two part fix, involving pixel
dimensions and image quality (compression).

Here's a link to an untouched image directly out of my 5700. You
really don't want to click on it though, because it's too huge to
be of use. The pixel dimensions are 2560X1920 (5MP), and it was
taken in the "fine" quality mode, which resulted in a file size of
1,653,901 bytes.

http://www.pbase.com/image/19094478

The first step would be to downsize it, so it can be seen on most
people's monitors without scrolling. Easy enough to do in
Photoshop. Just go to [image], click on [image size], and change
the width to 640 pixels, which automatically changes the height to
480 pixels in this case. That's still pretty large, but can be
seen in one shot on anyone's monitor running a resolution of
640X480, which is most everybody these days. Problem fixed, right?

No. Because if you save this picture and upload it to your hosting
website without changing anything else, it will result in a file
with a size of 477KB, which is still a huge download. Try it and
see.

http://www.pbase.com/image/19094479

When you alter an image in Photoshop and go to save it, the program
first asks you to name the file, and then asks you to specify [jpeg
options]. It gives you the option of changing the compression of
the file by moving a slider to select a number ranging between 0
(lowest quality/highest compression) and 12 (highest quality/lowest
compression). At the bottom of that screeen , it actually allows
you to preview the file size that will result from the degree of
compression you choose.

Nobody wants to show a poor quality picture, but guess what?
Quality is used in a different sense in Photoshop. Here's an
example of my huge picture, downsized to 640X480, at several
different "quality" levels. Let's see if you can spot a
significant difference:

Compressed to level 8 (158KB)



Compressed to level 5 (108KB)



Compressed to level 2 (63KB)



I've got old eyes, but for purposes of sharing a picture with
friends on this forum, I don't see much difference at all.

My own approach is to downsize pics to 640 pixels in the largest
direction, and select a level of quality/compression that will
result in a file in the range of 100KB. That makes them easy to
see, and quick to download. I hope you'll all consider doing the
same.

Thanks to Midnight2 for motivating me to write this little piece.

--
Warm regards,
Uncle Frank, FCAS Charter Member, Hummingbird Hunter
Coolpix fifty seven hundred and nine ninety five
http://www.pbase.com/unclefrank
 
Uncle Frank,
Link below to file size test results using MS Photo Editors...
http://forums.dpreview.com/forums/read.asp?forum=1007&message=5603013

Question - Re-sizing the photo to 600 dpi (long side) quickly reduces the file size. Adding higher JPEG compression decreases it more. You can also end up with about the same file size using JPEG compression alone...

In the tests I did, re-sizing to 600 dpi with JPEG at 95% (5% Compression), -and- No re-sizing with JPEG at 20% (80% compression) result in about the same file size. However, I suspect there is some fundamental difference in the quality of the resulting image files, and what you can do with them later on...

Could you please explain the difference in the resulting image quality / characteristics between using "re-sizing" and using "JPEG compression" to obtain about the same resulting file size.
Thanks.
--
~ Rob Steinle ~
C o o l P i x - 5 7 0 0 ~ T C O N - 1 . 7 ~ S B - 8 0 D X
 
Question - Re-sizing the photo to 600 dpi (long side) quickly
reduces the file size.
I'm confused by that statement, Rob, because dpi (dots per inch) refers to printer resolution. Image resolution is in pixels and has no physical dimensions. I'm not familiar with your editing software, but could you verify they actually used the term "dpi"?

--
Warm regards,
Uncle Frank, FCAS Charter Member, Hummingbird Hunter
Coolpix fifty seven hundred and nine ninety five
http://www.pbase.com/unclefrank
 
Question - Re-sizing the photo to 600 dpi (long side) quickly
reduces the file size.
I'm confused by that statement, Rob, because dpi (dots per inch)
refers to printer resolution. Image resolution is in pixels and
has no physical dimensions. I'm not familiar with your editing
software, but could you verify they actually used the term "dpi"?

--
Warm regards,
Uncle Frank, FCAS Charter Member, Hummingbird Hunter
Coolpix fifty seven hundred and nine ninety five
http://www.pbase.com/unclefrank
Uncle Frank,

You are Right! (again as usual...) I just opened the editing software, and when changing the size of an image.... Image - Resize.... the choices are... Cm - Inches - Pixels (comming from an IT background.... I just automatically think.... dpi (dummy me)

But aren't Pixels... pretty much the same as Dots.... Each one represents some color.... You put enough together and you have a line... Add enough lines and you have a picture (more or less)...

Don't pixels have to be represented by some physical dimension when they are displayed on a CRT or Printed.... Like my screen can display many different resoluations... I can change the settings... In which case the apparent size of the pixel elements changes.... Now it is set for 1024 x 768. I could take it as high as 1280 x 1024.... More info will fit on the screen, but it is all a lot smaller... harder to read...

I'm sure glad you understand this stuff...
Thanks
--
~ Rob Steinle ~
 
You NEVER used to brag about these LARGE files LOL

Or was it because you didn't have these large files before. Just kidding, glad to see that you are having fun with the New 5700, as always your stuff looks great. I sold mine and should be getting my D100 in about 3 to 4 weeks. THings are picking up and moving, (finally)
Thanks for a great post!
Michael,
SHooT FIRST, Ask questions later.
Fuji S602 PRO, Fuji 4900, Nikon 5700, Olympus E-10 & D-600L
 
A pixel can be any number of colors, Rob. A printer only has a few colors in its ink tanks. Unless a pixel happens to be one of them, the printer has to lay several dots of color close to each other in order to replicate it. For purposes of this discussion, let's say it will take 3 dots, on the average, to replicate one pixel.

Now lets take one of those pictures that you have downsized to 600 pixels in the widest direction, the horizontal direction in this case. If you instruct your editor that you want it sized for a 6" wide print, it will create a file that will tell the printer to replicate 600 pixels for each 6" line, or 100 pixels per inch. In order to do that, the printer will have to have a resolution of at least 300 dots per inch.

For photographic quality prints, the standard assumption is you should provide 300 pixels per inch, which means you'll need a printer that has a resolution of at least 900 dpi.

For web presentation, the size of a picture a viewer will see will depend on the resolution of their monitor and it's physical size. If you send a 600 pixel wide image to a view who has their monitor's resolution set at 800 by 600, the image will be spread across 600/800ths, or 75% of their screen width. If the size of that monitor is 20" wide, the picture would appear to be 15" across. But if the viewer has their 20" wide monitor's resolution set at 1280X1024, as I do, the 600 pixel wide image would only be 600/1280 X 20" = 9.38" wide.

Pretty confusing, and I still get get pixels and dpi mixed up at times.
--
Warm regards,
Uncle Frank, FCAS Charter Member, Hummingbird Hunter
Coolpix fifty seven hundred and nine ninety five
http://www.pbase.com/unclefrank
 
You NEVER used to brag about these LARGE files
I wasn't very big back then :-).
I sold mine (5700) and should be getting my
D100 in about 3 to 4 weeks.
Excellent. I hope you got a good price for it. Please make sure to share some of the pictures/excitement from your new dslr. I'll bet you're going to love it.
--
Warm regards,
Uncle Frank, FCAS Charter Member, Hummingbird Hunter
Coolpix fifty seven hundred and nine ninety five
http://www.pbase.com/unclefrank
 
Excellent instructions to those of us just starting out with online posting of images to this webste. Thanks!
 
Thanks for the reminder Uncle Frank. I still have to go back to my pbase site and replace some of mine. When I first started out I kept everything below 200. Usually in the 150 range. Then wised up a bit and shoot for less than 100. I learned this the hard way when I tried to upload a shot to a photo site other than pbase one time and it had a limiter on it and would not let any file greater than 100 upload. Now that was a nice way to remind me.
Thanks again.

Jim
Pbase Supporter - FCAS Member
http://www.pbase.com/jimroof
 

Keyboard shortcuts

Back
Top