How to Format Images for Your Website: A Figma + WebP Workflow

Getting your images right can make or break your website. Oversized, unoptimised images slow down your site, frustrate visitors, and hurt your Google rankings. But here's the good news: formatting images properly is easier than you think.

This guide will walk you through everything you need to know about preparing images for your website, using free tools that anyone can use. No technical experience required.

Why Image Formatting Matters

Before we dive into the how, let's quickly cover the why. Understanding this will help you appreciate why taking a few extra minutes to format your images is worth the effort.

Page Speed Affects Everything

Your website's loading speed directly impacts:

• Visitor experience - People expect pages to load in under 3 seconds. After that, they start leaving
• Search rankings - Google uses page speed as a ranking factor. Slow sites get pushed down in search results
• Conversion rates - Studies show that every second of delay can reduce conversions by up to 7%
• Mobile users - Over half of web traffic comes from mobile devices, often on slower connections

The Real Cost of Unoptimised Images

Here's a real example: A single photo straight from your camera might be 5-10MB. That same image, properly formatted for the web, can be under 200KB - that's roughly 25-50 times smaller, with no visible difference in quality.

Multiply that by every image on your website, and you can see how quickly things add up.

Understanding Image Basics

Let's demystify some image terminology. You don't need to become an expert, but understanding these basics will help you make better decisions.

File Formats Explained Simply

WebP - The Format You Should Use

WebP is the modern standard for web images, and it's what we'll be using throughout this guide. Here's why:

• Smaller file sizes - WebP images are typically 25-35% smaller than equivalent JPEGs
• Excellent quality - No visible difference from the original at proper settings
• Supports transparency - Unlike JPEG, WebP can have transparent backgrounds
• Universal support - All modern browsers support WebP (Chrome, Firefox, Safari, Edge)

When you export your images as WebP, you're giving your website the best possible combination of quality and performance.

What About JPEG and PNG?

You might have heard of these older formats. Here's when they still matter:

JPEG/JPG - The old standard for photos. Still works everywhere, but WebP is better in every way. If someone specifically asks for JPEG, you can provide it, but WebP should be your default.

PNG - Used for logos and graphics with transparent backgrounds. For photographs, always use WebP instead. Your logo files should stay as PNG (or SVG) - don't convert those to WebP.

Dimensions vs File Size

These are two different things that people often confuse:

• Dimensions are the width and height of your image in pixels (e.g., 2560 x 1440 pixels)
• File size is how much space the image takes up (e.g., 150KB)

You can have a small-dimension image with a large file size (if it's uncompressed), or a large-dimension image with a small file size (if it's well-optimised). We want large enough dimensions for sharp display, with the smallest possible file size.

The 72dpi vs 300dpi Myth

If you've worked with print, you might have heard about DPI (dots per inch). Here's the thing: DPI doesn't matter for the web. Screens display images based on pixel dimensions, not DPI.

Don't worry about this setting - just focus on getting the right pixel dimensions and file format.

What Size Should Your Images Be?

The Standard: 2560 x 1440 Pixels

For most website images, I recommend 2560 x 1440 pixels. This is the size I typically request from clients, and here's why:

• Covers most use cases - Works perfectly for hero images, banners, and full-width sections
• Future-proof - Looks crisp on high-resolution (Retina) displays
• Manageable file sizes - When exported as WebP, these images typically stay under 300KB

When to Use Different Sizes

Image Type	Recommended Size
Hero/banner images	2560 x 1440px
Full-width photos	2560 x 1440px
Content/blog images	2560 x 1440px
Thumbnails/cards	800 x 600px
Team headshots	800 x 800px
Logos	Vector (SVG) or PNG with transparency

The Golden Rule

Never upload images larger than needed. If you have a 6000 x 4000 pixel image from your camera, resize it down to 2560 x 1440 before uploading. Your website visitors will never see those extra pixels, but they will feel the slower load times.

Getting Started with Figma

Figma is a free, browser-based design tool that makes image formatting straightforward. You don't need to be a designer to use it for basic image tasks.

Why Figma?

• Free to use - The free plan is more than enough for image formatting
• No installation needed - Works entirely in your web browser
• Easy to learn - Simple interface for basic tasks
• Powerful plugins - We'll use one to export perfect WebP images

Creating Your Free Account

1. Go to figma.com
2. Click "Get started for free"
3. Sign up with your email or Google account
4. Verify your email if required
5. You're ready to go

The Basics You Need to Know

When you first open Figma, you'll see your dashboard. Here's what to do:

1. Click the "+ New" button in the top right
2. Select "Design file"
3. You now have a blank canvas to work with

Key areas of the interface:

