Correct size for web

M
Posted By
MarcShepherd
Sep 22, 2006
Views
451
Replies
19
Status
Closed
Having difficulty in trying to size a picture for the web so that it looks crisp.

I have a nice tiff file I’m saving as a jpg for an image that accompanies a web ad. However, when I size it up and place it in the add, it’s very pixelated. Pictures in other ads from other posters don’t have this problem.

Is there a specific way of doing this so I can get some small images (let’s say 2×3) without it looking like a bunch of building blocks?

Must-have mockup pack for every graphic designer 🔥🔥🔥

Easy-to-use drag-n-drop Photoshop scene creator with more than 2800 items.

OO
Omke_Oudeman
Sep 22, 2006
Marc
What works for me is first re size to 10 x 15 cm then use Save for web (PSCS – file – save for web).

There are a lot options to play with but the standard with just set image size to 600 pixels suits me.

regards
Omke
AS
Ann_Shelbourne
Sep 22, 2006
What is the size and resolution of your Tif?

2" x 3" at 72 ppi means that you need an image of 144 x 213 Pixels for the web. Use the resize palette set like this to resize your Tif.

But do you really want it as small as that?

< http://www.pixentral.com/show.php?picture=1Lg0odUELvn9rasme2 Qi4h0twJrR1R>

Then convert to sRGB and use Save for the Web to create the JPEG (keeping the quality High).
M
MarcShepherd
Sep 22, 2006
The image is 37.7M

Pixel Dimension
Width: 2170 pixels
Height: 3034 pixels

Document Size:
7.233 inches
10.113 inches
300 Resolution

It needs to be small since it just accompanies the ad. (The ad company says the program will resize the image itself and that my image was too large thus the pixelization. No word, though, from them on how to fix it)
M
MarcShepherd
Sep 22, 2006
Hi Omke,

I tried what you said, but it still came out looking pretty rotten.

And what is so frustrating about this is that it’s basic PS 101 stuff I really should know.
B
Bernie
Sep 22, 2006
Can you post a link to this website?
M
MarcShepherd
Sep 22, 2006
Hi Tom,

It’s rather long but here it is:

www.southeasttexas.com/classifieds/detail.cfm?id=143160& classified_code=wedding_items&zipcode=&distance=0
P
Phosphor
Sep 22, 2006
OK…I see one problem straight away.

That is, you have uploaded a photo which is sized differently (in pixel dimensions) than the space the newspaper’s website has specified for it. That means that it’s being resized to dimensions that are beyond your control through the use of height and width attributes tags in the HTML. That is NEVER good.

Sooo, once you have resized your image in Photoshop, make sure that it is sized—by you—to the exact dimensions they’re asking for, so that this doesn’t happen.
B
Bernie
Sep 22, 2006
Link. < http://southeasttexas.com/classifieds/detail.cfm?id=143160&a mp;classified_code=wedding_items&zipcode=&distance=0>

Is that your ad?

None of the photos look that great.
They reduce the file size to about 16kb.

Some of the other photos are 300 x 225.

Maybe you can sharpen a bit before you go to Save for web.
M
MarcShepherd
Sep 22, 2006
Thanks Tom.

You put in a great effort to help me out.

That’s the ad sight, alright. You’re correct. The other ads don’t look that great. However, mine looks downright terrible.

I went in an changed the settings on the Save for Web (CS2 version), using the 300 x 419. Still no difference.
M
MarcShepherd
Sep 23, 2006
I’ve had to go back to the original image I have been using for a month or so. While it’s not the greatest, it’s better than the new one I’ve been trying to use.

I’m just at a loss as to what’s going on with the quality.

Thanks
P
Phosphor
Sep 23, 2006
Please post a link to one of your full-sized images…or a similarly sized example. Preferably a PSD or TIFF.

No worries about huge file size.

Perhaps you could upload to <http://www.yousendit.com> Send the link to your own email address, then post the link here.
M
MarcShepherd
Sep 23, 2006
A link to my website is www.inframepictures.com

I’m still new to the web game. Therefore, I’m not quite sure how to set up the site to post tiffs and photoshop files.
M
MarcShepherd
Sep 23, 2006
I’m uploading the TIFF to yousendit. However, it’s going to be about 15 minutes. Seems kind of long…
M
MarcShepherd
Sep 23, 2006
P
Phosphor
Sep 23, 2006
Well, shoot!

My suggestion about sending the YouSendIt link to yourself, then posting that link here was a bum steer. It requires that anyone who wants to download it must be logged in. I’m not creating an account just to do that, plus it may be tied to YOUR account, so any of us logging in may not work anyway.

Siiiiigggghhhh….

🙁

Can you pop the full size TIFF up on your own server space? Just ZIP compress it (Control + Click—»"Create Archive of…."), upload it, and post the link to it.

BTW…if you add "http://" before your "www" address, it will make the links you post directly clickable.
M
MarcShepherd
Sep 23, 2006
Too bad it didn’t work.

I need to check with my web server. It’s SmugMug and they allow only certain formats. Let me give it a shot.
M
MarcShepherd
Sep 23, 2006
OK. The site won’t allow me to save any TIFF or PSD formats. However, I’ve loaded a pretty large jpeg which can be copied and saved as a TIFF.

You can find it here:

<http://www.inframepictures.com/gallery/1695068/2/97212243>

Thanks for the help on this.
P
Phosphor
Sep 23, 2006
OK.

I grabbed the full-sized JPEG. (2170 × 3034 pixels)

I did a size reduction, all in one step, resizing it to the "Specified Size" as shown in the screen grab I posted above—to 300 × 419 pixels. Did just a wee bit of Unsharp Masking on the resized image, then did a "Save For Web" at a JPEG setting of 100%

Below is the result (about 118 KB).

If you do this same procedure and still get crappy photos when they’re uploaded, then the script on the newspaper’s website is recompressing at a severely low value.
M
MarcShepherd
Sep 23, 2006
Looks great. I posted it to the web as a test and it’s still pretty low resolution. I checked more of the specs for posting pics and they’re wanting pictures no more than 50K. So, they’re really compressing them. I’ll leave the image up for the awhile on the site if you have a chance to check out the quality.

< http://www.southeasttexas.com/classifieds/detail.cfm?id=1431 60&classified_code=wedding_items&zipcode=&distan ce=0>

Again, thanks.

Marc S

How to Master Sharpening in Photoshop

Give your photos a professional finish with sharpening in Photoshop. Learn to enhance details, create contrast, and prepare your images for print, web, and social media.

Related Discussion Topics

Nice and short text about related topics in discussion sections