Image Optimisation‹ Back
For a broad overview of image compression and optimisation, check out images.guide.
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 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 %>
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.
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 %>
If you need a flexible compression solution with Dragonfly, maybe consider using ImageOptim with a custom dragonfly processor.
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.