# The Ultimate 2026 Guide: How to Prepare Edited Photos for Your Portfolio Website

**By Chanuka Nayanajith** · 2026-07-08

A strong portfolio image must represent your work accurately while loading efficiently on the visitor's device. Instead of uploading the full-resolution camera file, finish the creative edit, convert the image to a web-friendly color space, resize it for its actual placement, apply controlled compression, and configure the website to deliver an appropriate version for each screen.

This guide explains how to optimize portfolio images for the web without relying on one universal pixel size or aggressive compression target. You will create separate exports for hero areas, project galleries, and thumbnails while protecting color, fine detail, accessibility, and page performance.

## Recommended Portfolio Export Settings at a Glance

These settings are practical starting points rather than fixed rules. Your website theme, image container, content management system, and audience devices should determine the final dimensions.

-   **Color space:** sRGB for standard web delivery.
-   **Photographic format:** JPEG for dependable compatibility, or WebP and AVIF when your complete website workflow supports them.
-   **JPEG quality:** Begin around 75 to 85 and inspect the exported image before reducing it further.
-   **Hero-image width:** Approximately 2000 to 2400 pixels for many large portfolio layouts.
-   **Project-gallery width:** Approximately 1400 to 2000 pixels, depending on the largest displayed container.
-   **Thumbnail width:** Approximately 600 to 1000 pixels rather than reusing the full gallery file.
-   **Output sharpening:** Screen, Low or Standard, followed by a visual check at the intended display size.
-   **Metadata:** Preserve copyright information when useful, but remove private location data before publishing.

## Resize Images for Their Actual Portfolio Placement

The most useful sizing question is not how many megapixels your camera captured. It is how large the image will actually appear on the website.

A full-width hero photograph needs more pixels than a small project thumbnail. Exporting both from one enormous master file forces mobile visitors to download data they may never see. Exporting every image too small, however, can produce soft results on high-density screens.

### Hero and landing-page images

For a large banner or full-width project cover, approximately 2000 to 2400 pixels wide is a sensible starting range for many websites. A theme that displays the photograph inside a narrower content column may need less, while a highly detailed edge-to-edge layout may need more.

Do not treat 2400 pixels as a mandatory ceiling. Check the maximum rendered width of the actual image container and test the page on a high-density desktop display and a phone.

### Project and gallery images

Individual portfolio photographs commonly work well between approximately 1400 and 2000 pixels on the long edge. Use the lower end when the website displays images inside a narrow column and the higher end when visitors can open a larger lightbox view.

For vertical images, consider the viewer's screen height as well as the image width. An unnecessarily tall file may still require a large download even though only part of it is visible at one time.

### Thumbnails and project cards

Create dedicated thumbnail files or let a capable content management system generate them. Do not load a 2400-pixel photograph into a 400-pixel project card and rely only on the website layout to make it appear smaller.

Dedicated thumbnails also give you control over crop and composition. A wide hero crop may not work inside a square or 4:5 project grid, so prepare each important crop intentionally.

## Use sRGB for Consistent Standard Web Color

Adobe RGB and ProPhoto RGB are valuable working spaces for editing and print production, but sRGB remains the safest standard choice for conventional web delivery. Adobe recommends converting web images to sRGB, and Lightroom Classic export controls can convert the exported image to the selected color space and tag it with the corresponding profile.

In Lightroom Classic, choose sRGB under **File Settings** when exporting a normal SDR portfolio image. In Photoshop, use **Edit > Convert to Profile** and select sRGB when the document is currently using a wider working space. Converting a profile is different from assigning a new profile because conversion recalculates the color values to preserve the intended appearance.

