3-3. Formatting Digital images Ver. 2022.03.31

Consider The Following...

To begin, please answer the questions in the Google Form below. Your responses will be anonymous. When you have finished answering, please review the other learners' answers.

In this lesson, we will learn about the differences in color modes between web and print media, and the key points for outputting at the optimal image resolution depending on the usage scenario. At the end of the lesson, try to address the same questions again.

Doing so will allow you to compare the "you" from before and after you have engaged the key question of each lesson. What is important is that you experience this learning process for yourself. When doing so, please remain aware of any changes to your vocabulary or perspective that have come as a result of this lesson.

Color Mode and Image Resolution

Before outputting a digital image, it is important to understand the intended medium for the image. The output settings will vary depending on whether the digital image will be displayed on a monitor or printed on paper. The settings you should pay particular attention to are color mode and image resolution.

----------

Color Mode

Color mode is a way to represent colors in a digital space. In this section, we will discuss the two types of color modes that you need to understand when working with digital images.

There are two color modes: RGB, which is used to display images on monitors, and CMYK, which is used for printing. Let's examine the characteristics of each.

---

RGB

RGB is a color mode for displaying colors on a monitor. The acronym RGB stands for Red, Green, and Blue.

RGB is an additive color mixture using the three primary colors of light. It is easy to understand if you imagine a black screen monitor with three spotlights of red, green, and blue. The colors are adjusted by changing the intensity of the light of each color, and when the three spotlights overlap evenly, the image becomes white. On a video monitor, the appropriate color is displayed by fine-tuning the brightness and luminance of the three colors (red, green, and blue).

---

CMYK

CMYK is a color mode for printing colors on paper media, etc. The acronym CMYK stands for Cyan, Magenta, Yellow and Key plate (black).

CMYK is subtractive color mixing using the three primary colors. It is easy to understand if you think of it as mixing colors with paint on white construction paper. The colors are adjusted by mixing cyan, magenta, and yellow. If you mix cyan, magenta, and yellow in the same proportions, you will get a color close to black. However, it is not completely black. Therefore, black is complemented by K (key plate: black).

---

Each color mode has its own characteristics and specialty areas. RGB is suitable for displaying colors on monitors because it creates colors by shining light on black; CMYK is suitable for printing colors on paper media such as posters and brochures because it paints colors over white.

---

Difference Between RGB and CMYK Color Gamuts

RGB and CMYK can only reproduce a limited range of colors in relation to the color gamut that humans can perceive. This is because there are limits to the colors that can be reproduced by displays and printing equipment. Also, the color gamut that can be reproduced by RGB is different from the color range that can be reproduced by CMYK. The following video (2 mins) will help you understand the differences.

*You can choose English subtitles from the video's subtitle panel.

---

When changing the color mode from RGB to CMYK, you may have noticed that some of the colors looked dull. This is because CMYK has a smaller color range than RGB.

Observing the difference in color gamuts, we can see that there is a difference, especially in the bright color gamut. This causes vivid colors to be converted to softer colors, making them dull. On the other hand, CMYK has a wider color gamut than RGB in some areas.

Photoshop's Info Panel can help you identify the areas of color information in the digital image you are editing that will be lost by changing from RGB to CMYK. Let's check it out in the following video (1 min 40 sec).

*You can choose English subtitles from the video's subtitle panel.

----------

Image Resolution

Image resolution is the unit that indicates the density of an image. It indicates how many pixels are arranged in one inch of an image, and is displayed in units of dpi (dots per inch) or ppi (pixels per inch).

As you can see in the figure, the more pixels are arranged, the finer and clearer the image is. Does this mean that the higher the image resolution, the better?

In principle, yes. But in reality, image resolution depends on the performance of the monitor or printing device that displays the image, so there is an image resolution that is appropriate for the output medium. Let's take a look at the image resolutions suitable for monitor displays and printed materials.

The standard resolution for monitor displays is 72ppi squares (72 x 72 pixels per inch). Therefore, a resolution of 72ppi is considered sufficient for digital images for the web. However, as monitor displays evolve, the appropriate resolution may change.

The standard resolution for printed materials is "350ppi" square (350 x 350 pixels per inch). This is because common color printing has 175 dots, and for compatibility, a multiple of 350ppi is used as the standard. However, image resolutions for processing by printing devices can be set in the range of 300ppi to 600ppi without causing any major problems.

