Browse files

Post 13: Image Thumbnails

  • Loading branch information...
akmurray committed Sep 17, 2012
1 parent e2ab74e commit 266bee8839e36297db1fe4256ff1d3e331712c52
@@ -4,12 +4,40 @@
xml:base="" xmlns="">
type="text"> | Aaron Murray's Blog Feed</title>
type="text">Post 13: Image Thumbnails</title>
&lt;p&gt;Way back in &lt;a href='#blog-post-8'&gt;Post 8&lt;/a&gt; I mentioned 2 ways to reduce the impact of images on bandwidth. The method I tackled then was to automatically compress the png images in the build script. In this post, I will show you how to further reduce the impact by creating and displaying thumbnails instead of scaling down the original image using HTML (&lt;span class='code'&gt;&amp;lt;img ... &lt;strong&gt;width=100&lt;/strong&gt; /&amp;gt;&lt;/span&gt;).
&lt;div class='callout'&gt;
&lt;img src='/img/blog/posts/post-13-request-payload-before-thumbnails-chart.png' alt='Request payload before thumbnails'&gt;
&lt;span class='citation'&gt;Request payload before using thumbnails (inspected using Firefox, &lt;a href='' target="_blank"&gt;FireBug&lt;/a&gt;, and &lt;a href='' target="_blank"&gt;YSlow&lt;/a&gt; plugin)&lt;/span&gt;
&lt;p&gt;As you can see from the chart, fully 98% of the data that users have to download from the site is for images. Of those 24 images, 12 were fullsize blog post screenshots, which weighed in at a portly 1.17MB. Those 12 little screenshot previews accounted 77% of the size for the entire page - and that is after we compressed the images to reduce about one-third of the filesize.
&lt;p&gt;I made a sample thumbnail by resizing the image down to 100 pixels wide produced a new preview image that was 90% smaller than the original. The prospect of reducing 77% of the entire request payload by 90% got me excited.
&lt;p&gt;Given that I still despise the copy/paste portion of creating new blog posts, and knowing that I don't want to make it harder on myself to release a blog post, I wanted a solution that was 100% automated. There already exists a &lt;a href='' target="_blank"&gt;build script for this site&lt;/a&gt; so I knew that I wanted to tie into that step.
&lt;script src=""&gt; &lt;/script&gt;
&lt;p&gt;Notes on the batch file:
&lt;li&gt;The &lt;span class='code'&gt;FOR&lt;/span&gt; loop gets a list of all of the screenshot files that don't have "thumb" in the name&lt;/li&gt;
&lt;li&gt;&lt;span class='code'&gt;SETLOCAL ENABLEDELAYEDEXPANSION&lt;/span&gt; is special inside of loops so that variables can be set with each iteration&lt;/li&gt;
&lt;li&gt;A new thumbnail file is only created if one does not exist already&lt;/li&gt;
&lt;li&gt;&lt;span class='code'&gt;convert.exe&lt;/span&gt; file comes from the free image utility library &lt;a href=''&gt;ImageMagick&lt;/a&gt;&lt;/li&gt;
&lt;p&gt;The result is that the sum total filesize of the first 12 post thumbnail images is 111KB (a savings of over 1 megabyte). I also removed the &lt;span class='code'&gt;width=100&lt;/span&gt; attributes from the previews because it was no longer necessary. Not too shabby for a few lines of code added to the build script.
type="text">Post #12: Favicon</title>
type="text">Post 12: Favicon</title>
@@ -69,7 +97,7 @@
type="text">Post #10: The SEO Plan</title>
type="text">Post 10: The SEO Plan</title>
@@ -126,15 +154,15 @@
type="text">Post #8: Automatic Image Compression</title>
type="text">Post 8: Automatic Image Compression</title>
&lt;p&gt;Alrighty, let's talk about bandwidth for a moment. Two and a half weeks ago, this site was started as a single HTML page and no external file includes aside from a screenshot. The purpose of the screenshot was to capture a visual change history of the blog so that readers could easily see how the site changed with each post without having to get the &lt;a href='' target="_blank"&gt;code from github&lt;/a&gt; at a certain point in time and view the site locally.
&lt;p&gt;These images are saved as &lt;a href='' target="_blank"&gt;PNG&lt;/a&gt; files, which is a lossless image format meaning that all of the original image data is still intact. Unlike &lt;a href='' target="_blank"&gt;JPEG&lt;/a&gt; files, PNG files won't mess with the fine details of your image in order to make the file size smaller. This is both good and bad.
&lt;div class='callout'&gt;
&lt;img src='/img/blog/posts/png-vs-jpg.png' alt='PNG vs JPEG visual comparison. Source:'&gt;
&lt;img src='/img/blog/posts/post-8-png-vs-jpg.png' alt='PNG vs JPEG visual comparison. Source:'&gt;
&lt;span class='citation'&gt;Image comparing PNG (left) vs JPEG (right) detail&lt;/span&gt;
&lt;p&gt;The upside is that the screenshots look just like my screen did when I took them. The downside is that the files are bigger than a comparative jpeg file.
@@ -171,7 +199,7 @@
type="text">Post #7: Links to GitHub</title>
type="text">Post 7: Links to GitHub</title>
@@ -184,7 +212,7 @@
type="text">Post #6: Traffic Analytics</title>
type="text">Post 6: Traffic Analytics</title>
@@ -204,7 +232,7 @@
type="text">Post #5: RSS, Atom, and Build Tools</title>
type="text">Post 5: RSS, Atom, and Build Tools</title>
@@ -228,7 +256,7 @@
type="text">Post #4: For the Machines</title>
type="text">Post 4: For the Machines</title>
@@ -285,7 +313,7 @@
type="text">Post #3: Basic Visual Cleanup</title>
type="text">Post 3: Basic Visual Cleanup</title>
@@ -315,7 +343,7 @@
type="text">Post #2: Deploying New Posts</title>
type="text">Post 2: Deploying New Posts</title>
@@ -358,7 +386,7 @@
type="text">Post #1: The Plan</title>
type="text">Post 1: The Plan</title>
@@ -368,7 +396,7 @@
&lt;p&gt;There have been tons of questions swirling around in my head, like:
&lt;li&gt;Blog: Roll my &lt;a href='' target='_blank'&gt;own&lt;/a&gt; &lt;a href='' target='_blank'&gt;site&lt;/a&gt; &lt;a href='' target='_blank'&gt;again&lt;/a&gt;? or use seasoned blog &lt;a href='' target='_blank'&gt;software&lt;/a&gt; with &lt;a href='' target='_blank'&gt;heavy community support&lt;/a&gt;?&lt;/li&gt;
&lt;li&gt;Host: Use a &lt;a href='' target='_blank'&gt;cloud&lt;/a&gt; &lt;a href='' target='_blank'&gt;application&lt;/a&gt; &lt;a href='' target='_blank'&gt;host&lt;/a&gt;? Use a cheap host that &lt;a href='' target='_blank'&gt;supports simple scripts&lt;/a&gt; for common apps? Host out of the &lt;a href='img/blog/posts/aarons_server_rack.jpg' target='_blank'&gt;server rack in my house&lt;/a&gt;?&lt;/li&gt;
&lt;li&gt;Host: Use a &lt;a href='' target='_blank'&gt;cloud&lt;/a&gt; &lt;a href='' target='_blank'&gt;application&lt;/a&gt; &lt;a href='' target='_blank'&gt;host&lt;/a&gt;? Use a cheap host that &lt;a href='' target='_blank'&gt;supports simple scripts&lt;/a&gt; for common apps? Host out of the &lt;a href='img/blog/posts/post-1-aarons_server_rack.jpg' target='_blank'&gt;server rack in my house&lt;/a&gt;?&lt;/li&gt;
&lt;li&gt;Platform: Java? .NET? "pure" HTML/JS? &lt;a href=''&gt;TCL/CGI&lt;/a&gt;? Something more &lt;a href='' target='_target'&gt;hip&lt;/a&gt;?&lt;/li&gt;
&lt;li&gt;Audience: Should I be connecting with &lt;a href='' target='_blank'&gt;other developers&lt;/a&gt;? Other small-business owners? Friends? Family? &lt;/li&gt;
&lt;li&gt;Content: Is this going to be a personal activity log? Professional journal? Or just another tech experiement?&lt;/li&gt;
Oops, something went wrong.

0 comments on commit 266bee8

Please sign in to comment.