image-helpers.html.md.eco

---
layout: "post"
title: "Image helpers"
date: 2015-01-21
description: "Helpers when working with images - automatically get image size or embed images in base64"
---

If/else conditions are incredibly useful when you want a part of your code to depend on something else. This gives maximum flexibility to write the type of logic that meets your needs.


## Image size

If you need the exact dimensions of an image all preprocessors have a way to do that instead of you.

<%- @code('Image Helpers', 'dimensions') %>



## Inline image

Encoding images to base64 and inlining them in your stylesheets reduces the number of request a user will make on your site, here's how to automate the conversion of images to base64.

Note that for Stylus you need to use [the url function](http://learnboost.github.io/stylus/docs/functions.url.html#data-uri-image-inlining), the positive side is that you can use any name for the function - `inline-image` is just an example.

<%- @code('Image Helpers', 'inline') %>