Lesson 2 Part 1

​Images are one of the many components of multimedia and are essential in website design. Users have come to expect an experience that is visually appealing that can only be accomplished through the use of images. Images can also be used for navigation in the form of image maps and graphic buttons that link to other pages or resources. On the corporate website, the logo and trademarks of the organization are crucial for name recognition and branding. Graphics illustrate content, provide backgrounds for other activities, and provide a means of navigating the website.

Lesson 2: Creating Graphical Images for the Web Part 1

Digital imaging is the creation of a representation, such as a physical scene or an object's internal structure, of the visual characteristics of an object. The term is often assumed to involve or include the processing, compression, storage, printing, and display of such images. Every single electronic picture has certain characteristics that can definitely influence the quality and file size.

Setting clear rules or guidelines for creating images is crucial for organizations because it ensures consistency and professionalism across all digital media. By defining standards for quality, file formats and design styles, organizations can streamline workflows, ensure compatibility across different platforms, and maintain brand integrity. These guidelines also help in managing file sizes and resolutions, which can significantly affect website load times and overall user experience. Additionally, standardized procedures make it easier to collaborate and share among team members and external stakeholders, thereby enhancing efficiency and reducing the risk of miscommunication.

In order to create these business standards, it’s necessary to understand some of the fundamental concepts for working with digital images.

Digital Imaging Concepts

In the digital world, a color palette refers to the full range of colors that can be displayed on a device screen or other interface, or to a set of colors and tools that can be used for painting and illustration programs in some cases. A color palette is also known as a palette. Although the 8-bit color display can show millions of colors, it can display only 256 colors at a time. The system keeps these 256 colors in the system palette. At the same time, a 16-bit display can show 65,536 colors and a 24-bit display can show 16.7 million colors at once. When you use a vector or a paint program to create an 8-bit image, the program will build a palette based on the colors used in the image. The system palette then adjusts slightly to convey the correct colors when the image is shown. When you display multiple images, either in sequence or at the same time, you may experience a disconcerting flicker of colors known as palette shift.

Palettes

Palette Selection

• Select a palette of 256 colors.

• Indicate which palette entry to use for each pixel.

• Look up each color in the palette.

Approach:

• 16 million colors can be represented by 24 bits.

• No image uses all 16 million colors.

• The human eye doesn't see small differences.

Opportunity:

Dithering

Dithering is the approximation or reconciling of colors between the image palette and the system palette. The dithering process works by placing two colors from the system's palette next to each other in order to trick the eye into seeing a third color that is desired but not part of the palette. Dithering makes it possible to show images that contain more colors than can be supported by the system displaying them.

When a web browser encounters an image that contains colors that are not supported by current monitor settings, the browser will automatically use dithering to try to approximate the image's correct colors. Unfortunately, dithering can change the appearance of the image in ways you may not want to. In particular, a high-color image, such as a photo, may appear grainy when it is displayed on a computer that supports only 256 colors.

Image Resolution

Resolution refers to the number of pixels on the image. Resolution is often defined by the image's width and height, as well as the
total number of image pixels. For example, an image that is 2048 pixels wide and 1536 pixels high (2048 x 1536) contains (multiple) 3,145,728 pixels (or 3.1 Megapixels). You might call it a 2048 x 1536 or a 3.1 Megapixel image. As the megapixels in the pickup device in your camera increase, the maximum image size you can produce also increases. This means that a 5-megapixel camera can capture a larger image than a 3-megapixel camera.

Resolution is measured in dots per inch (DPI) or pixels per inch (PPI). DPI is usually referred to in print while PPI is more a screen reference. Higher resolution means that there are more PPI, resulting in more pixel information and creating a high-quality and crisp image. When you change the image resolution, you say how many pixels you want to live in each square inch of the image. For example, an image with a resolution of 600 PPI will contain 600 pixels within each square inch of the image. 600 is a lot of pixels to live in just one inch, which is why 600 PPI images look very sharp and detailed. Now, compare that to the 72 PPI image, which has a lot fewer pixels per inch. As you probably guessed, it's not going to look nearly as sharp as the 600ppi image. The de facto standard DPI for print is 300 DPI and for web is 72 PPI.

Color Depth

Color depth, also known as bit depth, is either the number of bits used in the bitmapped image or video framebuffer to show the color of a single pixel or the number of bits used in a single pixel for each color component. The bit depth for the consumer video standards specifies the number of bits used for each color component. Pixels provide a certain amount of color information. Measured in bits, this information determines how many colors each pixel can represent. For instance, pixels with 4 bits of information on the grayscale can show up to 16 shades of gray. Eight bits of color information per pixel generates up to 256 bits of color information, and so on. Higher bit values (also known as bit depths) lead to more intense or realistic colors. However, as the color depth increases, so does the file size.

