Image Optimization and Automation(On-page and Technical SEO)
Spaciously used thousands of HD images for its listings. We stored the images in Airtable and Webflow CMS. Images were big, and their formats were not optimized for the web (WebP is Google’s recommendation for browsers). The pages were slow, which impacted performance. So, we decided to optimize all images. Reformatting the images and writing alt text for them was taking a lot of time. So, I built a tool that resizes the images, converts them to WebP and generates alt text using the Open AI Vision API.
Spaciously's home page with hundreds of images.
Slow load time on mobile.
Upload of images to AWS S3 (storage) and reformatting.
AI-generated image alt text.
Spaciously images featured in Perplexity chat.
What I did
First, I researched the best image formats and sizes (inspected Airbnb website quite a lot). Then, I built an image resizing tool on AWS. This tool optimizes the images, stores them in AWS S3 storage with CloudFront, and returns 3 URLs for 3 different sizes: width 1200, width 720 and original size. In the front end, we can now pick the optimal size for the user's screen.
Next, I added another API that generates the alt text using OpenAI vision API. The prompt was: "Generate a description of this images in less than x characters. This image is from a team building activity <activity name> in <activity city>". I added a script in Airtable to call my API and automatically update the CMS with the new image URLs, and the AI-generated alt text.
Next, I added another API that generates the alt text using OpenAI vision API. The prompt was: "Generate a description of this images in less than x characters. This image is from a team building activity <activity name> in <activity city>". I added a script in Airtable to call my API and automatically update the CMS with the new image URLs, and the AI-generated alt text.
Results
1. Automated image optimization directly from Airtable saving hours of manual work.
2. Improved page performance for different screen sizes by 15%.
3. Spaciously images are featured in AI chats because their alt text provides full context.
2. Improved page performance for different screen sizes by 15%.
3. Spaciously images are featured in AI chats because their alt text provides full context.
Tech stack
Airtable, Webflow, Node.js, Lighthouse (audit), JavaScript, OpenAI Vision API, AWS Lambda, AWS S3, AWS CloudFront, and Sharp library (for reformatting).