VMware ESXi and vSphere Cluster Management

Images: Formats, Resolution, Color, and Web Use

Learn digital image fundamentals, including raster and vector graphics, pixels, resolution, color, formats, compression, accessibility, copyright, and web optimization.

A digital image is visual information stored as digital data in a computer-readable format. Images can represent photographs, illustrations, icons, diagrams, logos, interface graphics, and other visual content used in documents, presentations, applications, and web pages.

Raster and Vector Images

A raster image is built from a fixed rectangular grid of pixels. A pixel is the smallest addressable picture element in a raster image or display. Digital photographs are usually raster images because they contain many small color variations.

A vector image is represented by mathematical paths, curves, lines, and shapes. Because the image is described mathematically, it can usually be enlarged without becoming pixelated. Logos, icons, diagrams, and simple illustrations are often good candidates for vector artwork.

• Raster: best for photographs and detailed pixel-based artwork; quality depends on available pixels.
• Vector: best for scalable logos, symbols, diagrams, and illustrations; requires suitable vector source artwork.

Pixels and Image Dimensions

Pixel dimensions describe an image's width and height in pixels. An image described as 1920 by 1080 has 1920 pixels across and 1080 pixels down, for a total of 2,073,600 pixels.

More pixels can provide more detail and allow a larger display or print size, but pixel count alone does not guarantee quality. Focus, lighting, camera quality, editing, and compression also affect the result.

An image's aspect ratio is the proportional relationship between its width and height. A 1920 by 1080 image has a 16:9 aspect ratio. To preserve that shape, a 1600 by 900 image can be resized to 800 by 450. Changing it to 800 by 800 changes the proportions and makes the image look stretched or squashed.

Resolution and Print Size

Resolution can refer to image detail or to the density used when outputting an image. Pixel dimensions and print resolution are related but are not the same thing.

• PPI means pixels per inch. It is commonly used for image density and the relationship between pixels and physical display or print size.
• DPI means dots per inch. It is commonly used in printing to describe the density of printed dots or ink output.

Print width can be estimated with this formula:

print width in inches = image width in pixels / PPI

For example, a 3000-pixel-wide image prints at approximately 10 inches wide at 300 PPI:

3000 / 300 = 10 inches

At 150 PPI, the same pixels cover approximately 20 inches:

3000 / 150 = 20 inches

Changing a resolution metadata value does not create missing detail. If an image has too few pixels, assigning it a higher PPI value only changes the expected physical size; it does not add useful information.

Color Models, Channels, and Color Depth

RGB is a screen-oriented color model based on red, green, and blue light. Different intensities of these three channels combine to produce colors on displays.

CMYK is a print-oriented model based on cyan, magenta, yellow, and black inks. A color that appears bright on an RGB screen may not be reproducible with CMYK inks, so screen and print previews can differ.

A channel stores one component of image information, such as red, green, blue, or transparency. Color depth describes how much data is used to represent each pixel or channel. More bits allow more possible tones and colors. For example, 8 bits per RGB channel can represent 256 levels per channel and roughly 16.7 million RGB combinations.

An alpha channel stores transparency information. Fully opaque pixels, partially transparent pixels, and fully transparent pixels can coexist in an image when the format and export settings support alpha data.

A color profile is metadata that helps software interpret colors consistently. Different screens, browsers, applications, printers, and profiles can display or reproduce the same file differently. For important work, use a consistent color-managed workflow and check a print proof when possible.

Common Image File Formats

Lossy compression discards some data to reduce file size. It can be effective for photographs, but excessive compression produces blockiness, ringing, smeared detail, and other compression artifacts. Lossless compression reduces file size without discarding image data, which is useful when exact pixels must be preserved.

Compression, File Size, and Optimization

Image files can be large because they contain many pixels, multiple color channels, transparency data, metadata, animation frames, or high-quality source information. Large files take longer to upload, download, store, and display.

Resizing changes the number of pixels. Compression changes how the file data is encoded and may reduce quality. These are separate operations. A large image can be compressed and remain large in dimensions; a small image can be resized without necessarily being strongly compressed.

1. Crop away unwanted composition before exporting.
2. Resize near the largest dimensions actually required by the output.
3. Choose a suitable format for the content.
4. Compare quality and file size at several compression settings.
5. Remove unnecessary metadata when appropriate, while retaining licensing and production records elsewhere.
6. Use responsive image resources so devices do not download unnecessarily large files.

Resizing, Scaling, Cropping, and Editing

Resizing changes an image's pixel dimensions. Scaling for display changes how large it appears in a layout without necessarily changing the source file. Cropping removes outer portions of an image to change its composition or dimensions.