As you can see, the color mode and the required resolution vary depending on the combination of the display media and the printing machine. Image resolution needs to be considered when using digital images for printing.

----------

Number of Pixels

In addition to color mode and image resolution, there is another very important aspect to consider. This is the "pixel count" of a digital image.

The number of pixels indicates how many pixels make up the width and height of a digital image. If you check the metadata of a digital image, you will see something like "size 1920 x 1440 (px)". This number is the number of pixels.

In monitor displays, the number of pixels is used as an absolute value. If the number of pixels is the same, a "72ppi" image and a "350ppi" image will look the same in quality and size. Therefore, when only considering the display of a digital image on a monitor, the number of pixels is a more important indicator than the image resolution.

When setting the number of pixels for a digital image, we consider the screen resolution (= number of pixels) of the monitor as the standard. At present, it is recommended to use "1920 x 1080" as a standard, which is a common monitor size that supports full HD. If you want to display a digital image that fills the entire screen, set the number of pixels to "1920 x 1080" or higher.

For digital images used on websites, it is common to set the width in the range of 1000px to 2000px; when uploading profile images or cover images on platforms such as social media sites, the platform may specify the optimal number of pixels.

----------

So far, we have learned that the appropriate color mode and image resolution settings differ depending on whether the digital image is to be displayed on a monitor or printed out. We have also learned that when displaying digital images on a monitor, the number of pixels is a more important indicator than the image resolution. In the next section, we will actually check the settings of the digital image and see the procedure for outputting it.

Exporting Images for Web/Printing

From here, we will look at the actual process of outputting a digital image. Again, let's go over the best settings (general standards) for web and print.

---

For web: RGB/72dpi

Images for the web are displayed on monitor devices that use light to create colors, so RGB, the three primary colors of light, is appropriate. The standard for image resolution that can be reproduced on a typical monitor is 72ppi. When outputting images for the web, the number of pixels is a more important indicator than the image resolution.

---

For printing: CMYK/350dpi

For printing images, CMYK (the three primary colors plus black) is suitable because the colors are applied to paper media. The resolution of the image must be at least 300ppi to be processed by printing equipment. In general, 350ppi is recommended, taking into account the standard number of halftone dots for printing equipment.

----------

Output for the Web

Let's take a look at the steps necessary to output an image as a web-optimized image (RGB/72ppi) by checking the color mode and resolution. If you are outputting an image for the web, when you check the image resolution, also check the pixel count.

In the following video (7 min), we will use the paid version of Photoshop to explain color modes and image resolutions.

*You can choose English subtitles from the video's subtitle panel.

---

Trying it Out with an Online Editing Tool

The following video (5 min 52 sec) shows how to edit an image by utilizing Adobe Photoshop Express, a free online editing tool, to change the number of pixels and output the image. Please try it out for yourselves.

*You can choose English subtitles from the video's subtitle panel.

----------

Output for Printing

Next, let's look at the procedure for checking the color mode and resolution, and then outputting the image as one that is optimized for printing (CMYK/350ppi). When outputting an image for printing and checking the image resolution, also check the print size.

In the following video (6 min 30sec), we will use the paid version of Photoshop to explain the color mode, image resolution, and extension for output.

*You can choose English subtitles from the video's subtitle panel.

In this demo, an image with a resolution of 300ppi was used, so it was output as CMYK/300ppi. Increasing the resolution of the original image basically degrades the image. In principle, it is not possible to make the original image higher quality, so be careful.

----------

Finally, let's consider a case where the resolution of the original image has to be increased such as when you want to use an image that has been optimized for the web in printed materials. Basically, if you change a low-resolution image to a high-resolution one, the image will be degraded. This is because the image editing software will automatically generate pixel information that was not originally there. Let's check it out in the following video (5 min 26 sec).

*You can choose English subtitles from the video's subtitle panel.

What did you think? Basically, you should be aware of preparing high-quality and high-resolution images in advance, and it is also a good idea to check the image size and resolution when looking for CC licensed images.

----------

Summary

In this section, we reviewed the procedure for exporting images for web/printing. We also learned that when displaying digital images on a monitor, we need to match them to common monitor sizes and the number of pixels specified by social media sites and platforms.

Throughout Chapter 4, we learned how to find and handle digital images shared on the Internet. We hope that you will enjoy the culture of creating and sharing in the digital society and challenge yourself to master digital images. We hope that this material has inspired you to take on the challenge of expressing your learning and research in a more engaging way.