Tutorial
A practical, beginner-friendly tutorial to choose, resize, name, and optimize website images that look professional and load fast.
Create your site free →Gather your existing brand, team, product, or location images first.
Know which pages you want to improve, starting with the homepage.
Set aside a short block of time to review, resize, and upload images.
Have a simple idea of your style, such as warm, clean, modern, or friendly.
Make sure you can open, rename, and upload image files from your device.
If you searched for camels toe photos but what you really need is a clear way to choose and optimize your website images, this guide will help. In about 20 minutes, you will learn how to pick the right photos, size them correctly, improve loading speed, and make your site look more professional without needing technical skills.
Before you upload anything, give every image a job. Most business owners pick photos because they look nice, then wonder why the page feels messy or slow. A better approach is to match each image to a specific purpose on the page.
Open your homepage, services page, product page, and about page. For each section, ask one question: what should this image help the visitor do? Usually the answer is one of four things.
Write a quick note beside each section, for example: “Hero image should show the product in use,” or “About section needs a real founder photo.” This one-minute planning step stops random image choices and makes the rest much easier. If you are using Selspy, you can simply ask in the chat to suggest image types for each page section, and it will organize the structure for you.
Now choose the image format that fits the page. Not every section needs a large photo. In fact, using fewer, more purposeful images usually improves both design and speed.
As you review options, check three things: clarity, consistency, and relevance. The photo should be easy to understand in one second, should match your other images in tone, and should directly support the text beside it.
A quick test works well here: shrink the image to phone size. If the main subject becomes unclear, pick a different image or crop it tighter.
A professional website does not need expensive photography, but it does need consistency. When one image is dark, another is bright, one is formal, another casual, the site feels unplanned. Visitors may not know why, but they notice.
Pick a simple style guide before uploading more images. You only need a few decisions.
Keep these choices in a note on your phone or computer. Then compare every new image against that note. If it does not match, skip it. This helps your site feel trustworthy and intentional.
If you have a mixed set of existing photos, pick the style that best matches your business goal. A luxury brand may lean cleaner and more minimal. A local family business may benefit from warmer, more personal images. With Selspy, you can describe your brand style in plain English and ask for image suggestions that fit that exact look.
This is where most website owners lose speed. They upload a huge photo straight from a phone or camera, often 3000 pixels wide or more, even though the website may only display it at 1200 pixels. That wastes loading time and can hurt the visitor experience.
Use these practical starting sizes for most business websites:
For file size, aim for these rough targets:
Crop with purpose. Put the most important subject in the center or slightly off-center, depending on the layout. Remove empty space that does not add meaning. If text will sit over the image, leave a calmer area where the text can remain readable.
Also check vertical versus horizontal shape. A wide homepage section usually needs a landscape image. A portrait photo may be perfect for a team profile card. Matching the shape to the layout prevents awkward cropping later.
If this feels technical, Selspy can handle much of it automatically when building your pages, but it still helps to start with sensible image sizes and good crops.
After resizing, compress the image so it stays clear but loads quickly. Compression reduces file weight, which helps pages open faster, especially on mobile connections.
For most website images, use these simple rules:
When exporting, choose medium to high quality, not maximum quality. Most visitors cannot see the difference between a huge file and a well-compressed one, but they absolutely notice slow loading.
Do one visual check after compression. Open the file and zoom in enough to see faces, text areas, and product edges. If you notice blocky artifacts, strange smudges, or fuzzy details, slightly increase quality and export again. The goal is not perfection at 300 percent zoom. The goal is a clean image at normal website viewing size.
Good image SEO starts with small details. File names and alt text help search engines understand the image, and they also improve accessibility for visitors using screen readers.
Before uploading, rename each file clearly. Instead of IMG_4821.jpg, use a descriptive name like:
Use lowercase letters and hyphens. Keep it descriptive, but short.
Next, add alt text. Alt text should describe what is actually in the image and, when relevant, connect to the page topic. It is not a place to stuff keywords repeatedly. Good alt text sounds natural.
Examples:
If the image is purely decorative and adds no meaning, you may leave alt text empty depending on the setup. But for important content images, always add it. In Selspy, you can ask in the chat to generate clear, relevant alt text for all page images, which saves time and keeps the wording consistent.
An image can look great in a folder and still fail on the website. The final step is testing it where customers will actually see it. Open each page on a phone and a desktop screen and check the full experience.
Look for these issues:
Then ask one practical question per page: does the image help the visitor take the next step? On a service page, the image should build trust. On a product page, it should reduce doubt. On a homepage, it should support the main offer immediately.
If one image is not helping, remove it. A cleaner page often performs better than a crowded one. With Selspy, you can request layout or image adjustments in plain English, like “make the hero image crop better on mobile” or “replace generic stock photos with warmer team visuals,” and the system handles the heavy lifting.
The same image mistakes appear on small business websites again and again. The good news is they are easy to fix once you know what to watch for.
If you fix just these seven issues, your website will usually feel faster, cleaner, and more professional almost immediately.
Once your images are chosen and optimized, do a final page-by-page review. Check your homepage first, then your top service or product pages, then your about page. Prioritize the pages that receive the most visits or produce the most sales.
Next, create a small image routine for the future. Every time you add a new page or product, repeat the same sequence: choose the image purpose, match the style, resize, compress, rename, add alt text, and test on mobile. This keeps your website consistent as it grows.
If you want the simplest path, use Selspy and ask for help directly in the chat. You can describe the look you want, request better image placement, and let the platform handle much of the formatting and page setup automatically. That way, you stay focused on running your business while your website images keep working hard in the background.
Tell Selspy what you do and what you offer.
Design, copy and images ready in minutes.
Live on your own domain the same day.
For a simple business website, you can usually improve your key images in 20 to 45 minutes. Start with the homepage and your most important sales pages first.
No. You need relevant, clear, consistent images more than expensive ones. Good phone photos with proper lighting and careful cropping can work very well.
A useful target is under 300 KB for large hero images and under 200 KB for standard content images. The exact size depends on the layout, but smaller is usually better if quality stays clean.
Yes. The process is mostly about choosing the right image, resizing it sensibly, and filling in simple details like file names and alt text. Selspy also automates many of the harder setup tasks.
Use real photos whenever possible, especially on your homepage, about page, and service pages. Stock photos can help, but too many generic ones can make the site feel less trustworthy.
Use only the number needed to support the message. One strong image per section is often enough, and fewer better images usually perform better than many weak ones.
Explore more: Selspy · Pricing · Get started
Describe your business and get a professional website with AI in minutes. No code, no agency.
Create your site free →