Beginning Blogging Series: Resize The Right Way

Andrew Martin Creative Director

If you are a blogger, or publish web content via a content management system, you likely use images alongside your content in order to create an enhanced reader experience. Blogging platforms such as Wordpress and CMSs such as Joomla make it easy to add images to your content without a lot of technical experience. Generally, these systems allow the blogger/author to resize the displayed images to the user's liking.

However, many blog / CMS platforms do not physically resize the images; they simply alter how large or small the browser displays the images. This can result in a needlessly large file being loaded, only to display in a relatively small area. The result is wasted disk space, and more importantly, poor image quality and significantly longer page load times.

Allow me to provide you with an example. The image on the left is at its original, 2 megapixel (small by today's standards) digital camera file size. It is being set to display at 200 pixels wide, although its actual pixel width is still 1600. The image on the left has been resized to 200 pixels wide, resulting in a much smaller file, a smooth appearance, and a greatly reduced load time.

Original File 1600x1200 612 KB

Resized to Display Size 200 x 150 16 KB

As you can see the resized version is 2.6% of the size of the original. In other words, the resized image will load about forty times faster than the original. If you are using a modern browser, you may not notice any quality difference between the two images. If you are using IE 6, however, you will notice a great deal of pixelation on the left image. This is due to the fact that the the web browser is performing the scaling on the image, and older web browsers did a terrible job of it.

Luckily, scaling your images to the proper size before you upload them to your blog or CMS is very easy, and doesn't require any expensive software. You can do it via Preview (comes free with Mac OS X) or Paint (comes free with Windows). See below for instructional videos for both Mac and PC users.


TIP: Click the Full Screen button () to view the video in full screen, 720p high definition.


TIP: Click the Full Screen button () to view the video in full screen, 720p high definition.