You downloaded a pack, unzipped it, and now you have a folder of images and no obvious next move. This walks you from that folder to live images on the right sections of your page, sized and readable, without breaking your page speed or stepping outside the license.
The short version: don't just grab the first image and drag it into your hero. Each pack is built so different images suit different jobs. The work is matching image to section, sizing it for the web, writing alt text, and confirming any text on top stays readable. None of it takes long once you know the order.
Before you start
A few things make this smoother:
- The unzipped pack folder, somewhere you can find it again.
- A rough list of which page sections you're filling: hero, about, services, a feature row, a background.
- Your builder or CMS open to the page you're editing.
- One tab handy as you go: the image sizes and aspect ratios cheat sheet, so you can confirm dimensions per slot without leaving the walkthrough.
If you haven't named or sorted the files yet, do that first. A folder of image-01.jpg through image-12.jpg is hard to place. Our guide on how to organize and name your website image files covers a naming pattern that makes the rest of this faster.
Step 1: Open the pack and see what you actually have
Unzip the pack into a folder you'll keep, not your Downloads pile where it gets buried. Open it and look at every image at a reasonable size before you decide anything.
Most packs include a mix on purpose: a wide hero-shaped image or two, some squarer or portrait shots for cards and sections, and a few quieter, less busy images that work as backgrounds behind text. Some packs also include a notes or license file. Read it if it's there.
As you look, do a quick quality pass. Pack images are AI-generated, and AI generation isn't flawless. Check hands, faces, any text-like shapes in the background, and reflections for anything warped or off. View each image at the size you'll actually use it, not a thumbnail. If something looks wrong, set it aside and pick a different image. A glitch is much easier to catch now than after it's live on your homepage.
Step 2: Match each image to the section it's built for
This is the step people skip, and it's the one that decides whether the page looks intentional. Pick the image for the job the section does, not the image you like most in isolation.
A useful way to sort them:
| Section | What to look for | Why |
|---|---|---|
| Hero / banner | Wide, with calm space where your headline will sit | Text goes on top; a busy center makes it unreadable |
| About / story | Warmer, more human or workspace-feeling | This section is about who you are |
| Services / features | Clear single subject, consistent style across the row | Cards next to each other should feel like a set |
| Background behind text | Low contrast, few sharp details | Its job is to recede, not compete |
| Blog or supporting | Whatever fits the topic; lower stakes | These don't carry the page |
If the pack came from a curated set, the images are usually meant to hold together as a group. Keep that going: don't mix one image from this pack with a clashing photo from somewhere else in the same row. Consistency across a page reads as care. For the bigger picture of assembling these into one coherent set across your whole site, see the pillar on how to build a consistent image library for your website that this pack is part of.
Step 3: Size and compress before you upload
A full-resolution pack image can be far larger than any slot on your page needs. Uploading it as-is makes the page heavy and slow, even if the builder visually shrinks it. The fix is to resize first, then compress.
- Resize to the real display size. Find out how wide the slot is, then size the image to match (or a sensible amount larger for high-resolution screens, not 4x). The image sizes and aspect ratios cheat sheet gives you a starting width and aspect ratio per section so you're not guessing.
- Crop to the aspect ratio the slot expects. A wide hero slot fed a square image gets awkwardly cropped by the builder, often through the worst part of the picture. Crop it yourself so you control what stays.
- Compress after resizing. Shrinking a right-sized image keeps it sharp; over-compressing a giant image is what turns things blurry or blocky.
Order matters here. Resize first, compress second. If you compress a huge file and then let the page squeeze it down, you get the worst of both. The full method, including format choice and a quality check, is in how to compress website images without making them blurry. No need to repeat it all here; follow that and come back.
Step 4: Upload, write alt text, and check readability
With each image sized and compressed, upload it to the matching section. Then do the two checks that are easy to forget.
Write alt text
Alt text describes the image for people using screen readers and for cases where the image fails to load. Write what the image shows in plain words, kept short. A decorative background behind a headline can have empty alt text so screen readers skip it; an image that carries meaning should be described.
Don't stuff keywords and don't write "image of." If you want examples of good and bad alt text for real website images, see how to write alt text with examples.
Check overlay readability
If text sits on top of an image, the only question that matters is: can you read every word, comfortably, at a glance? View it on a phone-width screen as well as desktop. If the headline gets lost where the image is busy or light, you have options: pick a calmer image, reposition the crop so the text sits over a quiet area, or add a subtle dark or light overlay between the image and the text. Don't ship a hero where the headline disappears into the photo.
Step 5: Confirm you're inside the license
Before you call it done, make sure how you're using the images is covered.
Picdrome images are free to use for personal and commercial website projects, subject to the Picdrome Image License. Read the terms so you know exactly what your use covers. This is general information, not legal advice.
Two honesty points specific to these images:
- They're AI-generated. A person in a pack image is a synthetic likeness, not a real individual. Don't attach an AI-generated face to a testimonial, a staff bio, a founder photo, or anything that implies a specific real customer or team member stands behind it. The AI image disclosure page explains how the images are made and what responsible use looks like.
- Keep claims truthful. Pairing an invented image with a true statement is fine. Using one to imply a result, an endorsement, or a relationship that isn't real is not.
That's the whole loop. Sized, readable, described, and used honestly.
Mistakes to avoid
- Uploading the full-resolution file. It slows the page for no visible benefit. Resize first.
- One image for every section. The pack gave you variety so each slot gets the right shape and mood. Use it.
- Skipping the overlay check. A beautiful hero with an unreadable headline is a broken hero.
- Presenting an AI person as real. No testimonials, no staff photos, no implied real individuals.
- Mixing in a stray photo that clashes. It breaks the consistency the pack was built to give you.
Where to go next
- Read what image packs are meant to contain, so you know what a usable one looks like before you download anything.
- Confirm dimensions per section with the image sizes and aspect ratios cheat sheet.
- Tie this pack into your wider set: build a consistent image library for your website.
In Plain English
A downloaded image pack is a small set of ready-made website images that you place, section by section, onto your pages. It helps non-designer founders, freelancers, and no-code builders fill a page with visuals that hold together, without hunting for images one at a time. Use it right after downloading: open the pack, match each image to the section it suits, resize and compress before uploading, write alt text, and confirm any text on top stays readable. Then check your use is covered: Picdrome images are free to use for personal and commercial website projects, subject to the Picdrome Image License, and because they're AI-generated, never present a generated person as a real customer or team member. Next step: open the pack folder, pick your hero image first, and size it with the image sizes and aspect ratios cheat sheet.