Sunday, 12 August, 2018 UTC

How to add responsive images to Ghost

How to add responsive images to Ghost

Summary

Ghost is a powerful blogging platform written in JavaScript, designed to simplify the process of creating online blogs and publications. Users love it because it offers a slick markdown-based editing environment, super simple content management/scheduling tools, built in SEO features, and more.
If you're one of the many individuals who's tapped into the world of online blogging, you're probably already aware of the number of images your blog contains. One could argue that images are absolutely essential to the success of a blog. On the other hand, images account for a huge portion of your blog's load time. And let’s be honest, anyone with an online presence knows that a slow site leads to a slow death for a brand. You want your users to have a good first impression of your blog ... and speed can help achieve that.
Now, I’m not saying go delete all of your blog’s beautiful images for the sake of speed. I'm saying that there’s actually a way to optimize your images to make your blog both aesthetically pleasing and fast.
Responsive images
Responsive images make apps really fast. When you serve images that are properly sized and compressed, you're providing your users with a fast, enjoyable experience when they visit your site.
With that being said, one of the most common issues associated with a Ghost Blog is image size (both in pixels and bytes). Most themes use large images for stories. This requires you to upload large images that'll look good on large screens. But this also means that small screens will get those same large images ... much larger than what they need.
Browsers are smart enough to recognize if the images you’re serving are appropriate for the screen size or not, and will compromise load time if not. To make browsers (and users) happy, you should be serving smaller versions of images to smaller screens, and larger versions of images to larger screens.
How to tackle this problem
There are a few things you can do to make your images responsive for any device size and consequently, make your blog fast.
  1. Convert images to the WebP image format
  2. Properly size images based on your theme’s style
  3. Add srcset attributes to image tags
Fly Edge Apps make Ghost Blogs fast
Now, when we say "fast", we're really talking about "what humans perceive when they use an app". This is not a single metric, but Google Lighthouse is a neat tool for reducing a complex set of measurements into one useful score. Lighthouse measures user perceived application performance. When you run an audit against your site, you’ll get a score of 0-100 which basically tells you how fast your site is (100 is great and 0 is ... well, let’s not talk about 0).
We managed to make a Ghost blog about 30% faster by adding responsive images. Let’s take a look!
Lighthouse score before optimizations

The images above represent a Ghost Blog’s Lighthouse score before making images responsive. A performance score of 71 is actually not terrible, but it's definitely not ideal, and probably not perceived as fast by your users. Also note that this blog's images are way oversized. The slot where the image lives is only 320px, which means there's no reason for this image to be 1000px and take up 555KB of space. The image is also in JPEG format, and could be converted to a more efficient format to take up less space.
Lighthouse score with optimizations


These "after" images represent the same exact blog, except this time, the blog is integrated into a Fly Edge App. This Fly Edge App automatically improves the performance of any Ghost blog with one-click.

What does it do?

This app uses the default Casper theme. The Casper theme is well designed and already loads JavaScript + Style assets intelligently ... so this app primarily optimizes images:
  1. Serves webp when browsers send an Accept: image/webp header
  2. Resizes images in listings to fit the styles
  3. Adds srcset attributes to image tags to detect screen size and serve appropriately sized images
Overall, this app optimizes any Ghost blog for maximum performance by appropriately resizing all images to match the theme’s styles. It also converts images to WebP, a modern format that developers use to create smaller, richer images that make sites faster. In addition, it adds srcset attributes to images tags, which defines multiple sizes of the same image and allows the browser to appropriately select which image source to use based on the user’s device size. This app works out of the box for the default Casper theme and can be easily modified to support other themes.
How to accelerate your own Ghost Blog with responsive images
We made it easy to integrate your own Ghost blog into a Fly App.
  1. First, make sure you have the latest version of Fly installed by running npm i -g @fly/fly
  2. git clone https://github.com/superfly/ghost-accelerator.git
  3. cd ghost-accelerator
  4. fly server
  5. Visit http://localhost:3000 to view the app
You should see the "demo" version of a Ghost blog (https://demo.ghost.io/)
  1. Navigate to the index.js file and change const subdomain from "demo" to your own Ghost Blog's name
  1. Save and visit http://localhost:3000 again
You should now see your own Ghost Blog with properly sized, optimized images in the WebP format! Run a Lighthouse audit and see for yourself just how well your blog is performing ... and then, deploy!
  1. Run fly login (make sure you have a Fly account first, if you don’t, register at https://fly.io/app/sign-up)
  2. Run fly apps create <app-name> to create a Fly Edge App
  3. Then run fly deploy to deploy your Fly Edge App
Hooray! Your Ghost Blog is now being served from a global network of fast edge-servers, speeding it up around the globe while all of it's images are being optimized on-the-fly.
** Note that this blog uses the default "Casper" theme. If your blog uses a different theme, you'll have to alter the image selector's in index.js.
Conclusion
Users deserve fast loading sites and beautiful, high-quality images. But it can sometimes be tricky to find the right balance between image size and quality. Luckily, we can use the methods above to help achieve perfect harmony. Now, small screens can get small images and large screens can get large images. It's a pretty powerful little tool...
Check this app out on GitHub, try it out for yourself and let us know what you think!

... more @ fly.io

fly.io