Raster Photos Vs. Vector Images

Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp
Share on email
Share on print

What are raster photos?

Most images you see on your computer screen are raster graphics. Pictures found on the Web and photos you import from your digital camera are raster graphics. They are made up of a grid of pixels, commonly referred to as a bitmap. The larger the image, the more disk space the image file will take up. For example, a 640 x 480 image requires information to be stored for 307,200 pixels, while a 3072 x 2048 image (from a 6.3 Megapixel digital camera) needs to store information for a whopping 6,291,456 pixels.

Since raster graphics need to store so much information, large bitmaps require large file sizes. Fortunately, there are several image compression algorithms that have been developed to help reduce these file sizes. JPEG and GIF are the most common compressed image formats on the Web, but several other types of image compression are available.

Raster graphics can typically be scaled down with no loss of quality, but enlarging a bitmap image causes it to look blocky and “pixelated.” For this reason, vector graphics are often used for certain images, such as company logos, which need to be scaled to different sizes.

File extensions: BMP, TIFF, JPG, GIF, PNG

What is the best editor for raster photos?

Adobe Photoshop is an industry-standard image editing program used to edit graphics and digital photos. It is primarily a pixel-based, raster graphics editor, but also supports basic vector-based editing. The program includes standard drawing and selection tools and has several unique features that make it stand out among other image editors.

What is Adobe Photoshop?

Photoshop can import and export a wide variety of image formats, but it saves images in the Photoshop Document (.PSD) format by default. The PSD format supports layers, which are isolated groupings of graphics that can be edited independently. Layers may be visible or hidden and can also have a custom opacity setting. You can also create adjustment layers, which apply nondestructive adjustments to one or more layers at a time.

If you are just beginning to use Photoshop, the application may look daunting with its large amount of tools but the home screen allows for quick and easy access to tutorials and templates to help you get started. As you become more familiar with the user interface and adjust it to your work style, Photoshop saves your preferences to keep the layout familiar.

Some of Photoshop’s more advanced and unique features include the Patch tool, which automatically removes blemishes, and the Content-Aware tool, which removes unwanted objects and matches the background with the surrounding area. If you want to adjust the colors of an image, you can use the Levels, Curves, or Color Balance controls to manually adjust them. If you want a faster way to perform color correction, the Auto Color and Auto Levels function automatically enhance images with a single click. While Photoshop includes many powerful built-in features, you can add even more capabilities to the program by installing plug-ins.

Photoshop is the image editor of choice among professionals, including photographers, graphic designers, and web developers. Its intuitive interface and wide range of features make Adobe Photoshop the best image editing program available.

When should we use Adobe Photoshop?

  • Raster-based design
  • Photo editing
  • Banner ads for the web
  • 3D images
  • Product mock-ups
  • Photo manipulation
  • Motion graphics
  • Photo filters
  • Artworks

What are raster photos formats (extensions)?

1) BMP Extension:

Short for “Bitmap.” It can be pronounced as “bump,” “B-M-P,” or simply a “bitmap image.” The BMP format is a commonly used raster graphic format for saving image files. It was introduced on the Windows platform but is now recognized by many programs on both Macs and PCs.

The BMP format stores color data for each pixel in the image without any compression. For example, a 10×10 pixel BMP image will include color data for 100 pixels. This method of storing image information allows for crisp, high-quality graphics, but also produces large file sizes. The JPEG and GIF formats are also bitmaps but use image compression algorithms that can significantly decrease their file size. For this reason, JPEG and GIF images are used on the Web, while BMP images are often used for printable images.

2) TIFF Extension:

Stands for “Tagged Image File Format.” It is a graphics file format created in the 1980s to be the standard image format across multiple computer platforms. The TIFF format can handle color depths ranging from 1-bit to 24-bit. Since the original TIFF standard was introduced, people have been making many small improvements to the format, so there are now around 50 variations of the TIFF format. So much for a universal format. Recently, JPEG has become the most popular universal format, because of its small file size and Internet compatibility.

3) JEPG Extension:

Stands for “Joint Photographic Experts Group.” JPEG is a popular image file format. It is commonly used by digital cameras to store photos since it supports 224 or 16,777,216 colors. The format also supports varying levels of compression, which makes it ideal for web graphics.

The 16 million possible colors in a JPEG image are produced by using 8 bits for each color (red, green, and blue) in the RGB color space. This provides 28 or 256 values for each of the three colors, which combined allow for 256 x 256 x 256 or 16,777,216 colors. Three values of 0 produce pure black, while three values of 255 create pure white.

