Image Optimisation

‹ Back

For a broad overview of image compression and optimisation, check out images.guide.


Static assets

Until Ornament moves to webpacker, you will need to optimise your images by hand.

There are some handy bash/terminal options to make the process quicker.


Dragonfly optimisations

Dragonfly has an inline-syntax for resizing and optimising images.

# sizing
<%= resource.image.thumb("200x200#").url %>

# converting to compressed jpg
<%= resource.image.thumb("200x200#").encode("jpg", "-quality 75 -strip -interlace Plane").url %>

# auto-orienting
<%= resource.image.convert("-auto-orient").thumb("200x200#").encode("jpg", "-quality 75 -strip -interlace Plane").url %>

Helpers

Ornament comes with an out-of-the-box solution for converting images to jpgs and compressing them:

<%= optimised_jpg(resource.image, "200x200#").url %>

This will automatically convert to jpg and run some basic optimisations.

Using constants

If you find yourself using the same resize commands over and over again, consider moving your sizes in to a constants file.

The common pattern we use at Katalyst is to create a constants file in the initializers folder:

# config/initializers/constants.rb
module App

  # Image sizes
  IMAGE_SIZE_FACEBOOK = "1200x630#"
  IMAGE_SIZE_TILE = "300x300#"

end

Then you can use along with the jpg helper above, or just inline as a usual dragonfly command:

<%= optimised_jpg(resource.image, App::IMAGE_SIZE_TILE).url %>
<%= resource.image.thumb(App::IMAGE_SIZE_TILE).url %>

ImageOptim gem

If you need a flexible compression solution with Dragonfly, maybe consider using ImageOptim with a custom dragonfly processor.


Lazyloading

Until the lazyloading spec is shipped, Ornament suggests using lazysizes.

Lazysizes ships in Ornament so it's ready to be used out of the box.