Home » All Lessons » Preparing Images for Web Use

LESSON 4.5

Preparing Images for Web Use

Images 1-2-3: 1. Crop, 2. Resize, 3. Optimize

Learn the three things every web image needs: the right format, the right dimensions, and a lean file size, so your pages load fast and look great.

💡 The Concept

Preparing images for web use is a step many beginners skip, but it has a bigger impact on page load speed than almost anything else. Every image should go through three steps before it goes on a website: Crop, Resize, and Optimize.

The Images 1-2-3

Before any image goes on your website, run it through these three steps. Skipping any of them leads to slow page loads, distorted photos, or an unprofessional look.

Crop — Frame your subject and establish the correct aspect ratio for your design.
Resize — Reduce the pixel dimensions to what the web page actually needs — no more.
Optimize — Compress the file size so it loads quickly without sacrificing quality.

Step 1: Crop

Cropping means cutting the image down to focus on the subject and fit the shape your design needs. Two things to keep in mind: aspect ratios and never distorting photos.

Aspect Ratios

An image’s aspect ratio is the proportional relationship between its width and height — for example, 16:9, 4:3, or 1:1 (square). On a professional website, images of the same type should maintain a consistent aspect ratio. If you have three gallery photos in a row, they should all be the same shape. Mixing a landscape photo with a portrait and a square creates visual chaos.

Common Aspect Ratios by Use

Headers and banners: 4:1 or 3:1 (wide and short)
Gallery images: 4:3 (standard landscape)
E-commerce product photos: 1:1 (square)

Never Distort a Photo

Never stretch or squish an image to force it into a space. If the aspect ratio does not match, always crop to the correct ratio instead. A distorted photo is one of the most common mistakes beginners make.

How to Crop on Your Computer

Mac — Preview App

Open the image in Preview.
Choose Tools > Rectangular Selection.
Hold Shift while dragging to lock your target aspect ratio, or drag freely and then adjust.
Choose Tools > Crop (or press ⌘K).

Windows — Paint 3D

Open the image in Paint 3D.
Click Canvas in the top toolbar.
Enable Lock aspect ratio.
Drag the canvas handles to crop to your desired dimensions.

Step 2: Resize

After cropping to the right shape, reduce the pixel dimensions to match the space your image will occupy on the web page. A photo from a modern camera can be 4000+ pixels wide — far more than any screen needs. Serving an oversized image wastes bandwidth and slows your page.

The two diagrams below show common layouts and the image dimensions you should target for each slot.

Layout for web page with a hero image showing image sizes needed

Possible web page layout without hero image showing image sizes

Reference Dimensions

Full-width hero image: 1920 × 500 px
Half-width column image (two-column layout): 600 × 450 px
Three-column gallery image: 400 × 300 px
Full-width content image: 1200 px wide

How to Resize on Your Computer

Mac — Preview App

Open the image in Preview.
Choose Tools > Adjust Size.
Make sure Scale proportionally is checked.
Enter the target width. The height adjusts automatically.

Windows — Paint 3D

Open the image in Paint 3D.
Click Canvas in the top toolbar.
Enable Lock aspect ratio.
Enter the target width in pixels. The height updates automatically.

Step 3: Optimize

Resizing gets the pixel dimensions right; optimization gets the file size right. There is a critical difference between image dimensions (width × height in pixels) and file size (measured in kilobytes). A photo at the correct pixel size can still have a bloated file that slows your page.

Downloading Future Please Wait… — Nobody wants to wait for bloated images to load. Optimize your files before uploading them.

File Size Targets

Quick check: if your file manager shows the image size in MB rather than KB, it is not web-ready. Every web image should be measured in kilobytes. Specific targets to aim for:

Hero images: under 200–300 KB
Content images: under 50–150 KB
Thumbnails: under 30 KB

A photo straight from a modern camera or phone can easily be 3–15 MB. That is 10–50 times larger than what your page needs. The wolf.jpg image used in the exercise below is 3854 × 2890 pixels at 3.4 MB — 34 times larger than what the web needs. After going through the Images 1-2-3, it becomes a fast-loading web image measured in kilobytes.

How to Optimize

