Statically generated sites, or HTML sites generated using static data and templates, offer a wide variety of benefits, including much faster page load speed. If you are building high-traffic landing pages, a static website built with best practices increases conversions because the pages feel faster to the end users—and you get a lift in your search engine rankings to boot. Static site generators like Jekyll, Hugo, and Gatsby combine the speed of static sites with the scale and flexibility many companies require.
However, speed often comes at the cost of the visual experience. Creating pages that look good on screens of different sizes is harder when you can’t write any backend code. The images on your static website tend to be the largest obstacle: serving images in the right sizes to different users is key to a fast static website with visual appeal, but it’s very difficult to do using just the frontend technology.
In this article, we will cover the technical challenges of serving images on static sites, as well as ways you can overcome those problems by using imgix to serve images of the right quality and format to your users.
Static sites are faster than dynamic sites for two main reasons:
- Faster hosting. It is common for static sites to be deployed to a cloud storage service like Netlify or Amazon S3, and such cloud services provide fast access to their files from anywhere in the world. Some developers also choose to use a content delivery network (CDN) that places copies of the website on servers closer to the end users. The CDN speeds up the load time even further. In comparison, it’s more difficult and more expensive to place a copy of a dynamic website on 100-plus servers around the world.
Note: If you’re unsure whether images are slowing down your website and you want to establish a baseline, we recommend checking out our page weight tool.
A one-size-fits-all image doesn’t, in fact, fit all devices. How do we retain the benefits of a static site without the bottlenecks that single-size images bring?
To provide responsive images while also remaining lightweight, you’ll need to serve optimized images for different browsers by creating a server-side script that generates all of the image sizes. Now, if your entire site is static and doesn’t have a backend, you likely don’t want to build and host a backend just for resizing images. Implementing such a backend can be technically complex, and storing pre-generated images in the cloud can be very costly.
We built the imgix platform to serve the correct image size and format on the fly. imgix delivers lightning-fast images without having to wait for any server-side scripts. imgix's on-the-fly generation also reduces your costs compared to pre-generating all image sizes ahead of time.
Using imgix can boost a static site even more, for two reasons:
- imgix applies intelligent compression to the images, achieving the fastest possible image download speed depending on which browser each website visitor uses.
- By default, imgix reduces the size of even the smallest images by simplifying the color palette and removing unnecessary metadata (although you can override this behavior).
The downstream benefits of a higher-performance site are many, perhaps the most significant being that you’ll achieve higher conversion rates and provide a better user experience. imgix is built to work with the tools and platforms you are familiar with. As a result, you can easily optimize your responsive image delivery without having to change how you build your websites.
imgix offers several ways to include images on a static site. Let’s look at three very different ways: using regular HTML, using the
react-imgix library, and using the Jekyll library.
First, let’s look at how to use an
img tag in HTML without imgix. The
srcset attribute is the secret to serving the right image for each client. Placing it inside an
img tag is straightforward:
Although this allows for appropriate sizes to be delivered to the user, the service must generate and store each version of every asset, which can be rather costly. This approach isn’t sustainable with a large number of assets or when you have user-generated content. imgix provides a simple way to integrate the
srcset without having to resize all images ahead of time: by generating the right sizes on the fly.
Using imgix, all you need to do is use the
dpr URL parameters to have your entire library generate the
srcset attributes for your images. To see this in action, we’ll use the image located at https://assets.imgix.net/unsplash/pineneedles.jpg:
Let’s assume that our page design requires the image to be 200 pixels wide for optimal user experience. Here is how we can specify this width using the imgix URL parameters:
With this code, we’re able to serve the best resolution for any device by using its device-pixel-ratio (DPR) as a parameter. It’s that easy!
srcset attribute for all of the different screen sizes can be difficult. But if you’re using React or any other languages we support, you’re in luck—we’ve created an imgix library that automatically sets the
srcset attribute on your images. Each library constructs the
srcset value in a way that maximizes image size and quality while minimizing the time it takes for your customers to download the image.
The React library offers a lot of flexibility, including allowing users to leverage other elements like
<picture>, providing ample room for creative direction. Using these HTML elements with imgix allows you to maintain control over design features like aspect ratio or size when you need to do more than simply deliver a high-resolution image.
Let’s see how a simple child component that renders an image and a header might look:
This is equivalent to the following HTML (compressed for brevity):
This code uses the
<Imgix/> element from the
react-imgix library to render the image. The element uses
sizes, allowing the browser to appropriately render the image immediately using the dimensions the user specifies.
As far as the React library goes, the above use case is just the tip of the iceberg. We can also achieve more complicated goals, like building an entire gallery by mapping images or using Background mode to render an image optimized for the background container’s natural dimensions in the DOM.
Jekyll is a popular static site generator that has its own imgix framework. A single Jekyll Filter,
imgix_url, is responsible for handling the library’s functionality. All you need to do is pass in an image path to the variable. We will use
https://assets.imgix.net as the base URL.
Now just specify the desired image, as well as optional parameters, in an
See this sandbox for an example of the
img tag using the pine needles image from earlier.
This is equivalent to the following HTML:
It’s as simple as that!
In this article, we covered the benefits of static sites as well as some common problems that come with using them. We explained how using imgix can help you maximize the speed of your website and deliver an optimal user experience by serving all images in exactly the right sizes. We also covered three ways to get started with imgix on your static website.
Interested in getting started? Check out how to set up imgix.