How to Build a Website with ChatGPT and Optimize Its Images with ShortPixel

AI can build you a website in minutes. Making that website fast is a different story.

Ask ChatGPT for a landing page and you’ll get clean HTML, tidy CSS and a layout that looks great. Then you add your photos, product shots or AI-generated visuals, and suddenly your page is carrying megabytes of images that nobody compressed.

No worries, the fix is not complex. You don’t need a plugin, a CMS or a build pipeline.

In this article, we’ll build a simple website with ChatGPT, zip it up and optimize all its images in one go with ShortPixel’s Archive Optimizer. You don’t need to be a developer to follow along.

Why AI-built websites need image optimization

ChatGPT is great at writing code. It doesn’t compress your images for you.

Images are usually the heaviest files on any page. AI image tools often export PNG files, a format that gets big very quickly. Photos straight from your phone are another culprit. They’re made for zooming and printing, not for a small card on a web page.

Heavy images slow down your page. They’re also one of the most consistent contributors to a poor LCP (Largest Contentful Paint) score, the Core Web Vitals metric that measures how fast your main content appears.

The good news? You can fix all of it in a few minutes.

Step 1: Build your site with ChatGPT

Start with a prompt that describes the whole project, not just one page. The more specific you are, the less cleanup you’ll do later.

Tell ChatGPT what the site is for, which pages you need and how to organize the files. Asking for separate HTML, CSS and JavaScript files plus an images folder keeps everything tidy. Here’s a prompt that works well:

Build a complete 4-page website for a small bakery: index.html, menu.html, about.html and contact.html. Use a shared style.css and script.js. Put every image in an /images folder and reference it with relative paths, using placeholder filenames like hero.jpg and croissant.jpg. Make it responsive. Bundle everything as a ZIP I can download.

Depending on the ChatGPT features available to you, it may be able to create the project files for you directly. If you only get code blocks, create a folder on your computer and paste each file in.

Open index.html in your browser to check the layout. Don’t worry about the images yet.

Step 2: Add your images

Now drop your photos, logos and generated visuals into the images folder. Make sure the filenames match the ones ChatGPT used in the HTML, then reload the page.

It will look great. It will also be loading full-size originals.

Before you move on, right-click the images folder and note its total size. You’ll want that number later.

Step 3: Zip your project

Zip the entire project folder, not just the images.

On macOS, right-click the folder and choose Compress. On Windows, right-click and choose Send to > Compressed (zipped) folder.

Your ZIP can include HTML, CSS, JavaScript and fonts. Archive Optimizer only optimizes JPG, PNG, GIF and PDF files and leaves everything else untouched, which is why it works just as well on any static HTML website as on one built with ChatGPT. It accepts archives up to 20 GB, so a hand-built website won’t come close.

Step 4: Upload the ZIP to Archive Optimizer

Archive Optimizer is a tool built into every ShortPixel account. You upload a ZIP, and you download the same archive with optimized images and the original folder structure intact. No WordPress or live website needed.

Here’s how to use it:

1. Log in to your ShortPixel account, or sign up for free. The free plan includes 100 image credits per month.
2. Open Archive Optimizer from the left-hand menu.
3. Drag your ZIP into the upload area, or click it to select the file.
4. Click Options before uploading and choose your settings.
5. Click Start Upload. Go grab a coffee, and you’ll get an email when your optimized archive is ready.

What does each option do?

• Compression level: Choose between Lossy, Glossy and Lossless. Lossy gives you the smallest files and works best for most websites. Go for Glossy if image quality is your priority, like on a photography portfolio.
• Resize to maximum: Set a maximum size in pixels. For example, 1920 will scale every image down to a maximum of 1920px (wide or tall), keeping the aspect ratio.
• Generate next-gen images: Create WebP and AVIF versions. You’ll get these in the ZIP in addition to the optimized originals.
• Keep EXIF: Leave this off unless you’re a photographer who needs the camera data inside the image.
• Convert CMYK to RGB: If your images are only for the web, you only need RGB. Converting also makes them smaller.

One thing to keep in mind: Archive Optimizer uses one credit for each image it can optimize by at least 5%. Generating a WebP or AVIF version uses one additional credit per image. So a site with 12 images can use up to 12 credits for the optimized originals, or 36 if you also generate both WebP and AVIF. That’s still well within the free monthly allowance.

Step 5: Download the archive and swap the images

Once it’s done, download your optimized ZIP and unzip it.

The folders and filenames match your originals, so you can simply overwrite the old images in your project. Your HTML doesn’t need to change.

If you also generated WebP or AVIF, you can directly use those or serve them with a picture element. The browser picks the first format it supports and falls back to the original:

<picture>

  <source srcset=”images/hero.avif” type=”image/avif”>

  <source srcset=”images/hero.webp” type=”image/webp”>

  <img src=”images/hero.jpg” alt=”Fresh croissants on a wooden board” width=”1600″ height=”900″>

</picture>

Adjust the filenames to match what’s in your downloaded ZIP.

Writing this for every image is tedious. So let ChatGPT do it: paste your index.html into the chat and ask it to wrap every img in a picture element with AVIF and WebP sources, keeping the existing filenames.

Keep the width and height attributes on your images, too. They let the browser reserve space before the image loads, which avoids layout jumps.

Step 6: Check the results

Right-click the images folder again and compare the new size with the number you noted in Step 2.

Next, test the page. If your site is already online, run it through PageSpeed Insights and compare the results. If you’re still working locally, open Chrome DevTools and run Lighthouse instead.

How much will you save? That depends on your originals. When we batch compressed 11,000 JPEG images with lossy compression, the total size dropped by 46.5%, from 536.6 MB to 287.2 MB. Flat graphics usually compress even more, while images that are already compressed leave less room for savings.

Automate it for bigger projects

The ZIP routine is perfect for a small site. It gets old when you update images every week. Here are three ways to automate it:

• Command line: If you’re comfortable in a terminal, you can optimize entire image folders with the ShortPixel CLI. You can plug it into your build process or run it as a cron job.
• WordPress: If your ChatGPT prototype grows into a WordPress website, the ShortPixel Image Optimizer plugin optimizes new uploads automatically. Use Media > Bulk ShortPixel for the images you already have.
• Adaptive Images: This WordPress plugin handles resizing, optimization, next-gen conversion and CDN delivery for all your images.

You’ll find all of them, plus the API and developer libraries, on the ShortPixel products page.

Conclusion

ChatGPT can get your website built in an afternoon. ShortPixel makes sure it loads just as fast.

Write the prompt, add your images, zip the folder, upload it to Archive Optimizer and drop the results back in. That’s the whole workflow, and it works for any static website, AI-built or not.

Smaller images mean faster pages, happier visitors and less bandwidth to pay for. Now you’re set to ship a site that looks great and loads fast.

Happy optimizing!

FAQs