Resize first — get the pixel dimensions right (Step 2 above).
Compress — use TinyPNG (tinypng.com) for a fast, free online tool. Drag your image in and it compresses it automatically. Target: under 100 KB whenever possible.
Choose the right format:
- JPEG (.jpg) — best for photographs with many colors
- PNG (.png) — best for graphics, logos, and images needing transparency
- WebP (.webp) — modern format with excellent compression for both photos and graphics; supported by all modern browsers
- SVG (.svg) — best for icons, logos, and illustrations that need to scale to any size

Other useful tools: Squoosh (free, browser-based), GIMP (free desktop app), or Photoshop.

Exercise: Try It Yourself

Photographs taken with digital cameras and smartphones are far too large for the web. This exercise makes that concrete.

Step 1. Download this image to your computer:

https://webdevstudents.com/old/images/wolf.jpg

Step 2. Find the downloaded file and check its properties:

Windows: right-click the file → Properties → Details tab
Mac: click the file once, then press Command+I (or right-click → Get Info)

Answer these questions:

What are the width and height of the image in pixels?
How many megabytes (MB) is the file?
What is the maximum width of most desktop monitors in pixels?

Step 3. Go to TinyPNG.com and drag the wolf.jpg file onto the page. Let it compress.

Step 4. Download the compressed version. Check the new file size. How much smaller is it?

Note: TinyPNG compresses but does not resize. The file will still be very wide. In a real project, you would resize it first (Step 2 of the Images 1-2-3), then compress.

❓ Frequently Asked Questions

Why does file size matter if most people have fast internet?

Not everyone does. A significant portion of web traffic comes from mobile devices on cellular connections, which are slower and more variable than home broadband. In rural areas of the United States, fast broadband is still not reliably available. Internationally, many countries have much slower average connection speeds than urban US users experience — a page that loads in two seconds on a fast connection may take fifteen seconds or more on a slow one. Large image files also consume mobile data, which matters to users on limited data plans. Search engines factor page load speed into rankings as well, so unoptimized images can hurt your visibility even if your own internet is fast. The Images 1-2-3 process is about making your site work well for everyone, not just visitors with the fastest connections.

Does compressing an image make it look worse?

It depends on how much compression you apply. Tools like TinyPNG use compression that removes image data the human eye is unlikely to notice at normal viewing sizes, so the visual difference is usually not detectable. The key is not to over-compress: a file reduced from 3 MB to 150 KB typically still looks sharp. If you push it down to 20 KB, you may start to see blurring and artifacts. A good approach is to aim for the smallest file size where the image still looks clean at the size it will be displayed, and zoom in on a few areas after compressing to check before uploading.

What is WebP and should I be using it?

WebP is a modern image format developed by Google that produces smaller file sizes than JPEG and PNG at equivalent visual quality — often 25 to 35 percent smaller than JPEG. All modern browsers support it. If you are starting a new project, WebP is a good default for both photos and graphics. Tools like Squoosh can convert images to WebP and let you preview the quality at different compression levels. The main situation where WebP is less ideal is when you need to support very old browsers like Internet Explorer, but that is rarely a concern for new websites.

Do I need to optimize images if I am uploading to WordPress?

Yes. WordPress does resize images automatically when you upload them, generating several scaled versions for different uses. However, it does not compress the original file, and the automatic resizes are derived from that original. If you upload a 6 MB phone photo, WordPress creates smaller versions, but those versions are still based on the uncompressed original and may not be as lean as they could be. The best practice is to crop, resize, and optimize before uploading so that both the original in your media library and any auto-generated sizes are as small as possible. Some WordPress plugins such as ShortPixel or Imagify can also compress images automatically on upload, but manual optimization gives you more control over the result.

How do I check an image file size before uploading?

On Windows, right-click the image file and choose Properties, then look at the Size field on the General tab. On Mac, click the file once to select it, then press Command+I to open Get Info and find the file size. In both cases, you want to see a number in KB (kilobytes), not MB (megabytes). If it shows MB, run it through TinyPNG or Squoosh before uploading. You can check pixel dimensions at the same time — on Windows in the Details tab, and on Mac in the More Info section of the Get Info panel.

★ Key Takeaways

Images that are too large slow a website down. This lesson covered how to resize and compress images so they load quickly without losing too much quality. Next, you will learn two ways to create a hero image section at the top of a page. A well-designed hero makes a strong first impression on every visitor.

Next Lesson: How to Create a Hero Image Section

← Back to Web Images Lessons

← Back to All Lessons

Google Ads

The costs of this website are partially offset by revenue from Google Ads.