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.

Why big images are so important

{Read in Italian...}
Why big images are so important
Maybe you've already noticed websites that feature home pages similar to this one:
Home page of departementcreatif.com
Right now there's a trend in web design called hero images.
Hero images are pictures that take a large portion of browser window: they are the focal element of the page. They can be used either as content background or as big banners.
More examples: Zara, Cartier and Bing
Whether this trend is here to stay or will be dismissed soon, we can't tell right now, but there's something that isn't going to change: such big images have a strong emotional impact on the user and that's the main reason they've become a trend.
Now, let's talk about our blogs.

Now that we're aware of the impact that big images can have, let's take advantage of this lesson when we embed pictures to our blog posts. It is common to see posts with tiny pictures, like this:
Why big images are so important
This is not ideal at all! This image looks more like an external link rather than enhancing the beauty of our creation.
See how different is this version:
Why big images are so important
Do we all agree that the emotional impact is totally different? Do we all agree that our reader would spend a little more time to admire our creation? So, do we all agree that this reader could be more interested into clicking here?
Why big images are so important
Good! So let's stop using these unworthy thumbnails. Let your pictures shine with hero post images! :D
Related Posts Plugin for WordPress, Blogger...