Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteWindows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallChoose a portfolio banner that tells visitors what kind of work you do, then compose and test it in the actual page layout. There is no single correct pixel size for every portfolio site: use your website builder or theme’s requirements and check how the image crops on desktop and mobile. Leave enough visual space for live page text, maintain readable contrast, and confirm you have the right to use the image.
What a portfolio banner should do
A banner image—often called a hero image—is a large visual near the top of a website. It introduces what the site offers, so on a portfolio it should support the visitor’s understanding of your work rather than merely fill space. A designer might show a relevant design detail; a photographer might use an image that reflects their visual style; a developer might use a considered product or interface mockup. These are options, not proven formulas for better conversions.
Before choosing an image, decide what a visitor should understand from the opening screen. The image, your name or role, the headline, navigation and call to action should work together. A compelling banner that competes with the headline or obscures the work can make the page harder to understand.
Choose an image treatment that fits your work
Photography is only one approach. Depending on your discipline and portfolio identity, you can use an illustration, a work sample, an app or product mockup, a gradient, a collage, or a minimal treatment. Canva’s hero-image examples describe these as viable design directions, not as a ranking of which performs best.
Photography
Use a photo when its subject or visual mood helps explain your work. Look for a composition that remains useful behind the text and navigation. A busy image can be difficult to combine with type; a quieter area in the photo may provide room for the headline.
Illustration or a work sample
A custom illustration can express a distinctive visual identity, while a portfolio sample can show visitors the kind of work they will find on the site. Make sure the sample remains legible at the banner’s displayed size and does not crowd out the introductory copy.
Mockup, gradient, or minimal design
A mockup can help make a digital product or interface the focus. A gradient or simpler treatment may offer a calmer background for text. Choose based on your work, audience and page design; no one treatment is established as universally best. Canva’s general design guidance recommends considering the intended audience, the message and the page’s call to action together.
Compose the banner around the real page
Do not select an image in isolation and assume the finished page will work. Put it into the layout with the actual headline, role, navigation and call to action. Decide where the text sits and whether the image’s subject draws the eye toward the important content rather than away from it.
#1 Best Overall
Protect space for text
Look for a suitable open area in the image where text can sit, or choose an image treatment that makes the text distinct. A gradient or a deliberate overlay may help type stand out, but do not assume an overlay automatically guarantees readable contrast. Check the text against the visible image at the actual size and in every crop you plan to use.
Prefer live page text to text baked into the image
When practical, keep your name, headline and call to action as webpage text rather than embedding them in the banner file. Live text can adapt as the layout changes and is easier to update independently from the image. The U.S. Environmental Protection Agency’s public landing-page standard specifically advises against embedding text in its banner images; that is an EPA standard, not a universal portfolio rule. The same page specifies an image overlay box for text.
Check contrast against the applicable standard
Text over an image can become unreadable wherever the background is light, detailed or visually uneven. Check the actual combination against the relevant W3C accessibility criterion, Understanding Success Criterion 1.4.3: Contrast (Minimum). Consult the criterion for the requirements that apply to your text; do not rely on appearance alone or treat a single overlay style as a substitute for checking.
Rank #2
Use dimensions that match your site, not a supposed universal size
There is no established banner dimension that fits every personal portfolio. Builders, themes and layouts can display images at different aspect ratios or crop them differently. Start with the current image requirements for your own platform, then test the asset in the page rather than copying dimensions from an unrelated website.
Recommended Free Tools
The EPA’s Web Standard: Landing Page specifies a JPG at 2048 × 820 pixels for its public landing-page standard and says banner images should not contain embedded text. On that same EPA page, the separate intranet requirements say JPG or PNG at 2000 × 400 pixels, up to 600 pixels high. These are two EPA-specific specifications for different contexts, not competing general recommendations for portfolios.
Preview desktop and mobile crops
A wide image that looks good on desktop may lose its focal subject when a narrow screen crops the sides. Preview the real page at the desktop and mobile layouts your site supports. Check the subject’s position, the text area and any important details at each size. If the theme uses a different crop for mobile, consider whether a different focal position or image is needed, if your platform permits it.
Canva’s design guidance recommends reviewing a design in a mockup and considering image resolution. Treat that as a reason to inspect the actual result, not as a replacement for your builder’s export requirements. A high-resolution source can still crop badly or become visually cluttered in the final hero area.
A practical workflow for making the banner
- Write the message first. Decide what a visitor should understand about your portfolio from the opening screen and what action, if any, the page should invite.
- Choose a visual direction. Select photography, illustration, a work sample, a mockup, a gradient or another approach that supports that message and fits your discipline.
- Check the composition with real copy. Add the actual headline, name or role, navigation and call to action in the page layout. Keep the focal subject and text from competing.
- Follow your platform’s requirements. Check the current image format, dimensions and responsive behavior for your website builder or theme. Do not adopt an institutional example as a universal standard.
- Inspect the responsive result. Preview the banner at desktop and mobile widths. Confirm that cropping retains the subject and that the text remains readable.
- Verify contrast and rights. Check text against the applicable accessibility criterion and confirm the image’s license and any relevant permissions before publishing.
Check image permissions before publishing
Confirm that the image’s license covers the use you intend, including commercial use if the portfolio promotes paid work. Also consider what appears in the image: permission to use a photograph does not necessarily resolve every issue involving a person, a logo, artwork or private property shown in it.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Unsplash’s help article on personal and commercial use says its images are available for most commercial, personal and editorial uses without required permission or credit, while noting that prohibited uses exist and directing users to the applicable terms. Read those terms and consider the specific image and its context; do not treat the license as unrestricted.
Preview the page before publishing
The simplest check is to view your portfolio in its actual browser layout with the final banner, copy and responsive styles in place. If you need a saved reference of a public page, a browser screenshot can help you inspect what the rendered layout looks like. A screenshot does not replace checking the live site on the devices or layouts you support, and it cannot establish whether the image is properly licensed or accessible.
DIY browser check
- Open the page in the browser and load the layout you want to inspect.
- Review the banner with the final headline and navigation visible, rather than assessing the image alone.
- Resize or use the browser’s responsive preview to inspect desktop and mobile crops.
- Capture a screenshot if you need to compare versions or share the layout for review.
Or skip the browser setup
For an automated screenshot of a public page, ScreenshotNeo provides a one-request website screenshot API that can return an image or PDF. Its clean-shot options accept consent banners and remove more than 60 known consent platforms, newsletter popups and chat widgets before capture; each step can be turned off. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads and cache hits are not billed, and responses identify the page verdict and billing status in headers. The service also has an MCP server with screenshot and PDF tools for AI agents. Free includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000. See ScreenshotNeo and its API documentation.
cURL:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://your-portfolio.example -o shot.webpPython:
import requests
r = requests.get(
"https://api.screenshotneo.com/v1/shot",
params={"access_key": "YOUR_API_KEY", "url": "https://your-portfolio.example"},
timeout=90,
)
open("shot.webp", "wb").write(r.content)Node.js:
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://your-portfolio.example' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);Replace the example URL with your public portfolio page and provide your API key. The code saves or fetches the returned image; use the page preview itself to assess how the banner behaves at different viewport sizes. Sign up for 1,000 free screenshots a month with no card.
Free tools Windows power users keep installed
One-click scans. No signup required.
Common problems and what to check
- The subject disappears on mobile. The responsive crop may be cutting it off. Preview the actual mobile layout and adjust the focal position or choose a composition that survives the narrower crop.
- The headline is hard to read. Inspect contrast where the text actually appears, not just the image overall. Reposition the copy, choose a quieter image area or revise the treatment, then check against the applicable W3C criterion.
- The banner looks soft or pixelated. Check that the image meets the builder or theme’s current requirements and that the displayed crop is not enlarging a small source excessively. Canva discusses resolution as part of general design guidance, but the platform’s own specifications should determine the export.
- The image feels unrelated to the portfolio. Revisit the message and audience before changing technical settings. Choose a visual that signals the kind of work or offer the visitor came to see.
- A screenshot differs from the page you expected. Confirm that you captured the intended public URL and that the page had loaded. Automated captures can encounter bot checks, blank pages, timeouts or failed loads; with ScreenshotNeo, inspect the response’s page-verdict and billing headers to understand how a request was classified.
What to avoid
- Do not assume a dimension recommended for one organization, builder or theme works everywhere.
- Do not choose a visually dramatic image if it obscures the portfolio’s message or makes key text difficult to read.
- Do not embed essential headings or calls to action into the image when the page can use live text.
- Do not infer conversion performance from design examples or declare one visual style the universal winner.
- Do not assume a stock-image license settles every rights question about people, logos, artwork or property visible in the image.
Frequently Asked Questions
Does a portfolio banner need to be a photograph?
No. Photography, illustration, a work sample, mockup, gradient or minimal treatment can all suit a portfolio; choose according to the work and page composition.
Should I put my name or headline inside the image file?
Usually keep essential copy as webpage text so it can adapt with the layout. Follow your platform’s requirements and test the result.
Can I use an Unsplash image in a commercial portfolio?
Unsplash says most commercial uses are allowed without required permission or credit, but prohibited uses exist. Review its applicable terms and the image’s context.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
