How to optimize post images

{Read in Italian...}

Previously, when we talked about big images, I received a lot of questions about the impact that these pictures might have on our blogs loading speed. I'm glad that many of you are already aware of the importance of this matter!
I must say that optimization is a huge topic, one that goes beyond the size of images. I'm the first one who still needs to find some time to work on her blog template, to improve mobile loading speed and so on.
Anyway, today we're going to talk about resizing and saving web images.

Here are two mistakes to avoid.
  • Never, ever upload on Blogger {or other CMS} your pictures just as they come out of your camera! There are two important steps to make before that: il resizing and compression.
  • When Blogger editor asks you if you want to display an image as small, medium, big, etc... that is not going to save you some loading speed, if you decide to display a tiny thumbnail. The user's browser, in order to display it, is still going to download the full-sized image that you're uploading. Therefore, resizing via Blogger editor is not a viable option to reduce the weight of your images.
I'm sure you've already understood that, before uploading a picture on your blog, you have to make a couple of fixes with a photo editor, the same software that maybe you already use in order to edit photo exposure, add watermarks, and so on. You can make it with Photoshop, or you could use free resources like Ipiccy or Picmonkey.

RESIZING
Let's say that we have a picture, 4000px wide and 2500px tall. Let's say that the main column of our blog is 800px wide. Why on Earth should we upload this picture as it is, when it's just going to slow down our loading times?
That's why we neeed to resize it!
While keeping intact the proportions between width and height, let's brinng the image to a size that fits the content of our blog. Usually, something wide about 800px will do.
Make sure that the resolution of the resulting image is 72 DPI, which is the standard for web images {while, for print, you need 150-300 DPI!}. Also, check that the color mode is RGB {which is usually default}.
how to resize an image with Photoshop, Ipiccy or Picmonkey
Now, to save, we have to choose a format.

FORMATS AND COMPRESSION
There are three formats we can choose from. They don't behave the same: we need to choose accordingly to our needs, every time.
  • JPEG: always the best choice for photographic images;
  • GIF: lightweight format, only acceptable for images with few colors {max 256} or b/w;
  • PNG: this format is slightly heavier than .jpeg, but it preserves transparency. Written content, also, usually looks better. We'd save as .png, for example, a logo with a transparent background.
If you use Photoshop, choose Save for Web & Devices... From there, you can choose the format and the compression rate. Try to compress your image the more you can before you see that its quality is getting compromised. As for .jpeg s, I usually save with 60-65% quality.
Same rules apply to freebies, like Ipiccy. I've also tried Picmonkey, but, to be honest, I'm not a big fan of its overly simplified options: instead of a percentage for quality, you have to choose between 3 male names! For web images, Roger should be your man.

So, how much do we save by going through this boring procedure every time? Is it really worth it?

Look at this picture:

It is wide exactly as my post content, which is 730px, and it weights 165Kb.
The original picture was 4000px wide and weighted 4,15 Mb!
Now imagine this for every image that your readers visualize on your home page: the impact on loading speed is great. Especially if your home page shows more than two posts at a time, thing that I don't recommend anyway.

That's all for today!

PS. Note that these rules should not be applied if you, for instance, are offering your readers a printable. If this is occurring, you absolutely need to put the link for a high-res file on your post.

2 comments:

  1. Hi , Silvia !!!!!! I am a new follower from Greece !!!! I am so happy to have discovered your blog - your posts give so much useful information !!!! THANK YOU !!!!!
    Niki

    ReplyDelete

Related Posts Plugin for WordPress, Blogger...