Multimedia Websites   «Prev  Next»

Lesson 3Including inline graphics in a Web page
ObjectiveDescribe Common Formats used for inline Graphics.

What are Inline Graphics on a Web Page?

Google's Definition and Classification of Inline Graphics

Google classifies "inline graphics" as image files. Inline graphics are images that are embedded directly into the HTML of a web page, rather than being linked to from an external source. They are typically identified by their extensions, such as .jpg, .png, and .gif. Google uses a variety of factors to identify and classify inline graphics, including their file extensions, their MIME types, and their content. For example, if an image has a .jpg extension and a MIME type of image/jpeg, Google will classify it as a JPEG image. Their classification of inline graphics is important for a number of reasons. First, it helps Google to deliver the most relevant and accurate search results. For example, if you search for "cats," Google will be able to show you images of cats that are embedded directly into web pages, not just images that are linked to from external sources.
Second, Google's classification of inline graphics helps to ensure that images are displayed correctly on all devices. For example, Google will be able to convert inline graphics to a different format if necessary, so that they can be displayed on devices that do not support the original format. Finally, Google's classification of inline graphics helps to protect users from harmful content. For example, Google can identify and remove inline graphics that contain malware or that are sexually explicit. Here are some examples of inline graphics:
  1. An image of a cat that is embedded directly into a web page about cats
  2. A logo that is embedded in the header of a website
  3. A graph that is embedded in a blog post about a scientific study

Google's classification of inline graphics is an important part of its efforts to provide users with the best possible experience. Inline graphics are image files (or picture files) referred to within the text of a Web page and are identified by their extensions. Your browser can display them without using an external or helper application. The most common types of inline graphics (or picture files) are the GIF format and the JPEG format.

GIF or Graphic Interchange Format

Graphic Interchange Format (GIF) is a standard bitmapped graphics file format for online graphics. GIFs support interlacing, which means the images gradually get sharper. It supports 8-bit color (256 colors) and is widely used because the files are lossless, or no information is lost when the files are compressed. For example, a blue sky shows up mostly blue. It stays true to the real color. There are two types of GIFs transparent and animated. The transparent GIF takes on the background color of the browser and lets the browser show various shapes. The animated GIF simulates movement by sequencing GIFs. Animated GIFs are easiest to make and best supported across platforms and browsers.

transparent
Transparent Image

JPEG | Joint Photographic Experts Group

Joint Photographic Experts Group (JPEG) is a standard bitmapped file format for compressing photographs for the Web. It uses lossy compression, meaning you lose some information from the original image. Progressive JPEGs supports interlacing. At 24-bit color (16 million colors), JPEG images occupy more disk space than GIFs.

PNG | Portable Network Graphics

Portable Network Graphics (PNG) is a bitmapped graphics file format that supports up to 48-bit color (281 trillion colors) and is designed to cross platforms smoothly. It carries information within each image about the originating environment. These other file formats require a plug-in:
  1. BMP (Windows Bitmap)
  2. EPS (Encapsulated PostScript)
  3. TIFF (Tagged Image File Format)
The paragraph below reviews file formats used for inline graphics and downloading files.

File formats for Inline Graphics and downloading Files

With so many image file formats available, BMP, EPS, JPEG, PNG, and GIF:
Question: How do you determine which is right for your email? Each format produces variances in file size, compression, and quality. To make things more confusing, support for specific file types can also vary between email clients. I will weigh the pros and cons of the JPEG file format.

JPEG (JPG)

JPEG images (short for Joint Photographic Experts Group) are full-color images that dedicate at least 24 bits of memory to each pixel, resulting in images that can incorporate 16.8 million colors, and are frequently referenced by their file extension, JPG. JPEGs are also lossy, meaning they retain all color information, but compress file size by selectively discarding data, and that compression can result in a loss of quality. In most design programs, you can choose the degree of compression you wish to apply to individual images, just be aware that by doing so, you also will alter the quality of the image. As a result, if you choose the maximum quality option, your image will most likely be indistinguishable from your original photograph, albeit with a correspondingly larger file size

XLSThe file format for Microsoft Excel spreadsheets and that is viewed with Microsoft Excel.
RTFThe file format that is Microsoft's standard for encoding formatted text and graphics. Viewed with word processors.
GIFThe standard file format at 8-bit color (256 colors). widely used for online graphics and for supporting images getting gradually sharper on screen during loading.
PDFThe file format that enables printed pages to be viewed electronically by reader plug-ins such as Adobe Acrobat Reader.
JPEGThe standard file format at 24-bit color (16 million colors) for compressing photographs on the Web and for supporting images getting gradually sharper on screen during loading.
DOCThe file format for Microsoft Word documents and that is viewed with Microsoft Word.
PSThe file format used to describe page settings and give printer commands, and viewed with GhostView.

In the next lesson, you will learn about common file formats used for audio in a Web site.