​Note Be sure to understand the difference between image resolution and color depth. Resolution is about the clarity of an image, regardless of color.

Multiple Choice

Which setting would you click if you wanted to flip something in your image?

• A

• C

• D

• F

Multiple Choice

Any form of media that uses electronic devices for distribution.

• Print Media

• Digital Media

• Desktop Publishing

• Design Elements

Multiple Choice

Which of the following are digital media?

• Video Games

• billboards

• Newspapers

• books

Color Depth

​Figure 2-2: Image displayed in 256, 128, 64, 32, 16, 8, 4, 2 grey-levels

How to calculate the color depth
An image is 2x4 inches at 2048 dpi and has a file size of exactly 72 Mb.

What is the color depth of the image?
Color depth (bits) = Number of bits resolution (pixels)
Number of bits resolution = Number of bit/Number of pixels
Number of pixels =2×4×2048×2048=25,165,824 pixels
Number of bits = 72×1024×1024=603,979,776 bits
Number of bits resolution = 603,979,776 bits/25,165,824

Pixels

The term "pixel" is another way to say "picture element." The pixel is the smallest unit shown by a PC screen. Pixels in a grid form the building blocks for pictures a PC can show. Pixelation is a distortion of a raster graphic that occurs as each pixel is made to represent a larger portion of the image.

Raster Graphics

Raster graphics, also called bitmap graphics, are digital images that consist of tiny rectangular pixels or picture elements that are arranged in a grid of x and y coordinates (including z coordinates in the case of 3D) in such a way as to form an image. It is also referred to as a bitmap since it has information that is directly mapped to the grid of the display.

The file size of the raster image also depends on the size of the image, which is determined by the number of pixels used in the image. This means that an image with a resolution of 1280 x 720 will contain 921,600 pixels, while a full HD image of 1920 x 1080 will have 2,073,600 pixels, which will obviously give it a larger file size compared to the previous one.

The most common format of graphics is a raster, also known as a bitmap. Raster graphics use bit maps to store information. This means that a large file needs a large bitmap. The larger the image, the more disk space is occupied by the image file. For example, a 640 x 480 image requires information to be stored for 307,200 pixels, while a 3072 x 2048 image requires information to be stored for 6,291,456 pixels. Raster graphics include formats as BMP, JPEG, GIF, TIFF and PNG.

A raster graphic, when viewed with magnification, resembles a series of small squares, each of which has a color value that contributes to the overall shape. Because raster graphics are created using actual color dots, making raster graphics larger reduces the resolution of the image.

Note

Raster graphics are often referred to as bitmap graphics. It is important to understand that these two terms mean the same thing because both terms are widely used.

Vector Graphics

The use of sequential commands or mathematical statements or programs that place lines or shapes in a 2D or 3D environment is referred to as Vector Graphics. It is quite different from the raster graphics in the rendering process. In computer graphics, the vector graphic or vector image is an image made up of paths (lines with starting and ending points). These paths, all of which are based on mathematical expressions, are basic geometric shapes, such as lines, polygons, and curves. These elements are sometimes called graphical primitives. Vector graphics store the information of the image in the mathematical instructions that are then interpreted and displayed. The key advantage of using vector graphics instead of raster images is their ability to scale without compromising the quality of the image. Vector graphics are best for printing, as they consist of a series of mathematical curves. For example, you could use a vector graphic to make a banner or sign. Without any jaggies or other image distortions, the image may be tiny on your screen but scaled to the appropriate size.

There are many different file formats (file extensions) used to create vector graphics. The most common vector file types include .eps, .ai, .pdf, and .svg. Adobe Illustrator is one of the most popular programs used to view and create vector images.

Multiple Choice

What file format supports transparent backgrounds in images?

• JPEG

• BMP

• PNG

• TIFF

Multiple Choice

When considering the creation of digital art, which graphic type offers more freedom for blending and shading?

• Vector

• Raster

• Both offer equal capabilities

• Neither offers this capability

Multiple Choice

Which type of graphic tends to have larger file sizes when containing complex designs?

• Vector

• Raster

• Depends on the complexity

• File sizes are generally the same

Multiple Choice

Which type of graphic is defined by mathematical equations?

• Vector

• Raster

• Both

• Neither