Something I often see when browsing many food blogs are oversized images. Let me clarify, these images being uploaded are too big or even straight out of the camera (SOOC). On many of your blogs if or when you click on an image it will open up to the actual size it was uploaded. Blogger or WordPress will automatically resize your images so that they fit into the content or post area. Though once added to your post the image may have been resized, it was still a large photo that was uploaded. There are a couple problems with uploading such large image sizes to your website.
1. The larger the image size (or file size) the longer it will take for your photos to load on your blog/website. It could also slow down the overall loading time of a website. We all know how impatient we can be, so that is something you want to prevent.
2. By uploading such large files you are eating away at the storage limits to your Picasa, free Flickr, or any other web based file storage accounts. (Which many of you have accounts to.) I believe the limit for a free Picasa account is 1 GB, which isn’t very much. They do offer a paid service for additional storage. As far as other service’s storage limit you can check your accounts for exact numbers.
3. If your website is self hosted, large image sizes could effect loading time as well as your bandwidth limits. (Bandwidth refers to the amount of data that website visitors can download from a website.) Based on how many visitors your blog/website receives and the amount of times each file/photo has to load will determine how much bandwidth your website uses and needs. In many cases if you go over the allowed bandwidth you will be charged a hefty fee. So make sure you are staying within the allowed limits that your web host provides or upgrade to a better package.
4. Another concern for some may be image theft. There is nothing you can do to prevent it. Even if you disable right clicking people can easily get around it. Adding a copyright notice to your images won’t prevent it either. So if you are going to upload your images to the web you just have to accept that they may, can and will be taken without your permission.
5. A result of such theft could mean that your images may be printed by the person stealing them. Those large files have good enough quality to make very large prints. Of course we would like to decide who can or can’t print our images. Make sure you refer to number 5 in the instructions below for further details.
A simple solution to the above five problems is sizing your images accordingly. All you need is a photo editing software. Even the most basic softwares have this ability so no need to spend a lot of money. What you do need to know is where on your photo editing software the image resizing tool can be found.
I use Photoshop but have tried looking up some other softwares. I would love it if those that use some of these softwares can share where the function is located.
Resize in Photoshop : Image – Image Size
Resize in Apple’s Aperture :
Resize in Adobe Lightroom : Check out Melissa’s tutorial
Resize in iPhoto : Go to File-Export, under the File Export tab look for Size then click on Custom – select either width or height and input the size you like. You could also just select Small, Medium or Large but it doesn’t give you the size it will resize to.
Resize in Mac Preview : Tools- Adjust Size, input manually or select from drop down menu.
Resize in Gimp : Image – Scale Image
Resize in Google’s Picknik : Resize
Let’s resize an image together.
1. First copy your images from the SD Card (or what ever memory card you use) or Camera onto your computer.
2. Next open the photo editing software. Locate the photo you want to edit and open it in the software. In my case it is Photoshop.
3. Edit the photo as you normally do. Then we’ll save our edited photo copy. Find the resizing tool, in my case it is under Image – Image Size.
4. A new window will pop up where you can change the image size. As you can see this particular image was shot with a dimension of 2592x 3872 pixels (width x height). But that is too large to upload to my blog. Instead I want an image with the height of 600 pixels. (The width will be automatically updated by Photoshop, or vice-versa.) Choose the image size you want but be aware of your blog’s content area limit.
5. Another thing to make sure is that the Resolution be set to 72 pixels/inch. That is the resolution for screen or computer viewing. I’ve noticed that some of you have photo resolutions set to 240 or 300. When you want to print a good quality or large photo that number needs to be set to either 300 or as specified by the printer. What that number means is DPI or Dots Per Inch, the amount of dots per inch that are used to make your printed photo.
6. Next click Okay. Now your image is resized to the smaller dimensions we typed in. Make sure you add sharpening to the image before proceeding to the next step. This is the actual view.
7. We are all done and now need to save our image so we can upload it to our website. Find the SAVE AS option under your menu. You want to use save as because this creates a small copy of your edited photo while still preserving your raw-unedited photo.
8. Locate the folder where you would like to save your new edited small image. At this time you can rename the image as you choose. I wouldn’t recommend using the same file name as the original file, to avoid confusion. So I will name mine _IGP9982_EditedSm.jpg
9. If prompted choose the JPG option. Click okay and now your small edited file/photo is saved.
10. Let’s say you would also like to save the changes made to the photo but in the original image size. All you have to do is go back in the history and select the spot right before the Image Size or where we resized it to the small copy, click it. Now go back to Image Size under the menu and you will see the original image size. Then find the SAVE button to overnight the original file from the camera. OR you can do as I do and create another version of this photos under SAVE AS, that way the original straight out of camera image is always saved intact. In the end I have 3 copies of each photo, 1- the original SOOC 2- a large edited version and 3- the small edited version for my website. It is up to you if you want all these copies. An important thing to consider when doing this is storage space.
Now all the is left to do is upload the small edited image to your blog/website like you normally would. Et voilà! Here you have it!
* Post your questions in the comments below. *
Check out the previous Food Photography Tutorials :
~ Food Photography : How To Style Stew
~ Food Photography : My Shooting Setup With Artificial Light
~ Food Photography : Understanding Camera Types
~ Food Photography : What Lights To Use When Sunlight Is Not Available
Another great photo tutorial. I generally edit my photos then ‘save as’ in full size, then re-size, often sharpen and do another ‘save as’ in the smaller size. Like you, I end up with 3 copies of each image. I would add that it is important to keep your original (SOOC) image just in case you ever do find yourself fighting an image thief – you can prove you took the photo!
Hi Ruby,
Thank you. That is a great point.
PS: forgot to say that your egg photo is absolutely stunning! Pinning it now. :-)
Thank you Ruby :)
Thanks for the tips! I’m bookmarking your page.
Cheers,
Rosa
Thanks Rosa!
useful post Nancy
Thanks!
Great tutorial! And, you’re so right about the theft. Even though I’m only a so-so photographer at best, I’ve seen my images on other sites without anyone asking for permission or giving attribution… Like you say, there’s nothing to be done. And if they’re stealing mine, I can just imagine what’s happening to really great photographers like you!
Hi Frank,
Thank you. Yes, that is a problem. We could drive ourselves mad thinking about it all, but at the end of the day is it really worth getting so worked up about something you really can’t change? That is for everyone to decide. But if we can at least do a little bit to deter it then it is better then nothing.
Fantastic tutorial! It took me a short while to figure out my images were too big for my blog when I first began. I use PS Elements and iPhoto. In iPhoto I export the image and resize it there and save as a jpeg.
I picked up a couple of new tips from you also. Thanks! :)))))
–shelley
Hi Shelley,
Glad to hear that you figured it out and are resizing your images. Good for you and keep up the learning. Thank you!
Great tutorial, thanks Nancy, I will check it out ! Also, love your egg photo;-)
Hi Patty,
Thank you. It is a bit long so save it for when you have some extra time. Thanks sweetie :)
Wow. I just started blogging less than a month ago and this is something I never even considered as an issue. Thank you so much for making the blog world better, one picture at a time. ;-)
Hi Melie,
Welcome to the community. I hope you find this and the previous tutorials useful as you continue blogging. Thank you!
I have a confession, I totally knew what you were going to cover! I use a free photoshop action from MCP action that automatically resizes for the web. Alternatively you could go to the file menu and on the drop down menu is a “save for the web” selection also.
Now if you could do one on square cropping for sites like tastespotting, I’d love it. I have a lot of trouble with that and no one (as far as I know) has a tutorial on it.
Your eggs look divine, thanks for sharing.
Hi Rhonda,
Really? That is great, I don’t remember if you added your guess or not. Yes, you could also use the “save for the web” option. But it can be confusing for many as it has too many options of things to change or adjust.
I will ad the square cropping to my tutorials list. Hopefully I can get to it soon. Thanks Rhonda!
Thanks for the detailed tips! I never realized how important it is to re-size. I just assumed that the WordPress auto-resize would be sufficient.
Hi Divya,
WordPress will resize your images to fit in the blog’s content area. But it won’t actually resize the image you uploaded. Unfortunately. Thanks!
Great information cause I really needed. Now I just need to learn to work the camera, I lost the manuel. But thanks I’m bookmarking this page
Thank you. You can find most camera manuals online. Good luck!
Mine are still too big, thanks for walking us through this. I’m coming back when my software arrives. I ordered lightroom. After I get all moved, I’m going to sit down and figure it out. I didn’t realize it till I had used up over half my storage that my photos were too big. Keep them coming.
-Gina-
Hi Gina!
I just looked at your website and yes, they are too big. So you found it the heard way. Yikes, hope it wasn’t a hefty fee you had to pay. Have fun learning Lightroom, I’ve heard great things about it.
Very useful post!! Thank you for this!
Thanks Heidi!
A very helpful tutorial. I figured this out early only because my husband is computer savvy, and still ended up exceeding my bandwidth so many times. I just moved to an unlimited bandwidth server. But there is one problem we have not been able to figure out. I do submit my photos to the websites like foodgawker, tastespotting etc etc. Among there there are two websites, Dishfolio and Tasteologie where I face a problem. As soon as I upload the image in these websites and go to the preview, I see that my image has lost color, contrast and has become unbelievably dull. The same photo is fine on every other website! Do let me know if you face any issues like this and know how to solve it :) Thanks!!
Hi Ambika,
Good for you on figuring this out and adjusting your bandwidth limits. I have also noticed that all of those websites adjust the color, contrast and even quality to the images we submit. The quality due to the fact that they are resizing the images at a lower jpg quality to save on memory storage. The color and contrast I can only attribute to their system adjust the color profiles of our images. I wonder if it would be possible to find out from them what profile they are running?
I did contact them, but they’ve been unresponsive. I shall try once again, I spoke to a few fellow bloggers too, and some of them face the same issue. Thanks for replying :) At least now I know I need to ask them about the color profile.
I’m not shocked by that at all. What color profile are you saving your images in? I think most people just save like out of camera, Adobe sRGB. If you find out I hope you stop by and share what they tell you.
you need to save images for the web with the sRGB colour profile – this will help keep your images bright and full colour. I know you can do this in both photoshop and lightroom. Not sure about other software.
Hi Melissa,
Yes, I do save my images at sRGB for the web. But even so after uploading them to the “food porn” websites there is a shift in color and contrast. That is why I am interested in knowing if they are using Adobe sRGB or what. (When I am editing screen snapshots I don’t always remember to change them from Adobe sRGB to sRGB.) Thanks though!
I’d be really curious to know if anybody finds out. I don’t notice it too much on the food sites but I uploaded somewhere recently and was sooo disappointed I wanted to remove it. Can’t remember where it was now!
Hi Melissa,
Me too, but wonder if they would even reveal it. There is one website in particular, Dishfolio, that the change is very noticeable. Other than that the other one I notice it on is Tastespotting.
Fantastic tutorial Nancy! I have been editing size in HTML and I can see that the original size is still on my blog now…will have to change that :)
Hope you have a great weekend sweetie, hugs
Hi Alisha,
Yes, even if you have been adjusting the size under Blogger’s HTML (under each blog post) so that the actual posts show a small image size, we have to be aware of the files sizes we are uploading to Blogger or Picassa.
You too sweetie have a fantastic weekend! Hugs & <3
Great tips! I’ve learned another new lesson from you :)
Thank you, Nancy.
Hi Ann,
Thank you :)
Thank you so much, I found the manuel. Maybe now, my pictures will look a little bit better LOL
Great! Have fun learning :)
So I am probably going to read this about a million times before it sets in…I am a slow learner with this stuff. Great advice. It will come in very handy!
Hi Emily,
These kind of things are ones many of us have to read over and over. Once you do it, you’ll get the hand of it :)
Great tutorial – and you are so generous to share your knowledge with us, Nancy. I finally bought Lightroom and have to start learning that, but at least I have been resizing my images before uploading to my website. I usually do the sharpening after resizing but it sounds like I should do that before so that I can save it to the original as well.
Hi Priscilla,
Thank you. Good for you! If you want to save the original and edited file, yes add some sharpening. But also after you size your images for the web you should add a little more sharpening. Going from a large file to a small sized one there will be some sharpness lost.
THANK YOU for posting this. As a web designer AND a photographer I preach this ad nauseum all the time but people don’t seem to want to make the extra step.
I have a tutorial on my site that shows how to resize in Lightroom – it’s done during the export process and is very easy – it will sharpen for the web at the same time:
P.S.
Sorry Melissa I had to edit your comment. The link keeps making your comment go into my spam folder instead of approved. I’ll add the link to the article above.
Hi Melissa,
I don’t understand why someone wouldn’t want to add a couple extra seconds to their work for the benefits of this? I’ve added your link to the post. Thanks for sharing!
Haha, for once something I already know :) My artist wife knows all about editing and can help me there, it’s the photography part I’m lost at ;)
Great post!
Good for you Kiri :)
Nancy,
Thank you so much for your tutorial. I am guilty of over sized pics, and I need all the help that I can get.
Hi Becky,
My pleasure. I hope you found it helpful so you can resize those images.
I have been resizing to 600 but I am not sure how I did it for the first 6 months. My home page has so many images and it takes time to load I think. I need to look into it more… Thank you so much for the great tutorial. You are very generous to take your time to make this so that we bloggers can improve our site. Thank you!
Hi Nami,
I also resize to 600 wide because that is the limit for my blog’s content area. You should look into installing a web caching plugin for WordPress. It has helped with my loading time. It is my pleasure Nami :) Thanks and have a great weekend.
Love your tutorials. I have so much to learn. :) Have a great weekend! ~ Ramona
Hi Ramona,
Thank you. Photography is never ending learning to me. You too have a great weekend :)
I know now why my blog is loading a little slow. Will upload a smaller version of the photos. Thanks for the wonderful tutorial Nancy!
Hi Roxana,
That’ll do it. Glad I could help :) Thanks Roxana and have a great weekend!
This is great to know- thanks for sharing! Do you know how to do this in iPhoto?
Thank you! Yes, in iPhoto go to File–Export, under the File Export tab look for Size then click on Custom – select either width or height and input the size you like. You could also just select Small, Medium or Large but it doesn’t give you the size it will resize to.
Fantastic! I had no idea that bandwidth could be affected! I appreciate the information – as always!
Thank Ann!
This is such great advice. Honestly I felt like singing the song “have I told you lately that I love you” after seeing this, lol. I am going back through my blog putting on a print recipe feature one by one so as I go I am now going to resize all my photos. It’s gonna be a long month. But so worth it to have it running smooth. Cannot thank you enough for this.
Hi Kim,
Lol :) Have fun and I do think it will be worth it in the end. My pleasure.
Great article, Nancy! I found out on a hard way that I have to resize my photos when, visiting a small city in Romania on vacation, I saw a picture/poster on the door which seemed familiar. It was my picture, with the watermark cropped. Being around hollidays, the store was closed and never got back at least to ask them if their savarin look like mine :)
Hi Mihaela,
Oh, I am so sorry to hear about that. People just don’t have any common curiosity and think the internet is just a place to grab what you want. I hope you have fixed the problem now.
A great post Nancy!!! And very useful as well :)
Thank you Nandita!
Hi Nancy!
I finally found the time to check out your blog thouroughly and am amazed by the versatility (shown by this post, for example)! You found a new subscriber in me and Alisha/Magic of Spice is such a sweetheart. Such gestures keep bloggers connected, don’t they?
Great post! I usually resize my pictures to 1024 in height (having them displayed smaller) and try to have the size around 300-350kb as I find that with the software I’m using, they turn out a bit less crisp than I want them to be when I resize them too drastically without any scope. Flickr is balancing in out better with the size of display they are offering. I think it has more to do with the camera I’m using than the software itself (which is not photoshop) so I’ll stick to this method until I’m upgrading.
Cheers,
Tobias
Hi Tobias,
Glad you stopped by. I’m glad you are enjoying my website, thank you and for the subscription too. Yes, Alisha is one of the sweetest people I have met in our community.
Thanks! I think it is important to stick to what works for you. We all use different cameras and softwares so it is working with what you got.
Cheers!
What an eye-opener post! Shall keep these points in mind in future.
Thank you!
aw you are so on top of this blogging thing! thanks for the advice!
Thanks Anna!
Thanks for the tutorial! I just got photoshop and have not really had time to learn to use it- I’ve been a bit intimidated by it, actually, so a walk through like this is very welcome. I have absolutely no idea what size the photos are on my blog, so it’s obvious that I need the advice badly! :)
Hi Betty,
My pleasure! Photoshop is intimidating for us all at first. I would recommend that you look up tutorials online so that you can become familiar with the tools. That is what I did and it really helped.
Thanks so much for this. I need to bookmark your page here and digest slowly. So much to learn from the experts! Merci
De rien Jill!
Great information, Nancy! I will be back to read and reread! Thank you for sharing your knowledge~
Thanks Liz!
This is wonderful, so glad I found you over at Dessert Stalking. I’m a subscriber now and will be back to see what other wonderful information I can find (along with some good recipes!)
Hi Joan,
Welcome and glad you stopped by too :)
Thank you so much! Occasionally I have used Picnik for this, but only to resize for a program that requires smaller pics (such as linkytools, etc). Since I’ve gotten a new camera, I’ve had some problems and frustrations with photo size. I had no idea I could do it right in photoshop (in fact, I don’t know more than 1/100th of what I can do in photoshop!).
Thanks again for sharing this information!
Hi, You should also read your camera’s manual so you can learn about image sizes and quality settings. If you shoot at the higher image sizes and JPG or better yet Raw, you can have great control over the quality. Yes, in Photoshop you can adjust all of it too. Thanks :)
Thank you so much for all the information. I noticed that some food sites, mine included, sometimes take longer to load during high traffic times (usually in the evening), but I didn’t realize that the “actual” photo sizes could be the cause. I always resize mine to 640 to fit my template, but I never paid attention to it’s true size.
For the past 2 + years, I’ve been using Picnik and I’m heart broken that they’re shutting down in April. I’ll take a look into Gimp or Pixlr. :)
Hi Valerie,
You’re welcome :) Yes, large photo sizes could cause a website to load slow. But also high traffic means more people are calling the files on the website so that could also affect the loading. Sorry to hear about Picknik. I’ve heard good things about Gimp. But you now also Corel is a great software.
Thanks for the tutorial! I usually upload my photos a little bigger, but will change that now, especially since I am having more and more problems with theft which is very disappointing.
Hi Kirsten,
Good luck!
This is an awesome tutorial. Thank you so much.
Thank you Anisha!
Thank you for taking the time to help us novice photo bloggers learn a bit more. I need to begin resizing my images and taking the time to create better shots. looking forward to your next tutorial.
My pleasure Vianney:) You’re doing great, I love your photos.
This is wonderful! I don’t have a blog but always wondered how to resize for email and web! Can you possibly share how to do the sharpening after resizing?
Thank you Mary! It’s very simple, all I do is go under the unsharp mask tool and adjust the sliders until the photo looks sharp.
Well that sounds easy enough! I suppose the biggest concern would be sharpening the area you want the most sharp like the egg in the front, and not mistakenly focus on a random part which would over sharpen the rest. Like focus on the eye for a person. Thank you! Too bad it has to be called unsharp mask when you are actually sharpening! Lol! Thanks!
I was looking for a food blog resizing tutorial on google search and I entered into your photo resizing tutorial…Its just very useful to me and I am happy that you have shared it. I was struggling hard to find a good post and found your article. I am happy that i finally found a very useful article which I had no idea about it… Thanks a lot!!!
Thank you Asiya, I’m thrilled that you found it helpful. It is a few years old now (perhaps it needs to be updated) but I think that the basics are there. :)
OMG!! I am glad I found this article, I had been uploading my images with resizing them.WHat struck me the most was that I was ultimately helping thiefs to steal my content.
Thank you so much for sharing:)
Glad I could help! :)
Fantastic explanation. Is there any fixed size for food photographs? Me experimenting with various sizes and couldn’t stick to one.
Thank you Cherie! There isn’t a fixed size as it really depends on what fits into your own blog’s design. Additionally you can upload larger files to your blog and they should be re-sized automatically by your WordPress or Blogger.