18.3. Preparing Photos for the Web

Image Resolution

When you prepare photos for the web you are no longer thinking about how many pixels your camera captured but about how many pixels a screen will display. Resolution for the web is about pixel dimensions, not DPI or PPI.

DPI and PPI are print concepts. A file that is 4000 × 3000 pixels will still be 4000 × 3000 pixels on a website whether the metadata says 72 DPI or 300 DPI. For online use the only thing that matters is the pixel count.

You can think of total pixels as:
$$\text{Total pixels} = \text{width in pixels} \times \text{height in pixels}$$

Larger pixel dimensions give you more detail but also create larger file sizes and slower page loads. On the web you want a balance that looks sharp at the intended display size while still loading quickly.

Image Dimensions

Image dimensions are the width and height of your photo in pixels. To choose good dimensions you first need to know where the photo will appear and how large it will be displayed.

A few common examples for modern screens:

If your website theme or platform specifies content width, match that as a maximum. For example, if your blog content area is 1200 px wide, exporting images at 1200 px on the long side is usually ideal. There is no benefit to uploading a 4000 px wide image if it will always be displayed at 1200 px, it only increases file size and invites unnecessary copying of high-resolution work.

For mixed orientations you can export based on the long edge. For instance, set long edge = 1600 px. Portrait images will be 1600 px tall, landscape images 1600 px wide. This keeps file sizes and sharpness consistent across the gallery.

JPEG Quality

For the web JPEG is usually the best balance between quality and file size. Most editing software lets you choose a quality level from 0 to 100 or Low / Medium / High.

Higher quality preserves more detail and fewer compression artifacts but creates larger files. The goal is to use the lowest quality setting that still looks clean at 100 percent zoom.

Here is a rough guide for a typical 1600 px wide photo:

In many editors a setting around 70–80 gives a good compromise for normal images. Very detailed scenes with fine textures may need slightly higher quality to avoid blocky artifacts, while simple graphics or minimalist images can be compressed more heavily.

Always check both file size and visual quality. For example, if a 1600 px image at quality 80 is 700 KB but at quality 70 it is 350 KB and looks almost identical, choose 70.

sRGB

Color space matters on the web because different devices display colors differently. sRGB is the standard color space for the internet and for most screens.

If you export in Adobe RGB or ProPhoto RGB but do not embed a matching profile or the browser does not fully manage color, your images may look washed out or over saturated on many devices. To avoid this, always convert to and export in sRGB for web.

Most editing software has a color space choice in the export dialog. Select sRGB and make sure the option to embed the color profile is enabled, so that color-managed browsers can interpret it accurately.

Sharpening for Screens

Sharpening for web is different from capture sharpening or print sharpening. Screen viewing is usually at 100 percent size or smaller and backlit, so images can handle a bit more apparent sharpness than prints.

Many editors offer output sharpening presets such as Screen / Low, Screen / Standard, or Screen / High. These are designed to add a final pass of sharpening tuned for typical displays. If you have already applied moderate sharpening while editing, an additional output sharpening of Screen / Low or Screen / Standard is often enough.

If you sharpen manually, start modestly. Oversharpening creates bright halos along edges and grainy textures, which are more visible on screens than subtle softness. The best way to judge is to view at 100 percent, then also zoom out to the approximate size it will appear on your website and check again.

A common approach is:

1. Do basic capture sharpening in your main edit.
2. Resize to the final web dimensions.
3. Apply a small extra sharpening designed for screens.

Resizing first is important because sharpening strength depends on pixel size. If you sharpen at full resolution then shrink the image, you lose some of that sharpening and may be tempted to sharpen more, which can lead to artifacts.

Social Media Export

Each social media platform processes and recompresses images. If you upload huge files at very high quality the platform will still shrink and recompress them, sometimes with worse results. You get better control by exporting close to the platform’s preferred sizes with modest file sizes.

Typical practical settings:

Export as JPEG in sRGB, with quality around 70–85. Sharpen for screen at the final size. Avoid uploading extremely small files, very low-quality JPEGs, or strange aspect ratios, as the platforms will stretch or compress them more harshly.

On mobile-focused platforms like Instagram vertical or 4:5 images take up more screen space and often get more attention. You might crop a separate version optimized for that format, even if your master version is 3:2 or 16:9.

To protect your work, you can add a subtle watermark or signature, but keep it small and unobtrusive so it does not distract from the image.

Website Optimization

If you run your own website or portfolio, image optimization affects both user experience and search ranking. Large heavy images cause slow loading, especially on mobile connections.

First, choose sensible dimensions as discussed earlier. Then control both file size and loading strategy.

For most portfolio sites aim for individual image files in the range of about 150–500 KB for standard images, with maybe 800 KB for very large hero images if necessary. If a page has many images, lean toward the lower end per image. You can test load times with online tools and adjust.

Modern web formats like WebP or AVIF can compress images more efficiently than JPEG at similar quality. If your site builder or CMS supports them, you can either upload WebP directly or let the platform generate optimized variants. You can still keep a JPEG fallback for older browsers.

Lazy loading is also important. With lazy loading images outside the initial viewport do not load until the user scrolls down, which reduces initial load time. Many website platforms and themes offer lazy loading built in, and some image hosting plugins handle it automatically.

Consistency matters too. Use the same aspect ratios and similar dimensions for galleries so the layout looks clean and predictable, instead of jumping heights and widths across the page.

Finally, always check your images on multiple devices and connections. A file that seems fine on fast desktop internet might be slow on a phone over mobile data. Adjust dimensions, compression, or the number of images per page if needed.

Views: 4