You can make your blog post look more interesting and get more people to read it by adding a memorable image or two. On the other hand you can slow down the speed of your website and frustrate and drive away readers with images in your blog posts. Huh, this is confusing. Should I add images or not? Yes, you should – just follow these tips to make your images load as fast as possible:
Choose Your Image Format
There are three main file formats for images on the web JPG (JPEG), PNG and GIF. SVG is a newer format that is now being used more widely.
- JPGs are usually used for photos while GIFs are used for illustrations, or cropped images with transparent backgrounds, such as logos, and animations.
- GIFs use fewer colors than JPGs and PNGs so photos don’t look great in this format. But they are perfect for some illustrations and fun animations.
- PNGs can show images with a variety of transparency effects and look much better than transparent GIFs and JPGs but are usually larger in size and so download a bit more slowly.
- SVG or Scalable Vector Graphics is a newer format that offers advantages on higher resolution monitors.
Decide on Final Image Size
Each pixel always takes 4 bits of memory to download. Larger images contain more pixels so they load in more slowly. Get the best speed and still have nice images by choosing the maximum size of your image. If your image is going in a blog post, find out how wide in pixels is the area of the post and what size image would look best. Your maximum image width might be 560px on one website but 400px on another so you may have to experiment to find the perfect size.
Resize Your Image and Compress
Take your image and resize your image to the size you want it to appear on your post. You can use an image editor such as Adobe Photoshop or a free service such as webresizer or picresize. Consider the image resolution. 72 dpi is usually sufficient quality for most web images. Compress your image to a lower quality. It will still look almost the same but load faster.
Here is a JPG without compression:
JPG – 74KB
JPG – 8KB
Learn more about Optimizing Images for the Web
We’ve covered the basics here but there is much more to learn. Contact us for help with your website and read more on the web. There is a great article on Google on image optimization here to further your knowledge.