When I first started in web design (in the late 90’s), there was a lot of emphasis on learning about file formats, file naming conventions, and other technical aspects that don’t seem to be talked about these days. It’s easy to feel like you’ve fallen behind on the latest developments. For example, I was talking about images on social media recently and someone mentioned WebP files.
I was still in the mindset of using JPGs and PNGs, so I had to do some research. I had some awareness of WebP as an image file format, but I thought it required fallbacks and additional effort to implement. However, it turns out that WebP is supported by basically everything now, so you can use it as a replacement for JPG and PNGs. So I made the decision to switch over to using WebP images everywhere.
Photo editors don’t commonly offer WebP export, but that doesn’t affect me. I use Sketch for a lot of my design, and for photos, I’ve automated the resizing using a Jekyll plugin. Since most of my sites are built with Jekyll, I have started building a collection of custom plugins for tasks where there aren’t good alternatives available, and the first one I made is an image resizer.
My plugin is based on Jekyll Resize by Michael Currin (which is a fork of Jekyll Resize by CloudCannon). This plugin generates resized images in different dimensions, but with one modification - it converts all generated images to WebP format.
Writing Jekyll plugins requires knowledge of Ruby, a programming language I have no experience in. While I can read the code and make tweaks, writing Ruby from scratch is a bit beyond me. That’s where my coding buddy ChatGPT comes in handy.
Creating a Jekyll plugin with ChatGPT is surprisingly easy. You tell it the language/framework, define inputs and outputs, and it does a remarkably good job of making the thing work.
Below are a few tips for successful ChatGPT programming:
- Be specific with your instructions.
- Be prepared to go through multiple code and test iterations.
- If you change the code, then give ChatGPT the updated code so you’re working from the same base.
- Do some research and find code snippets/open source projects that do roughly what you want and ask it to adjust them.
- Stick to small(ish) focused tasks.
- If you want changes, then ask for one at a time.
- If it writes code and stops writing, then it’s run out of “API Tokens”. You can tell it to continue, and it will keep on writing the code.
To successfully work with ChatGPT or any AI assistant for coding tasks like this, it helps a lot if you already have some programming experience since you know how to ask and talk about your request and have a better idea of what to ask for. Researching and understanding exactly what you want your plugin to do and how it should work is also crucial.
Now that I’ve created half a dozen plugins, I’m considering documenting them and sharing them on GitHub. This way, others can benefit from my work and contribute to making the Jekyll ecosystem even better.
Now that I have a working plugin, I am using it on multiple websites, and it’s sped up my time to publish new content. I can now upload a single image and have it automatically resized and converted to WebP format. Resizing images was probably the thing I liked least about Jekyll, so it’s great to have a solution.
Frequently Asked Questions
What is WebP and how does it relate to image file formats like JPG and PNG?
WebP is a modern image file format that offers high-quality compression and is supported by most web browsers. It can be used as a replacement for JPG and PNG formats, providing smaller file sizes and faster load times for web images.
What is the benefit of using WebP images on websites?
Using WebP images can significantly improve website performance by reducing image file sizes, leading to faster page load times and better user experiences. This format is also supported by most modern browsers.
How can I automate image resizing and conversion to WebP in a Jekyll-based website?
You can create a Jekyll plugin to automate image resizing and conversion to WebP. Several open-source plugins and resources are available to help with this, and you can customize them to suit your needs.
What is Ruby, and why is it important for creating Jekyll plugins?
Ruby is a programming language that’s commonly used for Jekyll plugins. While you don’t need to be an expert in Ruby to create plugins, having some knowledge of the language can be helpful for understanding and customizing the code.
How can I use ChatGPT to help me with coding tasks like creating a Jekyll plugin?
You can use ChatGPT to assist with coding tasks by providing specific instructions, defining inputs and outputs, and collaborating through multiple code iterations. It’s helpful to have some programming experience and a clear understanding of what you want your plugin to achieve.
Are there any limitations to using ChatGPT for coding tasks?
ChatGPT has limitations, including a token limit and the need for clear and specific instructions. If it stops writing code, it may have run out of API tokens, but you can instruct it to continue. It’s essential to work within these limitations to achieve the desired results.
Let me know what you think on Mastodon, or BlueSky (or Twitter X if you must).
Link to this page
Thanks for reading. I'd really appreciate it if you'd link to this page if you mention it in your newsletter or on your blog.