For current Adobe instructions, review the official guides to [Lightroom Classic export settings](https://helpx.adobe.com/lightroom-classic/desktop/export-photos/export-files-disk-or-cd.html) and [preparing color-managed documents for online viewing](https://helpx.adobe.com/photoshop/using/color-managing-documents-online-viewing.html).

If an uploaded photograph looks flatter or less saturated than it did inside the editor, first confirm that the file was converted to sRGB and that the profile is embedded. Compare the export in more than one browser and device before increasing saturation.

## Choose JPEG, WebP, AVIF, or PNG Based on the Image

No single format is automatically best for every portfolio or publishing platform. Select the format according to the image, required compatibility, and the way your website processes uploads.

### JPEG

JPEG remains a dependable format for photographs, portraits, landscapes, editorial work, and images containing gradients. It is widely accepted by portfolio platforms and gives you direct control over compression quality.

Begin with a quality setting around 75 to 85. Inspect hair, fabric, foliage, gradients, shadow transitions, and detailed architecture at 100% zoom. Increase the setting when artifacts become visible; reduce it only when the smaller file still looks clean at its normal display size.

### WebP

WebP supports lossy and lossless compression and can be a useful alternative to JPEG. It is especially practical when your content management system or image CDN automatically generates and serves WebP versions while retaining a compatible fallback.

Before manually converting an entire portfolio, confirm that your platform accepts WebP, preserves the expected color appearance, creates thumbnails correctly, and includes the images in galleries and social previews.

### AVIF

AVIF can provide efficient compression and supports higher bit depths and advanced image features. Lightroom Classic supports AVIF export, although Adobe notes that support across applications and platforms can still be limited.

Test AVIF through the complete workflow rather than judging only the file on your computer. Check upload processing, browser display, thumbnail creation, social previews, download options, and any client proofing tools.

### PNG

Use PNG when transparency, diagrams, interface graphics, logos, or sharp graphic edges genuinely require it. A full-resolution photographic PNG is often much larger than an appropriately compressed JPEG, WebP, or AVIF file.

The [web.dev image-format guide](https://web.dev/articles/choose-the-right-image-format) recommends using modern formats such as WebP or AVIF where practical while retaining a suitable JPEG or PNG fallback when needed.

## A Practical Lightroom Classic Export Workflow

Lightroom Classic allows you to control the filename, file type, color space, dimensions, sharpening, and included metadata from one export dialog. These settings can also be saved as reusable export presets.

1.  **Finish the creative edit.** Correct white balance, exposure, highlight clipping, shadow detail, noise, lens issues, and distracting local problems before resizing.
2.  **Create the final crop.** Prepare separate crops for hero banners, project galleries, and thumbnails when their aspect ratios differ.
3.  **Choose File > Export.** Select a destination folder dedicated to web-ready files rather than mixing them with RAW files or print masters.
4.  **Rename the image descriptively.** Use a short name related to the visible subject or project.
5.  **Select the file format.** JPEG is a dependable starting choice. Use WebP or AVIF only after confirming that the destination supports the complete workflow.
6.  **Select sRGB.** Use sRGB for standard portfolio publishing unless you have a tested HDR or wide-gamut delivery system.
7.  **Set the pixel dimensions.** Use Resize to Fit and enter the maximum width or long-edge value required for that export preset.
8.  **Enable Don’t Enlarge.** This prevents Lightroom Classic from creating additional pixels when the original or cropped photograph is smaller than the requested output.
9.  **Apply output sharpening.** Select Screen and begin with Low or Standard. Inspect the export for halos, brittle texture, exaggerated pores, and amplified noise.
10.  **Choose the metadata level.** Copyright Only or Copyright & Contact Info Only can be useful public-web options. Use Remove Location Info when broader metadata is retained.
11.  **Export and inspect.** Review the final file outside Lightroom at 100% zoom and at its normal website display size.

Create separate Lightroom export presets such as **Portfolio Hero**, **Portfolio Gallery**, and **Portfolio Thumbnail**. This is more reliable than changing several settings manually for every project.

For a broader explanation of formats, resizing, color spaces, sharpening, and reusable export presets, read the [Lightroom export settings guide](/blogs/lightroom-workflow-academy-for-photo-editors-aaapresets/the-ultimate-guide-to-lightroom-export-settings-in-2026-ensuring-your-presets-shine).

## Let the Website Deliver Responsive Image Sizes

Export optimization and website optimization are related but separate. Even a carefully compressed 2400-pixel file may be excessive when displayed on a narrow phone screen.

A responsive website can provide several versions of the same photograph and let the browser select an appropriate candidate. Responsive image markup commonly uses the **srcset** attribute or the **picture** element while retaining a valid **src** image as a fallback. The [web.dev responsive-image guide](https://web.dev/learn/design/responsive-images) explains how these image candidates work.

You may not need to edit this code yourself. Many portfolio platforms, content management systems, themes, and image CDNs generate responsive versions automatically. Confirm that the feature is working by inspecting the loaded image dimensions or reviewing the page with browser developer tools.

Avoid stacking several plugins that perform the same resizing or compression task. Test one image-processing workflow at a time to prevent duplicate processing, unnecessary complexity, and avoidable quality loss.

## Do Not Lazy-Load the Main Hero Image

Lazy loading is useful for gallery images that begin below the visible part of the page. It can reduce initial network competition by delaying offscreen downloads until the visitor approaches them.

The main hero or project-cover image is different. It is often one of the largest visible elements and may become the page's Largest Contentful Paint element. Delaying that image can make the page appear slower, so hero images and other likely above-the-fold images should normally load immediately.

Use lazy loading for lower gallery images, related-project thumbnails, and other offscreen media. Avoid applying it automatically to every image. The official [web.dev lazy-loading guide](https://web.dev/learn/performance/lazy-load-images-and-iframe-elements) explains why offscreen media can be deferred while critical visible images should be prioritized.

## Write Useful Filenames and Alt Text

Image SEO is not created by repeating a target keyword. Google uses signals such as page content, nearby text, captions, filenames, and alternative text to understand an image.

### Descriptive filenames

Rename the file before uploading. Use lowercase words separated by hyphens and describe the visible work concisely.

-   **Weak:** DSC\_8472-final-v6.jpg
-   **Better:** editorial-fashion-portrait-charcoal-studio.jpg
-   **Better:** coastal-hotel-brand-photography-pool-suite.jpg

A filename does not need to contain every service, location, style, and search phrase. It only needs to identify the image clearly.

### Accurate alt text

Alt text should communicate the important visual information to someone who cannot see the photograph. Describe the subject, action, setting, or visual detail that matters in the context of the page.

-   **Weak:** Best professional creative photographer portfolio SEO image.
-   **Better:** Editorial fashion portrait lit with a softbox against a charcoal studio backdrop.

If the same photograph appears in several contexts, the most useful alt text may change according to what the surrounding page is explaining. Purely decorative images should use empty alternative text when the website editor provides that option.

Google's [image SEO guidance](https://developers.google.com/search/docs/appearance/google-images) recommends descriptive filenames and alt text, relevant surrounding content, high-quality images, and responsive delivery.

## Protect Privacy Without Removing Useful Ownership Information

Image metadata can include capture dates, camera and lens information, copyright details, contact information, and GPS coordinates. Removing every field is not always necessary, but publishing precise location data can create privacy or security concerns.

A practical portfolio approach is to retain copyright and contact information while excluding location and unnecessary camera metadata. Lightroom Classic provides options including Copyright Only, Copyright & Contact Info Only, and Remove Location Info during export.

Do not expect metadata removal alone to produce a major performance improvement. Correct pixel dimensions, efficient encoding, responsive delivery, and sensible gallery loading usually have a much greater effect on the total transferred image data.

## Maintain Consistency Without Forcing Every Image Into One Crop

Consistent project cards and thumbnail ratios make a portfolio easier to scan, but the detailed project page should still respect the composition of each photograph.

Use a consistent grid ratio for navigation, such as square, 4:5, or 3:2, and create intentional thumbnail crops. Inside the project, allow landscape, portrait, panoramic, and detail images to use ratios that support the work.

Consistency should also include:

-   Similar background treatment across related project covers.
-   A repeatable approach to color temperature and contrast.
-   Comparable subject scale within project-card thumbnails.
-   Controlled sharpening and grain.
-   A clear visual order from the opening hero image to supporting details.

Presets can provide a repeatable creative foundation, but they should be refined for the individual photograph before export. Exposure, white balance, skin tones, highlights, local contrast, and crop still require image-specific decisions.

## Run a Final Portfolio Pre-Publish Check

1.  Open every exported image outside the editing application.
2.  Check fine detail, gradients, skin, shadows, and straight edges for compression artifacts.
3.  Confirm that the image is tagged as sRGB for normal SDR web delivery.
4.  Compare the hero, gallery, and thumbnail crops.
5.  Verify that filenames are short and descriptive.
6.  Add accurate alt text to meaningful images.
7.  Remove private GPS metadata.
8.  Check the portfolio on a phone, tablet, standard monitor, and high-density display when available.
9.  Confirm that the hero image loads immediately and lower gallery images are deferred appropriately.
10.  Use PageSpeed Insights or another performance-testing tool to identify oversized images and loading problems.
11.  Inspect social-sharing previews to make sure the correct project image appears.
12.  Retain the original RAW files and high-resolution masters separately from the web exports.

If you also prepare images specifically for an online store or Pinterest, use the separate [Shopify and Pinterest image export guide](/blogs/lightroom-workflow-academy-for-photo-editors-aaapresets/the-comprehensive-guide-to-mastering-image-export-for-shopify-and-pinterest-in-2026), which covers platform-specific crops and publishing decisions.

## Create a Consistent Edit Before You Export

Export settings cannot correct inconsistent white balance, mismatched contrast, clipped highlights, or different color treatments across a project. Complete those corrections before creating the web files.

The [1000+ Master Lightroom Presets Bundle](/products/1000-master-lightroom-presets-bundle) includes more than 1000 presets in DNG and XMP formats for Lightroom Mobile and desktop workflows. It can provide a starting style across portraits, landscapes, weddings, travel, and lifestyle work, but each image should still be refined before export.

You can also browse the broader [Lightroom presets for mobile and desktop collection](/collections/lightroom-presets-for-lightroom-mobile-desktop). AAAPresets' Buy 3, Get 9 FREE offer applies when you add 12 eligible products to the cart and pay for three.

## Frequently Asked Questions

### Should a portfolio use JPEG, WebP, or AVIF?

JPEG is the safest starting format for photographic uploads. WebP and AVIF can provide more efficient delivery, but confirm that your portfolio platform, CDN, gallery, thumbnail generator, social preview, and client download workflow all support the chosen format correctly.

### What file-size target should every portfolio image meet?

There is no single target that works for every image. A simple studio portrait may compress cleanly to a much smaller file than detailed foliage, architecture, fabric, or film grain. Resize to the correct dimensions first, then choose the lowest quality setting that preserves the required visual appearance.

### Does exporting at 72 PPI make an image load faster?

For normal website display, pixel dimensions and encoded file size matter more than print-resolution metadata. A 2000-pixel-wide image remains 2000 pixels wide whether its metadata says 72, 96, or 300 pixels per inch. Concentrate on the actual pixel dimensions, format, and compression.

### Why does a portfolio image look washed out after uploading?

The file may have been exported in a wider color space, uploaded without the expected profile, or processed by the website. Export a new sRGB version with the profile embedded, upload it as a test, and compare it across multiple devices before changing the creative edit.

Written by [Asanka](/pages/about-us) — creator of AAAPresets (10,000+ customers).

---

> Source: [aaapresets](https://aaapresets.com/blogs/aaapresets-creator-workflow/the-ultimate-2026-guide-how-to-prepare-edited-photos-for-your-portfolio-website)