Compressing

I get questions from bloggers all the time asking if they can help them make their site load faster. The culprit is probably not your blog design, but rather your content.

As you can see in this screesnshot, the original image of Oliver is HUGE. And would make my site take a good long time to load, which will likely make my readers sad and maybe even sad enough to leave. Obviously, none of us want our content’s loading time to be the thing that sends people away! So here I’ll show you how to compress your images so that they load faster!

Blogger and WordPress both allow you to choose a size of image to drop into your post, but when the original image you’re uploading is huge, it’s going to make things much slower. I always tell people it’s best to crop your images to the size you want BEFORE you upload them to your blog. I like my images to be the same width as my text, so I crop them to the main column width, which for me is 680px. It looks clean and crisp and it shows off the details of the images. The only time I use smaller images is when the original is smaller than the width of my main column. You can try to make them larger, butttttt, typically they’ll be pixelated and look grainy and that’s just a no-no.

The next step in making your images load quickly is compressing them. I always compress all the images I use for my blog — from good ole photos to collages with multiple images and text. What you’ll need to do is open your photo in Photoshop. At this point your photo should be cropped. Do any editing you need to and then save the image.

Then go to ‘File’ > ‘Save for Web & Devices’ and you can see when the dialog box pops up how much smaller this final image is than the original. You’ll have the option to save as either a PNG or JPEG. My rule of thumb on selecting a format is this: Text & Images? Use PNG. Just images? Just JPEG. JPEGs are smaller than PNGs, but if you have text in their, the text appears less sharp than a PNG.

Save the web version with a different name so you don’t get them confused. Now all that’s left is dropping them into your site. Upload like normal and enjoy that quick load time!

Oh hey there Oli bear! And I should mention, this photo wasn’t super crisp to begin with, but I just thought it was cute and might keep you more interested in the above tutorial, ha!

Note: This also works for collages in Photoshop and Illustrator as well!