Project Files: Images

Images should be placed in the assets/images directory of your project.

There are two ways you can add an image to your site — in the stylesheets or in the Tritium.

Furthermore, in SCSS, you can use sprites (the recommended method) or you may directly use individual images.

Add Images via Tritium

To include an image in your site via Tritium use the asset() function. To specify an image, use the function as follows:

insert("img", src: asset("images/icon.png"))

(Replace “icon.png” with your image.)

Add Images via Stylesheets

Spriting

Create a sprites folder in assets/images. Inside this folder, place all images you want to sprite.

When you reload the server, two files are generated:

  1. The sprite image itself, in the images folder
  2. A sprite stylesheet, in the stylesheets/globals folder. By default this is called _sprites.scss.

The _sprites.scss stylesheet defines a series of classes, one for each image, in the format:

sprites-filename

The stylesheet also contains mixins and variables with the same name assigned. Remember to use @import to import your sprite stylesheet into _main.scss!

To use the sprite, either:

  1. add the class to your HTML element with Tritium, e.g., add_class("sprites-filename")
  2. insert a new HTML element with Tritium, e.g., insert("div", class: "sprites-filename")
  3. extend the class or include the mixin to a pre-existing class or ID with Sass, e.g., @include sprites-filename or @extend .sprites-filename

You can also use spriting to automatically implement retina images.

Since a sprite is a collection of images put into a single image, they often get rather large. This can impact website performance, especially first page loads. As a rule of thumb, once a sprite image file gets larger than 100KB, break it into multiple sprites.

If you require multiple sprite sheets, create subfolders inside the sprites folder to organize your sprites. In this case, two files (a stylesheet and a sprite) would be generated for each folder you have inside the sprites folder. The stylesheet and sprite would have the name of the subfolder you created, and your sprites would have classes in the format:

foldername-filename

For example, the icon bar.png in the subfolder images/sprites/foo is assigned the class "foo-bar".

Directly Use Individual Images

You can also directly use images in the asset/images folder using the Sass function image-url().

Do not reference images by their paths relative to the stylesheet you are in. Depending on the Moovweb project you are running, the relative path will be different for different compiled stylesheets.

The following is the correct way to reference the image asset/images/icon.png:

background: image-url("icon.png")