FNJ

Illustrator Portfolio Website: How to Show Your Work Online

How to group illustrations into series, export images that stay sharp and fast, separate client and personal work, and set up your shop and commission links.

PublishedOctober 14, 2026
Read time8 min
Written byThe Framer → Next.js team
All posts ↗

An illustrator's portfolio website works best when it shows roughly 15 to 25 finished pieces, grouped into series aimed at the clients you want, sized to look sharp without loading slowly, and labeled clearly as client or personal work. Add a commissions page that says what you take on and how to start, and give your shop its own link in the navigation instead of mixing products into the portfolio.

The hard part isn't the website. It's deciding what to show, and that depends on who's looking. This guide works through those decisions in order. Once you've made them, the illustrator portfolio builder can draft the site from a prompt written for illustrators.

Decide who the portfolio is for

Illustration buyers want different things, and a portfolio that tries to please all of them tends to please none.

Buyer What they need to see
Editorial art directors Concept-driven images that solve a headline, in a consistent style
Children's book publishers and agents The same character across poses, emotions and scenes; spreads with room for text
Brands and packaging teams Work in context (labels, merch, campaigns) and a style that reproduces well at any size
Private commissioners (portraits, pets, stationery) Examples close to what they'd order, a clear process and a starting price
Fans buying prints Personal work and a shop that's easy to find

Pick a primary buyer and lead the homepage with work for them. The other groups can still find their section, but the first screen should make one kind of visitor think "this is the person."

Series beat singles

A series of related images proves something a single image can't: that you can hold a style, a palette and a character across many pieces. That's exactly what a book, an ad campaign or a recurring editorial column requires.

Lead with three to five series of three to eight images each, then add a "Selected" gallery for strong singles. Give each series what its buyer needs:

  • Children's books: show one character in at least four poses or emotional states, and include a spread with text placed or space left for it.
  • Editorial: include the headline or a one-line summary of the article, so the art director sees the brief you solved, not only the picture.
  • Packaging and brand work: show the flat artwork and the finished product, plus any pattern or spot-illustration system you made.
  • Personal projects: give the series a title and a sentence of intent, such as "Twelve night markets across Southeast Asia, drawn on location."

One style or two

Art directors hire for predictability. If you work in two very different styles, separate them into clearly labeled sections, or lead with the one you want more work in. A homepage that alternates between delicate ink line and chunky vector shapes leaves a buyer unsure which one they'd get.

Client work and personal work

Label client work with the client or publication (if your contract allows naming them), what the image was used for, and the year: "Cover illustration, quarterly food magazine, 2025." Many contracts allow portfolio use, but some ask you to wait until publication, so check before posting.

Personal work belongs in a portfolio, especially early on, and it often shows your style more clearly than commissions do. Label it as personal so nobody thinks you're inventing clients, and use it to show the kind of work you want more of.

Mockups

A book cover shown on a book, or a label on a jar, helps buyers picture the work in use. Always show the flat art too, at a decent size. A mockup with heavy shadows and a tiny artwork hides the thing they came to see.

Fan art

Fan art can show skill, but the characters belong to someone else. Don't lead with it if you want commercial work, and don't sell prints of it unless you have a license. This is general information, not legal advice, and the rules vary by country.

Image sizes, color and speed

This is where illustration sites commonly go wrong: either the images are soft and pixelated, or each one is a huge file that takes seconds to appear on a phone.

Practical export settings

  • Full-view images: around 2,000 to 2,500 pixels on the long edge looks sharp on most screens without becoming enormous.
  • Thumbnails: a smaller, separate export, unless your site generates sizes for you.
  • Format: WebP or a high-quality JPEG for painterly work; PNG or lossless WebP for flat color and crisp line art, where JPEG compression shows around edges.
  • Color: export in sRGB. Browsers treat images without a color profile as sRGB, and many image optimizers strip profiles, so files saved in CMYK or a wide-gamut space can look dull or shifted.

Responsive images let phones download a smaller file than desktops do. MDN's guide to using responsive images in HTML explains how the srcset and sizes attributes handle this.

Thumbnails and crops

Square thumbnails crop compositions. Either choose each crop yourself so the focal point survives, or use a grid that keeps each image's original proportions. Every thumbnail should open a full view, and that full view should be easy to swipe through on a phone.