The JPEG compression algorithm may reduce the file size of a bitmap (BMP) image by ten times with almost no degradation in quality. Still, the compression algorithm is lossy, meaning some image quality is lost during the compression process. For this reason, professional digital photographers often choose to capture images in a raw format so they can edit their photos in the highest quality possible. They typically export the pictures as JPEG (.JPG) images when they are shared or published on the web.

Besides image data, JPEG files may also include metadata that describes the contents of the file. This includes image dimensions, color space, and color profile information, as well as EXIF data. The EXIF data is often “stamped” on the image by a digital camera and may include the aperture setting, shutter speed, focal length, flash on/off, ISO number, and dozens of other values.

Disadvantages of the JPEG Format

While the JPEG format is great for storing digital photos, it does have some drawbacks. For example, the lossy compression can cause an issue called “artifacts,” in which parts of the image become noticeably blocky. This typically happens when a high compression setting is used to save the image. For saving small images and images with a lot of text, the GIF format is often a better alternative. JPEG images also don’t support transparency. Therefore, the JPEG format is a poor choice for saving non-rectangular images, especially if they will be published on webpages with different background colors. The PNG format, which supports transparent pixels is more ideal for these types of images.

NOTE: The Joint Photographic Experts Group, which the JPEG image format is named after, published the first JPEG specification in 1992. Since then, the organization has developed several variations of the format, including JPEG 2000 and JPEG XR. However, the standard JPEG format remains the most popular.

4) GIF Extension:

Stands for “Graphics Interchange Format.” GIF is an image file format commonly used for images on the web and sprites in software programs. Unlike the JPEG image format, GIFs uses lossless compression that does not degrade the quality of the image. However, GIFs store image data using indexed color, meaning a standard GIF image can include a maximum of 256 colors.

The original GIF format, also known as “GIF 87a,” was published by CompuServe in 1987. In 1989, CompuServe released an updated version of the format called “GIF 89a.” The 89a format is similar to the 87a specification but includes support for transparent backgrounds and image metadata. Both formats support animations by allowing a stream of images to be stored in a single file. However, the 89a format also includes support for animation delays.

Since GIFs may only contain 256 colors, they are not ideal for storing digital photos, such as those captured with a digital camera. Even when using a custom color palette and applying to dither to smooth out the image, photos saved in the GIF format often look grainy and unrealistic. Therefore, the JPEG format, which supports millions of colors, is more commonly used for storing digital photos.

GIFs are better suited for buttons and banners on websites since these types of images typically do not require a lot of colors. However, most web developers prefer to use the newer PNG format, since PNGs support a broader range of colors and include an alpha channel. (The alpha channel makes it possible for a single image with transparency to blend smoothly with any webpage background color.) Still, neither JPEGs nor PNGs support animations, so animated GIFs remain popular on the web.

NOTE: A GIF image can actually store more than 256 colors. This is accomplished by separating the image into multiple blocks, which each continue unique 256 color palettes. The blocks can be combined into a single rectangular image, which can theoretically produce a “true color” or 24-bit image. However, this method is rarely used because the resulting file size is much larger than a comparable JPEG file.

How to pronounce “GIF”

According to Steve Wilhite, the creator of the original GIF format, it is pronounced “jiff” (like the peanut butter brand). However, most people still pronounce it “gif” (with a hard G). Therefore, either pronunciation is acceptable.

5) PNG Extension:

PNG, which can be pronounced “ping” or “P-N-G,” is a compressed raster graphic format. It is commonly used on the Web and is also a popular choice for application graphics.

The PNG format was introduced in 1994 after the GIF and JPEG formats had already been around for several years. Therefore, PNG includes many of the benefits of both formats. For example, PNG images use lossless compression like GIF files, so they do not have any blurring or other artifacts that may appear in JPEG images. The PNG format also supports 24-bit color like the JPEG format, so a PNG image may include over 16 million colors. This is a significant difference between GIF and PNG since GIF images can include a maximum of 256 colors.

Unlike the JPEG and GIF formats, the PNG format supports an alpha channel or the “RGBA” color space. The alpha channel is added to the three standard color channels (red, green, and blue, or RGB) and provides 256 levels of transparency. JPEG images do not support transparent pixels and GIF images only support completely transparent (not partially opaque) pixels. Therefore, the PNG format allows Web developers and icon designers to fade an image to a transparent background rather than a specific color. A PNG with an alpha channel can be placed on any color background and maintain its original appearance, even around the edges.