• Left panel - Shows your layers and pages
• Centre - Your canvas where you'll work with images
• Right panel - Shows properties of whatever you have selected (this is where you'll see and change dimensions)
• Top toolbar - Tools and menus

Importing Your Images

There are several ways to get images into Figma:

Drag and drop (easiest):

1. Open the folder containing your images
2. Drag the image file directly onto your Figma canvas
3. Drop it anywhere on the canvas

Using the menu:

1. Go to the hamburger menu (three lines) in the top left
2. Click File → Place image
3. Select your image file
4. Click to place it on the canvas

Copy and paste:

1. Copy an image from anywhere (even from a website)
2. Press Ctrl+V (Windows) or Cmd+V (Mac) in Figma
3. The image appears on your canvas

Installing the WebP Exporter Plugin

Figma doesn't export to WebP by default, but there's a brilliant plugin that handles this perfectly.

Step-by-Step Installation

1. In Figma, click the hamburger menu (three lines) in the top left
2. Go to Plugins → Find more plugins
3. In the search box, type "Webp Exporter"
4. Find the plugin called "Webp Exporter" and click on it
5. Click the "Run" button to add it to your plugins

That's it. The plugin is now available in your Figma.

Running the Plugin

To use the plugin after installation:

1. Select the image(s) you want to export
2. Go to Plugins → Webp Exporter
3. The plugin window will open with export options

We'll cover the specific export settings in a moment.

Resizing Images in Figma

Now let's resize your images to the correct dimensions.

Selecting Your Image

Click on the image in your canvas. You'll see:

• Blue selection handles around the corners and edges
• The image properties appear in the right panel

Checking Current Dimensions

Look at the right panel. Under the "Design" tab, you'll see:

• W (width) and H (height) fields showing the current dimensions in pixels

Resizing to 2560 x 1440

Method 1: Type the exact dimensions

1. Click in the W (width) field
2. Type 2560
3. If the chain link icon between W and H is connected, the height will adjust automatically to maintain proportions
4. Press Enter

Method 2: If you need exact dimensions

1. Click the chain link icon between W and H to disconnect it (if you need to set both dimensions independently)
2. Type 2560 in the W field
3. Type 1440 in the H field
4. Press Enter

Maintaining Aspect Ratio

The chain link icon between width and height controls whether proportions are locked:

• Linked (connected) - Changing one dimension automatically adjusts the other proportionally
• Unlinked (broken) - You can set each dimension independently

Tip: For photographs, keep the link connected to avoid stretching or squashing your image.

What If Your Image Doesn't Match 2560 x 1440?

If your image has different proportions (e.g., it's square or portrait), you have two options:

1. Resize to fit - Make the longest side 2560px and let the other dimension be whatever it needs to be
2. Crop to fit - Use Figma's crop tool to adjust the image to the exact ratio you need

Most of the time, option 1 is fine. Your web designer can handle any cropping needed for specific layouts.

Exporting as WebP

Now for the important part - exporting your resized images as optimised WebP files.

Using the WebP Exporter Plugin

1. Select your image (or multiple images if you're batch processing)
2. Go to Plugins → Webp Exporter
3. The plugin window opens

Recommended Quality Settings

The plugin will show you a quality slider or percentage option:

• 80-85% quality is the sweet spot for most images
• This gives you excellent visual quality with significant file size savings
• Below 75%, you might start noticing quality loss
• Above 90%, the file size increases without noticeable quality improvement

My recommendation: Start with 80% quality. If the exported image looks good, you're done. If you notice any issues, try 85%.

Exporting Your Images

1. Set your quality to 80%
2. Click the Export button
3. Choose where to save the file on your computer
4. Give it a proper name (see the next section on naming)

Batch Exporting Multiple Images

If you have several images to process:

1. Hold Shift and click to select multiple images on your canvas
2. Run the WebP Exporter plugin
3. All selected images will be exported

This is a huge time-saver when you have lots of images to prepare.

Naming Your Files Properly

File names might seem trivial, but they matter more than you'd think.

Why File Names Matter

• SEO - Search engines read file names to understand what an image shows
• Organisation - Good names help you (and your web designer) find the right images
• Accessibility - Screen readers may use file names when alt text isn't available

Good Naming Conventions

Use descriptive, lowercase names with hyphens:

✅ Good examples:

• team-photo-simon.webp
• homepage-hero-office.webp
• product-wireless-headphones-black.webp
• about-us-team-meeting.webp

❌ Bad examples:

• IMG_1234.webp (meaningless)
• photo (1).webp (spaces and brackets cause problems)
• FINAL_image_v2_USETHISONE.webp (confusing)
• Screenshot 2024-01-15.webp (not descriptive)

The Rules

1. Use lowercase - hero-image.webp not Hero-Image.webp
2. Use hyphens - team-photo.webp not team_photo.webp or teamphoto.webp
3. No spaces - about-us.webp not about us.webp
4. Be descriptive - bristol-office-exterior.webp not building.webp
5. Keep it concise - Descriptive but not a sentence

Quick Quality Check

Before sending your images, take a moment to verify they look right.

Visual Check

Open your exported WebP file and look for:

• Clarity - Does the image look sharp and clear?
• Colour accuracy - Do colours look natural?
• Compression artefacts - Look for blocky areas or weird halos around edges

If you spot issues, try exporting again at a higher quality setting (85% or 90%).

File Size Check

Right-click the exported file and check its size:

Image Type	Target File Size
Hero/banner images	Under 300KB
Content images	Under 200KB
Thumbnails	Under 100KB

If your files are significantly larger, try:

1. Double-checking the dimensions aren't too large
2. Reducing quality slightly (try 75%)
3. Checking if the source image is already heavily compressed (this can cause larger WebP files)

Test on Different Devices

If possible, view your images on:

• Your computer monitor
• Your phone
• A tablet

This helps catch any issues that might only appear on certain screens.

Organising Images for Handoff

When you're preparing images for your web designer, good organisation saves everyone time.

Simple Folder Structure

Create a folder structure like this:

Website Images/
├── hero/
│   ├── homepage-hero.webp
│   └── about-hero.webp
├── team/
│   ├── team-simon.webp
│   └── team-sarah.webp
├── products/
│   ├── product-item-1.webp
│   └── product-item-2.webp
└── general/
    ├── office-exterior.webp
    └── meeting-room.webp

Using Cloud Storage

Share your organised folder via cloud storage:

• Google Drive - Free, easy sharing
• Dropbox - Great for large files
• OneDrive - Good if you use Microsoft products
• WeTransfer - Good for one-time large transfers

Simply share the folder link with your web designer.

Include a Simple Spreadsheet

For larger projects, a simple spreadsheet helps:

File Name	Page/Section	Notes
homepage-hero.webp	Homepage, top	Main banner image
team-simon.webp	About page	Profile photo

This removes any guesswork about where images should go.

Common Mistakes to Avoid

Learn from others' mistakes:

Uploading Massive Files

The problem: Sending images straight from your camera or phone (5-20MB each)

The fix: Always resize and export as WebP before sharing. A 200KB WebP looks just as good as a 10MB JPEG.

Using Screenshots

The problem: Taking screenshots of images instead of using the original files

The fix: Always track down the original image file. Screenshots are lower quality and often the wrong dimensions.

Forgetting Mobile

The problem: Images that look great on desktop but are too large or poorly cropped on mobile

The fix: View your images on your phone before sending. If text in the image is unreadable on mobile, you might need a different approach.

Over-Compressing

The problem: Setting quality too low (under 60%) to get tiny file sizes

The fix: Stick to 80% quality. The small extra file size is worth the quality improvement.

Using the Wrong Format for Logos

The problem: Saving logos as JPEG, which doesn't support transparency

The fix: Ask your designer for logo files in SVG or PNG format. These should stay as-is, not converted to WebP.

Quick Reference Checklists

Before You Start

• Gather all original image files (not screenshots)
• Create a Figma account if you haven't already
• Install the Webp Exporter plugin
• Create your folder structure for organised export

For Each Image

• Import into Figma
• Resize to 2560 x 1440 (or appropriate size)
• Export as WebP at 80% quality
• Name descriptively with hyphens (lowercase)
• Check file size is under 300KB
• Quick visual quality check

Before Handoff

• All images exported and named correctly
• Organised into logical folders
• Uploaded to cloud storage
• Share link sent to your web designer
• Include notes on where each image should go

Frequently Asked Questions

What if I only have phone photos?

Phone photos are absolutely fine to use. Modern smartphones take excellent photos. Just import them into Figma, resize to 2560 x 1440, and export as WebP. The key is the resizing and format conversion, not where the original came from.

Can I use images from Google?

No. Images found on Google are copyrighted. Using them without permission can result in legal action and fines. Instead, use:

• Your own photos
• Licensed stock photos (paid or free services like Unsplash, Pexels)
• Images you have explicit permission to use

What about logos - should those be WebP too?

Logos should typically stay as SVG (vector format) or PNG (if they have transparency). Ask your designer for the correct logo files. WebP is mainly for photographs and complex images.

How do I know if my image is too compressed?

Look for these signs:

• Blocky or pixelated areas, especially in gradients
• Weird colour banding (stripes where colours should blend smoothly)
• Halos or artefacts around edges

If you see these, export again at a higher quality setting.

What if I don't have Figma?

While Figma is the easiest option, you can also use:

• Squoosh.app - Free browser-based tool from Google, very simple but one image at a time
• Photoshop - If you have it, you can export as WebP
• GIMP - Free, but more complex than Figma

Figma remains my recommendation for most people because it's free, easy, and handles batch processing well.

My image won't resize to exactly 2560 x 1440 - what do I do?

If your image has different proportions, that's okay. Make the width 2560 pixels and let the height be whatever it needs to be. Your web designer will handle any cropping needed for specific layouts on the site.

Conclusion

Properly formatted images make a real difference to your website's performance and your visitors' experience. By following this guide, you'll provide your web designer with perfectly optimised images that load fast and look sharp.

Quick recap:

• Use WebP format for all photographs
• Resize to 2560 x 1440 pixels (standard size)
• Export at 80% quality
• Name files descriptively with hyphens
• Keep file sizes under 300KB
• Organise into folders before sharing

The whole process takes just a few minutes per image once you're familiar with it. That small investment of time pays off in a faster, more professional website.

Need help with your website images, or prefer to have them handled for you? Get in touch - image optimisation is included as part of my web design services.