My camera takes pretty good pictures - so when I post them to my blog in the main space (big picture) it looks pretty clear. However, when I resize them to aboput 200px wide, they get all grainy. How can I make my little pictures look not so grainy?
Which program are you using to resize your pictures?
You might want to check the compression that you are putting on your jpg (I assume you are saving them as jpgs?). Some programs allow you to change the amount of compression you are using.
Otherwise try paint.net(free, and you can see if thats the problem without to big a download) its not that good a program for lots of stuff.. but my pictures dont turn out grainy when I resize them to 200px. But you cant change the amount of compression either.
Hmm, When you save an image in photoshop as a jpg you aumatically compress it. The more times you save it the more compressed it gets, so it gets grainier.Your better off to adjust the brightness and use photoshop to resize your image and do it all in ONE GO. The html compression algorithm is worse than photoshops. You can definately change the jpg compression settings in photoshop, play around with them..You want to ensure you use the bicubic resampling method too. Make sure you keep the proportions right when you use html too... or it will look skewed. If you do this you will use more bandwidth than if you put up a small picture too. If this is too much let me know, but I hope it helps :)Your picts look great to me
sarah- your photos work in Firefox now. Also- noticed that your image size is larger than you need it to be, just to be really picky :)
your large photo, sfsaloon_turkeyburger.jpg for example, displays as 410 x 306 pixels, and yet you've uploaded it as 640 x 480. As mentioned on here previously, uploading your picture in the size to be displayed is prefered because it is more efficient, and doesn't introduce the possibility of proportion errors with resizing. In fact now that I look into your site more... all of your photos are 180 dpi and 640 x 480?
If you are going to display your smaller sized photos as 140 x 190, then upload them as that size. And they don't need to be 180dpi (vs 96 or 72 dpi for example).
Also, if you have photoshop cs, take some time to play with the "save for web" feature under FILE. This feature has become my bread and butter for reducing file sizes for my site... I now keep all my big pictures under 10K, smaller ones around 5K. Any thing I need to do bigger - print specific specials like my fake ipod, I keep to an optional pdf download in association with a small sized image.
Given all that: I don't use Blogger, I use WordPress for publishing and upload my own photos with Filezilla after a fling with Photoshop. I'm not sure how much control the various image photo hosting stuff out there gives you.
phew- I'm getting kind of wordy... need to head off to bed!
Just a quick follow-up to what my dear chef, McAuliflower, just said:
If an image is actually really small, but when you put it in a page you specify a larger size, the image looks grainy because there just isn't enough information to make it look smooth.
Paradoxicaly, the same thing can happen when an image is actually really large but on the page you specify a smaller size.
<voice of Shirley Corriher>The image can appear grainy because there is too much information and the browser throws away detail desparately trying to squeeeeeze a big grapefruit of an image into a tiny Altoid sized space on your page. </end Shirley voice>
If you've got the software to do it (ie Photoshop or something similar), then the best solution is always to have the jpeg's dimensions be exactly the same in the file as in the html code (and at nothing bigger than 96dpi because after 96, on a computer screen, bigger isn't better, it's just slow-loadingly bigger.)
That said, for anyone with a little $ to spend on a good optimizing program, I recommend Ulead SmartSaver Pro. It works both stand -alone and as a photoshop plug-in and gives you lots of tinkering room with both jpeg and gif quality vs size.
Food Blogs may be cool, but here it's back to School. Join this forum and together we can learn more about the technicalities of blogging and make our collective blogs even more delectable than they are already.
This is a forum for all food and drink bloggers. If you want to join the team, sign up to be a member by sending both the name of your blog and its url AND YOUR EMAIL ADDRESS in the body of the email to Food.Blog.Scool@gmail.com
Members will have the ability to start threads on this site, but absolutely anyone can post comments. Food Blog S'cool membership is open to anyone with a Food or Drink Blog. Please be patient whilst I sign you up. Admin is only completed about once a month. Thank you.
Food Blog S'cool is not responsible for any comments or posts on this site. Individuals are responsible for their own content and should be mindful that they do not say write anything that breaks the law or infringes on copyright.
9 comments:
Which program are you using to resize your pictures?
You might want to check the compression that you are putting on your jpg (I assume you are saving them as jpgs?). Some programs allow you to change the amount of compression you are using.
Otherwise try paint.net(free, and you can see if thats the problem without to big a download) its not that good a program for lots of stuff.. but my pictures dont turn out grainy when I resize them to 200px. But you cant change the amount of compression either.
well, i take pix with my canon elph, then i don't do much except maybe change the brightness in photoshop. i just code the img size in the html.
Hmm,
When you save an image in photoshop as a jpg you aumatically compress it. The more times you save it the more compressed it gets, so it gets grainier.Your better off to adjust the brightness and use photoshop to resize your image and do it all in ONE GO. The html compression algorithm is worse than photoshops. You can definately change the jpg compression settings in photoshop, play around with them..You want to ensure you use the bicubic resampling method too. Make sure you keep the proportions right when you use html too... or it will look skewed. If you do this you will use more bandwidth than if you put up a small picture too.
If this is too much let me know, but I hope it helps :)Your picts look great to me
oh yeah..
dont worry at least you arent using a stoopid program that saved the cursor on some of your pictures!... But I am getting a new program....
sarah- your photos work in Firefox now. Also- noticed that your image size is larger than you need it to be, just to be really picky :)
your large photo, sfsaloon_turkeyburger.jpg for example, displays as 410 x 306 pixels, and yet you've uploaded it as 640 x 480. As mentioned on here previously, uploading your picture in the size to be displayed is prefered because it is more efficient, and doesn't introduce the possibility of proportion errors with resizing. In fact now that I look into your site more... all of your photos are 180 dpi and 640 x 480?
If you are going to display your smaller sized photos as 140 x 190, then upload them as that size. And they don't need to be 180dpi (vs 96 or 72 dpi for example).
Also, if you have photoshop cs, take some time to play with the "save for web" feature under FILE. This feature has become my bread and butter for reducing file sizes for my site... I now keep all my big pictures under 10K, smaller ones around 5K. Any thing I need to do bigger - print specific specials like my fake ipod, I keep to an optional pdf download in association with a small sized image.
Given all that: I don't use Blogger, I use WordPress for publishing and upload my own photos with Filezilla after a fling with Photoshop. I'm not sure how much control the various image photo hosting stuff out there gives you.
phew- I'm getting kind of wordy... need to head off to bed!
Just a quick follow-up to what my dear chef, McAuliflower, just said:
If an image is actually really small, but when you put it in a page you specify a larger size, the image looks grainy because there just isn't enough information to make it look smooth.
Paradoxicaly, the same thing can happen when an image is actually really large but on the page you specify a smaller size.
<voice of Shirley Corriher>The image can appear grainy because there is too much information and the browser throws away detail desparately trying to squeeeeeze a big grapefruit of an image into a tiny Altoid sized space on your page.
</end Shirley voice>
I have put together a demonstration of this behavior. Take a look, and see if it helps.
i swear if college had been as much fun and instructors had been as helpful as y'all at food blog s'cool....
anyway...thanks SO MUCH! i will be tinkering with photos this weekend (you know, kinda have a stupid thing called a "job" during the week ;) )
Echoing the wise words of mcauliflower:
If you've got the software to do it (ie Photoshop or something similar), then the best solution is always to have the jpeg's dimensions be exactly the same in the file as in the html code (and at nothing bigger than 96dpi because after 96, on a computer screen, bigger isn't better, it's just slow-loadingly bigger.)
That said, for anyone with a little $ to spend on a good optimizing program, I recommend Ulead SmartSaver Pro. It works both stand -alone and as a photoshop plug-in and gives you lots of tinkering room with both jpeg and gif quality vs size.
Post a Comment