While the PNG image format has many benefits, it is not suitable for all purposes. For example, digital photos are still usually saved as JPEGs, since PNGs take up far more disk space. GIFs are still used for animations since PNG images cannot be animated. Additionally, GIFs are still used on many websites since browsers only recently provided full support for the PNG format. However, now that most browsers and image editing programs support PNGs, it has become a popular file format for web developers and graphic artists.

What are vector images?

Unlike JPEGs, GIFs, and BMP images, vector graphics are not made up of a grid of pixels. Instead, vector graphics are comprised of paths, which are defined by a start and endpoint, along with other points, curves, and angles along the way. A path can be a line, a square, a triangle, or a curvy shape. These paths can be used to create simple drawings or complex diagrams. Paths are even used to define the characters of specific typefaces.

Because vector-based images are not made up of a specific number of dots, they can be scaled to a larger size and not lose any image quality. If you blow up a raster graphic, it will look blocky, or “pixelated.” When you blow up a vector graphic, the edges of each object within the graphic stay smooth and clean. This makes vector graphics ideal for logos, which can be small enough to appear on a business card but can also be scaled to fill a billboard. Common types of vector graphics include Adobe Illustrator, Macromedia Freehand, and EPS files. Many Flash animations also use vector graphics, since they scale better and typically take up less space than bitmap images.

File extensions: EPS, SVG.

What is the best editor for vector images?

Adobe Illustrator is an industry-standard drawing program used to create and edit vector graphics. Unlike Photoshop, Illustrator uses paths, rather than bitmaps, to create images. This allows the drawings to be altered and resized without losing image quality. Illustrator is commonly used in professional environments to create logos, signs, digital art, drawings, and other types of graphics.

What is Adobe Illustrator?

The Adobe Illustrator workspace includes a drawing canvas, known as an artboard, surrounded by various configurable toolbars and palettes. You can customize the workspace by hiding, revealing, and moving palettes to a preferred arrangement. You can also edit multiple artboards concurrently to
streamline document editing across drawings.

Illustrator includes advanced features, such as color blending capabilities for creating photorealistic gradients and global editing for modifying similar objects across multiple artboards at the same time. The program also provides more accessible Adobe fonts that you can preview and activate within Illustrator. The software supports a myriad of other convenience tools that make the graphics workflow more efficient.

Adobe Illustrator integrates with other Creative Cloud (CC) programs through the use of interchangeable file formats. It also opens industry-standard graphics files such as EPS, SVG.

If you are a drawing professional, you will find that it is hard to replace Illustrator with an alternative graphics editor. Its robust features and ability to help create clean, professional-quality graphics make Adobe Illustrator the right choice for serious vector art graphics professionals.

When should we use Adobe Illustrator?

  • Vector-based design
  • Logo & Branding
  • Illustrations
  • Maps
  • Text manipulation
  • Info-graphics
  • Patterns
  • Web Icon

What are vector images format (extensions)?

1) EPS Extension:

Stands for “Encapsulated PostScript.” EPS is a PostScript image file format that is compatible with PostScript printers and is often used for transferring files between various graphics applications. EPS files will print identically on all PostScript-compatible printers and will appear the same in all applications that can read the PostScript format.

As the name implies, EPS files contain PostScript code, which is used for storing font and vector image information. Vector images are usually drawings created by programs such as Adobe Illustrator and CorelDRAW. EPS files may also include a rasterized version of the image used for previewing the contents of the file.

2) SVG Extension:

The SVG format is an open standard developed under the W3C (World Wide Web Consortium), with Adobe playing a major role. SVG images can be created and exported from Adobe Creative Suite programs, such as Illustrator and GoLive.

The SVG format is not natively supported by Adobe Photoshop, Photoshop Elements, and InDesign. However, you can open SVG files in these programs using the SVG Kit for Adobe CS plug-in, which is developed by Scand.

Scalable Vector Graphics (SVG) is a text-based graphics language that describes images with vector shapes, text, and embedded raster graphics. SVG files provide resolution independent, high-resolution dots per inch (HiDPI) graphics on the web, in print, and on mobile devices in a compact format. The ability to style SVG with CSS and the support of scripting and animation makes SVG an integral part of the web platform.

 SVG is ideal for
interactive, data-driven, personalized graphics. It is a royalty-free, vendor-neutral open standard developed under the W3C (World Wide Web Consortium) process, and widely supported by modern web browsers.

Examples for Raster Photos vs. Vector Images

Raster-Vector
Raster-Vector2
Emad Zedan

Emad Zedan

Web, Apps & 2D Games Designer
Facebook
Twitter
LinkedIn
WhatsApp
Email
Print

Leave a Reply

Your email address will not be published. Required fields are marked *