While a blog may be mostly text, images play a big part as well. Good imagery can draw attention to an article or convey an idea more clearly than text alone.
This blog is no exception.
After importing the blog from WordPress, it’s time to deal with the images.
The Trouble With Images
Images require some effort to handle them effectively. Unlike text, images can be rather large, taking up disk space and network bandwidth. If you don’t handle images correctly, the result is a slower experience for the users and a negative impact to SEO rankings.
Handling images “correctly” on the web means resizing and reformatting your images based on the size and capabilities of the browser.
The Right Size
Those who visit your website are using a myriad of different devices, each with different screen sizes and internet connectivity. It makes no sense to serve an image that’s 2000x2000 to a device with a screen that is only 400 pixels wide and using a slow cellular connection.
Resizing your images to the correct size for the user’s device is the key to making your website perform well.
There are a variety of tools to resize your images. What you choose depends on how you plan to host your images.
You could use a tool like ImageMagick to process all your images and generate the sizes you need. This works well if you have your own file server where you can host these images and you have a process to generate the image sizes you need as you create new content.
The approach I’ve taken is to use an image hosting service, which also acts as a Content Delivery Network (CDN). These services no only host your images (in most cases), but they will automatically resize your images on demand, as you need them and keep those resized images cached close to the user requesting them.
I looked at several of these services, specifically:
For me, ImageKit made the most sense because it had the right combination of image hosting, features and price. (Did I mention I like free?) Your evaluation may come to a different conclusion.
Serve it Up
So I have a way to serve different image sizes, how to serve those images in the browser? Doesn’t that require a lot of complicated server side code?
Have no fear. HTML has your back.
The easiest solution is to use the <img/> element you’re already familiar with. There are two additional attributes available that make it easy to serve the right image: srcset and sizes.
The srcset attribute defines a comma-separated list of image URLs and their associated widths. sizes attribute defines which sizes to use in which conditions. This is specified by using media queries (similar to what you might do in CSS) which map to the image size to download.
For example, the featured image on this blog post looks like this:
1 | <img |
Here, we define an image that is served in two different sizes: 440 pixels wide and 1200 pixels wide. The sizes attribute specifies that when the browser width is less than 480 pixels wide, use the image that’s closest to 440 pixels wide (the first image in our srcset), otherwise use the 1200 wide image. The 440 image is usually about 12K whereas the 1200 wide image is 50k. This is quite a difference and can mean a lot on mobile devices using a slower or limited connection.
If you need more control than this, there’s another HTML element available: the <picture> tag. This gives you the power of image srcsets, but also allows you to select different file formats, depending on the capabilities of the browser. For example, you could prefer WEBP images but fall back to JPG on browsers that don’t support WEBP, such as Safari.
In my case, the <picture> element was overkill for what I needed. Choosing different sizes was good enough, and I was able to handle the image format selection a different way. ImageKit has a nice feature where it will automatically reformat the image based on the browser requesting it. Chrome and Firefox might get a WEBP image, but Safari gets JPEG.
I’ve only scratched the surface here, for more details, check out the Mozilla docs on responsive images for more in-depth coverage of these tags.
Picture This
Images can be difficult to work with. But if you use the right tools to resize and reformat them, along with a little know-how to get them into your website, the picture becomes much clearer.
Question: What do you find is the hardest thing when dealing with images?