How images work on launch.ly

Ever wondered how images work on launch.ly? If you are like most ordinary people, then you probably haven't ... but I am going to explain it because it is pretty fundamental to designing a great site.

Ever wondered how images work on launch.ly? If you are like most ordinary people, then you probably haven’t … but I am going to explain it because it is pretty fundamental to designing a great site.

We develop websites as a profession and many of our clients want very high quality sites, but their budgets are quite limited. So we need to apply well proven techniques to reduce human workload as much as possible and yet still achieve quality results.

One of these techniques is to design to a grid system. In launch.ly, you can select a range of thumbnails to be automatically generated that match a given grid system.

There are many grid systems out there and so we had to make a hard decision and pick only one to support.^1 We chose 960.gs with a 24 column grid.

If you go to your site settings, there is a section under extras for you to select which asset versions are automatically generated. After saving your changes, ALL uploaded assets will begin to regenerate thumbnails … it may take some time depending on how many images you have uploaded.

So now you know that when you upload an image, a whole heap of thumbnails are automatically generated, saving you a fair bit of photoshop time. But, did you know where it uploaded your image to? I do!

Your images are directly uploaded to S3, a storage service provided by Amazon and this storage is connected to Amazon’s CloudFront Content Distribution Network (CDN). A Content Distribution Network distributes your files to servers all around the world.

When you need the file, it is fetched from the geographically closest server to improve connection and download times. Additionally, by using a CDN, you improve the performance of your site by increasing the number of simultaneous servers your browser downloads assets from further increasing performance.

There are a few other things such as SSL, but you don’t need to worry about it. The image filter generates for you the correct urls to the file on the CDN over the correct servers.

Here is an example of correctly inserting the 6 column thumbnail of the hero image (first image) in a snippet:

{{ item.hero_image.column_6 | image }} Pretty simple … just the way I like it.

^1 It’s on our roadmap to come up with a more flexible method to support any possible grid system. We’ll post details on the launchpad when we come up with something.

by Craig Sullivan
launch.ly

27 Mar 2012