How to Resize Photos and Make Them Load Fast

Sometimes you have a photo that is too large to fit into a blog post or you have a photo you want to fit into the Facebook Fan page Timeline and you need to resize it. But how do you get it to be the exact size you need it to be and load fast? Well, you need some kind of program to help you.

How to Resize Photos and Make Them Load Fast

How to Resize Photos and Make Them Load Fast

What you don’t want to do is take a super large photo from your camera and try to add it into a blog post and then click the corners to drag it smaller. But, you are saying, I have done that and it works. I can click and drag the photo smaller and it fits into the blog post. Yes, that will work but what you don’t know is that you aren’t changing the physical file size of your photo, you are just shrinking the photo that people see on the screen and this is two different things.

Let me explain

If you are looking for the best photo quality possible you set the quality to high on your camera. That is great if you are planning on taking a photo and printing it out on a color photo printer or taking it somewhere and having it professional printed, but for the Internet this won’t do. Online you want your photos to download as quick as possible so you need the physical file size to be as small as possible. You still want your photo to be clear and you can have it all – a small file size, clear photo, and fast loading photo.

One way to make this happen is to change the setting on your camera to make the photos Web ready but I never do this. I still want my photos to be big on the camera so that they will show as many details as possible. If the photo is super large on the camera, I can put it on my computer and zoom it in and get just the right area of the photo I want to show to the viewer. Maybe I want to show just a portion of the photo and not the whole picture. If the file size is large I can do that by cropping out what I want. So, I still suggest you keep the quality of your photos high on your camera.

The way you make them small enough to still be clear for the viewer online and small enough to load fast is to change the Resolution Pixels to 72 DPI (dots per inch). Photos should always be 72 DPI when putting them online. For printing you could have them 350 DPI but not for online viewing. You also can change the width of the photo. This is important if you are adding a photo to a blog post because you want to make sure the photo fits within the blog post area and doesn’t spill over into the sidebar.

Photo Editing Software

Adobe Photo Elements for photo editingMy favorite photo editing software is Adobe Photo Elements 15. It is designed for home use and is a full-featured program. It is missing some of the professional features that Adobe Photoshop has but you won’t miss them unless you are a professional. I have been using Photo Elements for years and it does everything I need it to. It is a fraction of the cost of Photoshop too, at around $40 on Amazon.com. It does take a little while to learn how to use it though. You will need to learn what layers are, how to add a layer, how to add text, how to use Levels, Contrast, where to change the image size, change the DPI, and how to change from one tool to another.

How to Change the Image Size with Adobe Photo Elements:

If you have Adobe Photo Elements or are planning on getting it so you can edit and manipulate your photos for your blog, Facebook, or Pinterest, you should learn how to do some basic things. Here is how to change the image size, DPI, and to change a photo to fit a specific size.

Change the Resolution

1. From the Image menu click on Resize and them Image Size.

adobe photo elements images resize

2. First, change the Resolution to 72 and make sure it is set to Pixels/inch.

3. Then change the size of the image. I make mine around 500 pixels (px) wide for most of my blogs but it all depends on the width of your blog post area.

If you have a wider blog post area you can make the photo larger. There is nothing worse than reading someone’s blog post and their photo spills out of the post into the sidebar area. This is because they made the photo larger than the blog post area.

Adobe Photo Elements images resolution

4. You don’t need to change the height because it will automatically change it when you change the width. That is, if you have Constrain Proportions checked (this is already checked by default). What that does is to keep the image in proportion.

5. Click OK and then save it by clicking on Save As or Save for Web.

Make sure you always save photos for the web asĀ  JPEG, GIF or PNG. For photos I usually make them JPEG (saved as .jpg). I use PNG is I have a photo that has a transparent background. I rarely use GIF because it doesn’t make the photos all that colorful. GIF is great for making animated photos though.

Find Out the Blog Post Area Width:

This is just general help. Each template (Blogger) and theme (WordPress) is going to be slightly different so you might not find the width this way. If you can’t find it then open a photo in Photo Elements or PicMonkey to see the width. Add it to an existing blog post and see if it fits within the blog post area. You may have to fiddle with the size until you know what fits on your blog.

Blogger: Click on Templates from the left menu and then Edit HTML. Click Proceed. Scroll through or do a search (Ctrl+ F) to find #main-wrapper. It should show you a under like 500px or something. That tells you the width of the blog post area.

WordPress: Click Appearance and then Editor from the menus on the left. You will be taken to the Stylesheet. Scroll through or do a search (Ctrl + F) to find the #content. Whatever size it reads should be your blog post width. If it is 500px then your photo would need to be smaller to fit.

Free Online Photo Editing Software:

Pic Monkey is a free online photo editing website. There is no registration or account required to use it. If you loved the now defunct Picnik, PicMonkey is your replacement. It’s faster, more powerful, and easier to use.

How to use PicMonkey

1. Visit www.picmonkey.com

2. Click Edit a photo on the left.

3. Find the photo you want to edit from your computer, click on it and then click Open. You can then play with the colors or use the Auto Adjust, crop, add text and more.

4. To change the size, click Resize from the bar on the left and change the width size to fit your blog post (see above). Make sure to leave the checkmark in the box next to Keep proportions.

how to use picmonkey to format photos for your blog

5. When you are finished click Apply.

6. Click Save at the bottom.

7. Make sure you have given your photo a file name. Never, never, never, use spaces in your file name. If you want it to have keywords because search engines pick up images names, use hyphens like this.

Example: pretty-penguins-in-the-north-pole.jpg

9. Choose whether your file is a .jpg or a .png. Choose whether to save it to your computer or upload to Facebook and click Save Photo.

The faster your photos load, the more likely readers will stick around. The faster your blog loads, the more search engine traffic you will get as Google ranks blogs by popularity and speed. Making your photos fit the blog post area and load fast is something every blogger should do and now you know how!


Pin Your Prize Pics on Pinterest

Speak Your Mind

*