When a raster image is enlarged, the software must calculate new pixels. This process is called resampling or interpolation. Resampling cannot recover detail that was never present, so enlarging a small image can cause blur, jagged edges, or pixelation. Use a higher-resolution source, display the image smaller, or use vector artwork when appropriate.

For safer editing, retain the original source file, work on a copy, use editable layers or adjustment controls when available, and export a separate delivery file. This is a basic non-destructive editing practice: it preserves the ability to revise the work without repeatedly damaging the original.

Using Images on the Web

HTML includes an image with the img element. The src attribute identifies the resource, and alt provides a textual alternative.

<img src="images/mountain-trail.webp" alt="Hikers walking along a mountain trail at sunrise" width="1200" height="800">

Explicit width and height values describe the image's intrinsic proportions and allow the browser to reserve space before the file loads. This helps reduce layout movement. CSS can make the image fit its container without distortion:

img {
  max-width: 100%;
  height: auto;
}

Use a correct relative or absolute path, consistent file naming, and exact capitalization. A path that works on one case-insensitive computer may fail on a case-sensitive server. After deployment, check the image request in browser developer tools and confirm that the URL returns the intended file rather than a missing-file error.

Responsive Images

A responsive image provides an appropriate resource for the user's device and layout. The srcset attribute lists candidate files and their widths. The sizes attribute tells the browser how wide the image is expected to appear at different viewport sizes.

<img src="images/river-1200.webp"
     srcset="images/river-640.webp 640w, images/river-1200.webp 1200w, images/river-2000.webp 2000w"
     sizes="(max-width: 700px) 100vw, 700px"
     alt="River flowing through a wooded valley"
     width="1200"
     height="800">

loading="lazy" can defer below-the-fold images until they are near the viewing area:

<img src="images/gallery-item.webp" alt="Ceramic bowl with blue glaze" width="900" height="600" loading="lazy">

Lazy loading is useful for noncritical content lower on a page. Do not use it indiscriminately for an important image that appears immediately when the page opens.

Accessibility and Meaningful Alternatives

Alt text is a textual alternative that conveys an image's purpose to people who cannot see it, including some screen-reader users. Write it for the surrounding context rather than describing every visible detail.

• A search button shown as a magnifying-glass icon can use alt="Search".
• A content photograph can identify the relevant subject and action, such as alt="Hikers walking along a mountain trail at sunrise".
• A decorative divider that adds no information should use an empty value: alt="".

<img src="images/divider.svg" alt="" width="800" height="24">

Images containing essential text, data, or instructions require equivalent accessible content in HTML text, a nearby description, a data table, or another usable alternative. Do not rely on an image alone for information that users must read or follow.

Copyright, Licensing, and Attribution

Online availability does not automatically grant permission to copy or reuse an image. Before using an image, identify its creator and license or obtain permission.

• Public-domain material: generally has no active copyright restrictions, although other rights or source rules may still apply.
• Creative Commons material: follows the conditions of its specific license. Some licenses require attribution, prohibit commercial use, prohibit modifications, or require sharing adaptations under similar terms.
• Stock images: are used under the purchased or granted license, which may limit audience, duration, distribution, or modification.
• Permission-based use: requires keeping evidence of the permission and following its conditions.

Retain the source, creator, license, attribution wording, download date, permission records, and any modifications. Provide attribution whenever the license or permission requires it.

Evaluating Image Quality

Common quality problems include blur from focus or motion, pixelation from insufficient dimensions, digital noise, banding in smooth gradients, poor contrast, unwanted color casts, and compression artifacts.

Quality requirements depend on context. A small thumbnail, a full-screen presentation image, a printed poster, and a logo all need different dimensions and characteristics. Inspect the image at its intended output size, not only while zoomed in. A file that looks imperfect at extreme magnification may be entirely suitable at its actual display size, while a small image may fail when enlarged.

Image Preparation Checklist by Use Case

Practical Workflow

1. Identify the image's purpose: photograph, logo, diagram, decoration, or interface control.
2. Choose raster or vector artwork based on whether fixed pixels or scalable shapes are appropriate.
3. Determine the required pixel dimensions or physical print size.
4. Preserve the aspect ratio unless intentional distortion is part of the design.
5. Crop and edit from an original source, preferably non-destructively.
6. Choose RGB for screen delivery or follow the printer's CMYK and profile requirements for print.
7. Export in a suitable format and compare quality at the intended output size.
8. Add meaningful alt text or an empty alt attribute when the image is decorative.
9. For web pages, provide intrinsic dimensions, responsive candidates where useful, and lazy loading for appropriate noncritical images.
10. Verify paths, deployed URLs, licenses, attribution, and final performance.

For additional practice, continue with image fundamentals and web image use.