How to Optimize Images For Your Blog For Better Design & SEO

How to Optimize Images For Your Blog For Better Design & SEO

It’s not just for aesthetics; image content in blogs really helps generate traffic so it’s only sensible to have them.

They can, however, lengthen a page’s loading time if they’re too big.

One of many online viewers’ pet peeves is clicking on a website and finding the images are taking forever to load, which is why optimizing images in a blog is necessary.

Image optimization is best done with an image-editing software but for those who don’t have this or prefer simpler means there are other solutions.

For the sake of better viewer rating, here are some alternative ways to optimize images on your blog:

SAVE IMAGE FILES PROPERLY for UPLOADING

Uploading images is easy, but knowing which file type for what requires some thought.

There are three common files types that images can be saved as: JPG, PNG, and GIF. One of the most obvious alternative ways to optimize images in your blog is knowing what file type to use to save images in.

  • Use JPG for Photos

Normally, and by default, images are uploaded as JPG files. This file type is best for most photo images, especially those with a lot of details.

This file is lighter (size-wise) than a PNG and better when reducing the image size, too. Saving a photo at PNG and having the size reduced will make it pixelated, which is not the same when saved as a JPG

  • Use PNG for Flat Colored Images

The PNG file type is favored by most because it supports more colors and also allows higher quality imaging. You can zoom in on a page and find the colors are still crisp and sharp unlike the blurriness that happens with a JPG image.

While saving an image as a PNG file allows better quality for larger images it’s not ideal for smaller ones. Images get pixelated when cramped into a smaller size, in order to fit into it, and get blurred. Use PNG for vector-based, flat colored designs and images instead like logos, etc.

  • Use GIF for Thumbnails

GIF files are meant for small, graphic icons. They’re not ideal for normal-sized images or transparent ones. They are great alternatives to JPG for saving images for thumbnails.

What’s more, since the file size is similarly small, it will load just as quickly, but the catch is that it’s animated.

REDUCTION

Resizing, or rather, downsizing, is common and the easiest of all alternative ways to optimize images in your blog. Here are some obvious but often overlooked ways to lighten up an image-heavy page.

  • Reduce Thumbnail Size

Thumbnail images are already small but be warned: They still affect the load speed of the page. They load quickly and first but the rest of the page gets stuck or take too slow to follow.

It’s due to the file size of the thumbnail; its dimension is small enough to be prioritized but the file size is big enough to cause delays. Don’t be afraid to reduce its pixel size to a minimum, even if it means possibly lowering the image quality.

The truth is its dimension is small enough that pixel reduction won’t significantly affect the image quality; if there’s a slight blurriness, it won’t be obvious.

  • Cut Down on Detailed and Decorative Images

All the images in a blog contribute to how long a page loads, from the content photos to the wallpaper, blog title, advertisements, thumbnails, borders, and even the buttons.

Images that contain a lot of details and are mostly decorative can be stripped off for page optimization. Simplify the site’s design; instead of using images, use one-colored border lines.

Minimize advertisements into vertical/horizontal strips not just for optimization but for aesthetic value, too.

There are many free tools found online made for image optimization. There are sites for file reduction, file conversion, and image enhancement that are almost similar to Photoshop.

All it takes is to upload a file, choose whether to reduce pixel size or downgrade dimension size, etc., and then the compressed version will be ready for downloading.

Most of these online tools remove excess data to compress image files by around 20%.

Use Stock Photos

Should your phone or camera not meet the kind of high quality standard that’s best for the blog, use stock photos as an alternative.

It’s effective and requires the least effort in all of the alternative ways to optimize images on your blog.

Most stock photos are in high definition, already optimized and ready for uploading on a website.

There’s no need to worry about resizing because most stock photo are downloaded with an option to choose dimension, pixel size, and so on.

OTHER QUICK TRICKS

There are many alternative ways to optimize images on your blog and some of them are simple.

  • One nifty trick to not have to optimize an image is to actually save it with the option “for web” if it’s available.
  • Adjusting the image’s attributes in HTML won’t do anything to its file size. It will only adjust the display image’s width and height but the size of the file stays the same.
  • Lastly, the pixels per inch (ppi) and dots per inch (dpi) concept in graphic design is mostly irrelevant on the Web. You can save it as low as 70ppi and have it appear almost the same when it’s in 1000ppi.

The best way to not have perform too many alternative ways to optimize images on your blog is to know the page size of your blog.

This way, uploading unnecessary large-sized images can be avoided.

If the blog’s entire dimension is around 750 pixels wide, for example, wallpapers uploaded beyond that size will automatically get shrunk to 750 and look blurred.

Upload wallpapers within the limited space and there can be room for a few small high quality images on the page.