Alt text

Write a short description of each image as alt text: what it shows and the medium, such as "Ink and watercolor illustration of a fox reading under a lamp." It helps visitors using screen readers, and it's one of the ways image search understands your work. Google's image SEO best practices also cover descriptive file names and placing images near relevant text.

Protecting your work

Large watermarks across the image spoil the viewing experience for the art directors you want to impress. A common compromise is a moderate display size and a small signature. Disabling right-click stops nobody. If you're worried about scraping, your realistic levers are display resolution and your site's robots.txt file, which well-behaved crawlers follow; nothing on a public page is fully protected.

Shop and commission links

The commissions page

If you take private or commercial commissions, give them a page that answers the questions you'd otherwise answer by email:

  1. What you take on: types, sizes, subjects, and what you don't do.
  2. Process: inquiry, quote, sketch, revisions (say how many rounds), final art, delivery.
  3. Timeline: typical turnaround and how far ahead you're booked.
  4. Pricing: a starting price or price range per type, if you can give one.
  5. Usage rights: the difference between personal use and a commercial license, in plain words.
  6. Status: open, closed or waitlist, kept current.
  7. How to start: an email address, or a link to a form tool such as Tally or Google Forms that asks the questions you always ask.

The shop

If you sell prints, stickers or products through a store platform, give it a "Shop" link in the main navigation. Keep it out of the homepage hero if commercial clients are your main goal; an art director doesn't need to see a sticker sale first.

Pages to build

  • Home: your strongest series and one line on what you draw and for whom
  • Work: series grouped by market, then selected singles
  • Series pages: one per series, with context
  • About: a photo of you or your workspace, your background, and publications and clients (only real ones)
  • Commissions: the page described above
  • Shop: a link to your store
  • Contact: email, your agent if you have representation, and social links

The same structure adapts if your work moves into other media. Painters and concept artists can borrow from the digital artist portfolio page, sculptors and renderers from the 3D artist portfolio page, and illustrators who animate their work should look at the animator portfolio page, where motion needs a reel.

Getting the site made

Once your series are chosen and exported, you can build an illustrator portfolio with FNJ's AI builder from a screenshot or link of a site whose look you like. It designs the pages at desktop, tablet and phone widths and leaves styled spaces for images, which you fill by uploading your own artwork. It's a paid tool with no store checkout or forms, so your shop and commission inquiries go to the tools you already use, linked from buttons, and you export the code and host it yourself, for example on Cloudflare Pages, whose free plan includes custom domains.

Frequently asked questions

How many pieces should an illustration portfolio have?

Around 15 to 25 finished pieces is a good range, ideally grouped into three to five series plus a small selection of singles. Fewer, stronger pieces beat a portfolio padded with older or weaker work.

Should I watermark illustrations on my portfolio?

A large watermark spoils the work for the clients you want to impress. Many illustrators display images at a moderate resolution with a small signature instead, accepting that nothing on a public page is fully protected.

What size should portfolio illustrations be?

Around 2,000 to 2,500 pixels on the long edge for full-view images, exported in sRGB, with smaller versions for thumbnails. Use WebP or a high-quality JPEG for painted work and PNG or lossless WebP for flat color and line art.

Should I include personal work in my illustration portfolio?

Yes, labeled as personal. Personal series often show your style more clearly than commissions, and they let you show the kind of work you want to be hired for next.

Do I need a separate website for my print shop?

Not necessarily. Many illustrators run the shop on a store platform and link it from a "Shop" item in the portfolio's navigation, which keeps the portfolio focused on clients while keeping the shop easy to find.

#portfolio#ai website builder#illustrators#illustration

Build your portfolio with our AI builder

Show it a site you love and describe your work. It designs every page for desktop, tablet and phone, and gives you the code.

Try the AI builder →
Up nextGraphic Design Portfolio: How Many Projects and Which Ones
Also readPortfolio Website Ideas for 12 Professions, Page by Page
Also readPersonal Website vs Portfolio: Which Should You Build?

Ready to convert your website?

Paste your published Framer URL to generate a production-ready project in minutes.

Example: https://your-site.framer.websiteYour published site’s address — the one visitors see. A custom domain works too.