Compass/compass

--- 
title: Compass Inline Data Helpers
crumb: Inline Data
framework: compass
meta_description: Helper functions for embedding inline data.
layout: core
classnames:
  - reference
  - core
  - helpers
documented_functions:
  - "inline-image"
  - "inline-font-files"
---
%h1 Compass Inline Data Helpers

#inline-image.helper
  %h3
    %a(href="#inline-image")
      inline-image(<span class="arg">$image</span>, <span class="arg" data-default-value="inferred">$mime-type</span>)
  .details
    %p
      Embeds the contents of an image directly inside your stylesheet,
      eliminating the need for another HTTP request. For small images,
      this can be a performance benefit at the cost of a larger
      generated CSS file.
    %p
      Like the <a href="#"><code>image-url()</code></a> helper, the path
      specified should be relative to your project's images directory.

#inline-font-files.helper
  %h3
    %a(href="#inline-font-files")
      inline-font-files([<span class="arg">$font</span>, <span class="arg">$format</span>]*)
  .details
    %p
      Like the <a href="/reference/compass/helpers/font-files/"><code>font-files()</code></a> helper, but the font
      file is embedded within the generated CSS file.