Hi, I hope someone can give me an answer to my query (in language I can understand...%-) I use PS7 to edit images (of product shots) I then upload onto a website, but am unhappy with the clarity of the images especially those products with writing on them. I use a variety of cameras (from 3MP 5, 6 8 and 10MP), at various settings; I then make my various changes to the image, save to web with the size being 600. The image look good when I Ctrl+, the image is lovely and clear, but when I Ctrl- so it's the size it will be on the web, the image becomes jagged/pixelated. How do I prevent this from happening? Is it a camera thing, should I be using PS7 more effectively (I don't have any training in PS7, just trial and error, sorry). I look forward to your comments, all will be helpful. thanks.
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 Chriss Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!
Uploading image on website without pixel effect
- Thread starter banana10
- Start date
...are you referring to 600 pixels or 600 kilobytes?
...when viewing graphics for the web, view at the pixel size under view > actual pixels, the monitor the user has viewing your images and web pages does have a factor, a higher resolution monitor than yours will display the image smaller...
...if using the 'file > save for web' option, view the images here at 100 %...
...i take it the final images uploaded are jpeg format?
...verify your settings using the 'file > save for web' option, do this once your original camera picture has been opened, the quality setting in this dialogue plays an important role as well as the resampling method...
Andrew
...when viewing graphics for the web, view at the pixel size under view > actual pixels, the monitor the user has viewing your images and web pages does have a factor, a higher resolution monitor than yours will display the image smaller...
...if using the 'file > save for web' option, view the images here at 100 %...
...i take it the final images uploaded are jpeg format?
...verify your settings using the 'file > save for web' option, do this once your original camera picture has been opened, the quality setting in this dialogue plays an important role as well as the resampling method...
Andrew
- Thread starter
- #3
Hi andrew,
Thanks for your reply, in answer to your questions:
are you referring to 600 pixels or 600 kilobytes? 600 pixels
.i take it the final images uploaded are jpeg format? Yes they are in jpeg format.
Can I verify the steps I go thru to upload an image:
1. open image in PS7
2. make changes such as cropping, colour, blurring, etc
3. save to web with size at 600 pixels
4. then upload onto website (where the image is resized to 72dpi)
Am I doing something wrong here? Is my camera setting incorrect - should it be the most pixels or medium or least pixels? Why is it other websites with similar product shots to mine don't have the same issues (btw, their images are larger on the screen thatn the ones on the website I am uploading onto).
Hope this gives you more info - I feel that I am perhaps missing a step and that the solution is very simple...
banana10
Thanks for your reply, in answer to your questions:
are you referring to 600 pixels or 600 kilobytes? 600 pixels
.i take it the final images uploaded are jpeg format? Yes they are in jpeg format.
Can I verify the steps I go thru to upload an image:
1. open image in PS7
2. make changes such as cropping, colour, blurring, etc
3. save to web with size at 600 pixels
4. then upload onto website (where the image is resized to 72dpi)
Am I doing something wrong here? Is my camera setting incorrect - should it be the most pixels or medium or least pixels? Why is it other websites with similar product shots to mine don't have the same issues (btw, their images are larger on the screen thatn the ones on the website I am uploading onto).
Hope this gives you more info - I feel that I am perhaps missing a step and that the solution is very simple...
banana10
Step 3 does not make sense. '600 pixels' is not clear. Is it 600 pixels per inch? Is it 600 pixels wide? Is it 600 pixels square? You would not say that your yard is 150 feet.
Step 4 does not make sense. An image does not change simply because it is transferred from your computer to a server. Please explain what process you believe is changing the resolution.
Step 4 does not make sense. An image does not change simply because it is transferred from your computer to a server. Please explain what process you believe is changing the resolution.
- Thread starter
- #5
Hi jimoblak,
To answer your questions, and please excuse my obtuseness, but my brain just can't seem to understand digital/PS7 terminology no matter how hard I try and figure it out...
Is it 600 pixels wide? Yes, in step 3, I make the image 600 pixels wide (or high) depending if it's portrait or landscape, because that's what my webmaster has told me to do. The webmaster also said to select 80 (something or other) but I actually now choose 100 (something or other) in the save to web section of PS7, hoping that this makes it clearer/better...and it doesn't.
And step 4, I logon into the admin section of the website, browse until I locate the image, select it and tell it to upload. I have assumed that the computer would be converting it, but perhaps it just uploads it, so that is my assumption being wrong here.
All I know, is that when I look at various websites, some images are clear even though they are small, and other images aren't. I know the images I photograph are clear when they are on the screen and shown 100% size. I can understand why images would look pixelated if the image is made too large because then all you see are the pixels as you have lost the clarity. What I don't understand is why is it when you decrease the size of an image, the image becomes distorted (loses it's sharpness), especially products with writing on them? So I know I'm either missing a step, doing something incorrectly, or expect way too much from the images.
I'm finding it all very frustrating, because I'm getting the same results on the screen whether I'm using a 3, 5 8 and even 10MP camera; so there has to be a step I am doing incorrectly...
Hope all this makes sense...
banana10%-)
To answer your questions, and please excuse my obtuseness, but my brain just can't seem to understand digital/PS7 terminology no matter how hard I try and figure it out...
Is it 600 pixels wide? Yes, in step 3, I make the image 600 pixels wide (or high) depending if it's portrait or landscape, because that's what my webmaster has told me to do. The webmaster also said to select 80 (something or other) but I actually now choose 100 (something or other) in the save to web section of PS7, hoping that this makes it clearer/better...and it doesn't.
And step 4, I logon into the admin section of the website, browse until I locate the image, select it and tell it to upload. I have assumed that the computer would be converting it, but perhaps it just uploads it, so that is my assumption being wrong here.
All I know, is that when I look at various websites, some images are clear even though they are small, and other images aren't. I know the images I photograph are clear when they are on the screen and shown 100% size. I can understand why images would look pixelated if the image is made too large because then all you see are the pixels as you have lost the clarity. What I don't understand is why is it when you decrease the size of an image, the image becomes distorted (loses it's sharpness), especially products with writing on them? So I know I'm either missing a step, doing something incorrectly, or expect way too much from the images.
I'm finding it all very frustrating, because I'm getting the same results on the screen whether I'm using a 3, 5 8 and even 10MP camera; so there has to be a step I am doing incorrectly...
Hope all this makes sense...
banana10%-)
mscallisto
Technical User
Can you tell us where the pic is posted so we can see it?
...web images take into account the pixel dimensions whether it be 72dpi or whether it be 300dpi...
...dpi values affect file size, print size and quality...
...a 600 x 600 pixel image at 300dpi will print fine at 50mm x 50mm. A 72dpi version with the same pixel dimensions (211mm x 211mm) will print OK if scaled down by 26%, if printed at 211mm x 211mm it will look pixelated in print). If these images are viewed in a web browser they will look the same size because both are 600 x 600 pixel
...text in pixel images can become problematic at small sizes, check that you are adding text in photoshop with anti aliasing set to something other than 'none'. With 'none' it can make text look bad...
...the 80 and 100 values you refer to are the 'quality' settings, this affects how much your image gets compressed, a lower value is highly compressed (less quality) and a higher value is less compression (better quality)...
...when you open your images from the camera they are likely to be at 72dpi but at a very large pixel dimension so when you change the pixel value to 600 pixels in 'save for web', you will actually be re-sampling the image down which is fine for quality as long as you have the 'quality' set to 'bicubic' in the image size window tab within 'save for web'. Check this is set to 'bicubic' in 'save for web' and that blur is at zero...
Andrew
...dpi values affect file size, print size and quality...
...a 600 x 600 pixel image at 300dpi will print fine at 50mm x 50mm. A 72dpi version with the same pixel dimensions (211mm x 211mm) will print OK if scaled down by 26%, if printed at 211mm x 211mm it will look pixelated in print). If these images are viewed in a web browser they will look the same size because both are 600 x 600 pixel
...text in pixel images can become problematic at small sizes, check that you are adding text in photoshop with anti aliasing set to something other than 'none'. With 'none' it can make text look bad...
...the 80 and 100 values you refer to are the 'quality' settings, this affects how much your image gets compressed, a lower value is highly compressed (less quality) and a higher value is less compression (better quality)...
...when you open your images from the camera they are likely to be at 72dpi but at a very large pixel dimension so when you change the pixel value to 600 pixels in 'save for web', you will actually be re-sampling the image down which is fine for quality as long as you have the 'quality' set to 'bicubic' in the image size window tab within 'save for web'. Check this is set to 'bicubic' in 'save for web' and that blur is at zero...
Andrew
- Thread starter
- #9
...Ok, the pics in question are at and you will see some are more pixelated than others. I think if they were large on the screen, then I wouldn't be having the quality problems I'm having.
banana10
banana10
Hi, let me add my two cents.
First, resample your image to the desired size (i.e. 600 pixel wide, no matter the "resolution")
Second, sharpen your new image if needed
Third, add your text at this point in the desired size. With a 100% vue, you can judge the aspect.
Fourth, insteed of jpeg, save you file in PNG format. This one works much better with high contrast transition as texts.
Hope it helps ! CeBe
First, resample your image to the desired size (i.e. 600 pixel wide, no matter the "resolution")
Second, sharpen your new image if needed
Third, add your text at this point in the desired size. With a 100% vue, you can judge the aspect.
Fourth, insteed of jpeg, save you file in PNG format. This one works much better with high contrast transition as texts.
Hope it helps ! CeBe
- Status
Similar threads
- Locked
- Question