How to reduce image size for your blog? Especially as a new blogger, it will become important to keep costs low. Hosting can get expensive if you have many images on your blog that are really big. File size, that is. But you also know the importance of having great, big images to entice your readers to pin and share your content and of course you want to create appealing content so images are a must.
However, website hosts have plans for a bloggers needs as far as how much traffic your site is getting and how much disc space you are using. In order to keep these costs low you want to edit your images to reduce the file size. Do not shrink your images in your website, shrink them before you upload them because otherwise they will remain on your server in the large size you uploaded them in the first place. But before we get technical, let’s see the important factors to reduce the image size.
- more space available on website server discs: images that may look small on your blog may be huge in file size and should be modified.
- faster loading time for your pages: shrinking images will reduce page load time which is very important as 40% of visitors (according to THIS study) will abandon a website who’s loading time is longer than 3 seconds! Every second does count!
- your search engine rank might decrease: large images with a large file size that slow down your website’s loading time also lets search engines know that your site isn’t all that great and might put you on the backburner, a.k.a. on pages 30, 50 or much further back.
Those are some good points to learn how you to reduce image size for your blog, right? I optimize all my images nowadays and even though I haven’t noticed a huge increase in Google search rank, I know that I am doing the best I can (for now) to improve my ranking.
What types of images are there anyway?
- JPG/JPEG: most commonly used on websites if loss of detail through enlarging is not an issue; it also is of the smallest file size
- PNG: a lossless format which is much larger in size and often used for magazines or printing as it keeps details when enlarging; it also supports transparency which is a must for creating logos or graphics with transparent background or layers
- GIF : a lossless format which can be animated or static images; also large in file size
How to reduce image size for your blog
For blog posts you would commonly us JPG’s and PNG’s. Elegant Themes talks about the difference of a JPG and a PNG and demonstrates how to optimize images in Photoshop (paid application).
⇓ – – – – – PIN THIS – – – – – ⇓
Today I want to show you how I reduce my image file size with a free picture editing service, called PicMonkey (they do have an awesome collection of other image editing tools for a monthly subscription but for today’s tutorial the free one is sufficient).
See my post of how to create the perfect pinnable image which I also used PicMonkey for.
I’ll be using this image of my tutorial how to sew a cute bow. First you want to open a new window and go to PicMonkey, upload your image and click on ‘resize’. That will tell you how large your image is. Mine is 1500x1200px which is huge!
I changed my width to 650px which is a great width for most blog post templates. Some may be smaller, some larger. The height will automatically adjust. Then I hit ‘Apply’.
Next I click ‘Save’ on the top menu.
This brings up the details of my image and the option to choose the file size (KB) which results in different qualities. Roger is for minimum size but lousy picture quality, Pierce is for medium size and a good quality. Sean is huge but the best possible quality. It is also the largest file size. 191.9 KB. We haven’t talked about what KB is!
An image is made up of pixels which is the resolution (sharpness, colors, details). The higher the resolution, the larger the number of pixels. The term resolution is also commonly used for the size of an image. A large image may have many pixels > KB’s > KiloBytes. Even larger images that exceed the amount of 1024 KB’s will be now called by MB’s.
Now my image has an acceptable size of 191.9 KB’s:
TIP: I have noticed that PicMonkey sometimes stalls or even crashes which I am sure is not their fault but rather my internet or browser, who knows. So knowing that, I close PicMonkey often and open up a new window. This really helps me to eliminate loosing my edits. Learn from me lol…
Next step is to either continue with the edits or upload the just saved image to a new PicMonkey window. Go to the same step in the beginning where you click ‘Resize’
But for me that’s still not small enough! So I clicked the middle option, Pierce which brought my size down to a nice 78.1 KB. Of course, my image will lose sharpness that way.
So I hit ‘Cancel’ in the save option which brings me back to the main editor and I do the following. I sharpen my image!
To be exact, I select number 7 of the sharpness scale. That is just the right amount to sharpen my image but not make it look distorted which will happen if you would increase the number.
I hit ‘Apply’ and save my image in the medium quality “Pierce” which will result in my ultimately edited image with a size of 650x520px and 87.5 KB. Yes, the size increased a tad by sharpen it but that is really only minor. My image is done!
And to compare the original image which was 1500x1200px (191.9KB) and my downsized image which is now 650x520px and 87.5 KB. You will see a small difference but I think it is great! Knowing that now I save more than half of my image size makes me happy!
I hope you liked this post about how to reduce image size for your blog!
Your turn! Tell me what questions you have about images for blogs! Comment below and ! will reply!
We are linking up to some of these awesome blogs! Check them out to find more amazing DIY inspiration and come over to our link party on Thursdays at 7pm EST!