In the reSRC image URL, we set the image’s width to 400px, and took a 133px slice through the middle of it.

Surely, we could also have done this with a tool on our server like ImageMagick, but using reSRC was faster than rolling our own thumbnails.

Showing different images on desktop and mobile

We had to find a way to load different images on desktop and mobile, in order to achieve the crop described above.

Image tags don’t support image swapping without JavaScript, so we instead used containers with background images. We applied media queries to the containers to serve a different background image depending on the screen width.

Preventing jumping around while loading

Unless you specify the width and height of an image in advance, the page will jerk around as each image loads.

We don’t not know the width and height of the image in advance since the site is responsive, but we still wanted to avoid page jerk.

We do know the proportion of the photos (the relationship between width and height), so we used the padding-bottom technique from Smashing Magazine. With this technique, knowing the proportion has the same effect as knowing the exact width and height, leaving the proper amount of room for the images before they load and eliminating page jerk.

On desktop:

1

2

3

4

5

@media(min-width:451px){

.archive-day-image{

padding-bottom:66.789667896679%;

}

}

… and on mobile, which is a bit different since we’re only taking a center crop:

1

2

3

4

5

@media(max-width:450px){

.archive-day-image{

padding-bottom:33.25%;

}

}

To get the proportion (the % above), we divided the height by the width and multiplied by 100. The proportion is always the same no matter the image’s width.

In closing, content is paramount

Web projects are much more achievable when the content is great. In this case, I was lucky to have beautiful pictures of food. Had Jess not taken pictures of every Cook Smarts meal from the beginning, the visual archives would not have launched as quickly.

Want a screencast about the techniques above? Please leave a comment and let me know, or tweet me @coreyITguy.

To see the archives in their glory, sign up for a test drive account on Cook Smarts.