ResolutionThe more pixels used to produce an image the more detailed that image can be i.e. the higher its resolution. For instance a 10 Megapixel digital camera makes use of over 10 million pixels per image thus offering a very high photographic quality. On the other hand a mobile phone may only have a 2 Megapixel camera and so the image is 'ok' but hardly high quality. Show
If you look too closely or magnify the image too much, the illusion is spoilt as you begin to see the individual pixels. This is called 'pixellation'. AddressableA pixel can only be one colour at any given time but each pixel is addressable. This means its colour can be rapidly changed under computer control. This rapid update is why video is possible on a computer screen, where a new bitmap image replaces the previous one at least 25 times a second for smooth-looking video.
ColourThe colour within a pixel is normally represented by 3 bytes, one byte for each of the three primary colours of Red, Green and Blue. An eight bit scheme allows for 256 different levels of each primary colour and so 256 x 256 x 256 = 16 million+ colours are possible within each pixel. File size and compressionBitmap image files can be very large depending on the number of pixels used. For instance an uncompressed 1000px x 1000px image will be at least 3 Megabytes (for 3 bytes per pixel). This means more disk storage space and slower loading times. An image often has areas of almost common colour and so this lends itself to some clever file compression methods. A good file compression method will be looking for such patterns within the image in order 'encode' the information more efficiently. Another approach to reducing file size is to throw away some pixel information at the expense of lower quality. JPEG files use 'lossy' compression method.
When we’re young, the most interesting things in our lives are the things we can see. Picture books and web videos are more universally appealing than the written word, and they don’t rely on a certain level of literacy to be engaging. While good writing can be remarkably effective, the truth is that images are the fastest way to tell a story, make a point, or convey information. To this end, designers in the digital age often choose between two types of digital images in order to get their point across: bitmap vs. vector graphics. Bitmap images, which are created from different colored pixels, are the more common image type found in digital products and websites. In contrast, vector images, which rely on mathematic equations to generate a two-dimensional image, are often used when file size is at a premium and the focus is on information rather than beauty or realism. In order to make an informed decision on what (and how) to include digital images in your product or service, let’s take a look at the common uses of bitmaps vs. vector images, the differences between them, and how UX designers can use bitmaps and vector graphics most effectively in their designs. What are bitmap images?Bitmap or raster images are created with a collection of bits or pixels. In their simplest form, bitmap images are two colors: black and white.
Line artLine art is similar to a pencil sketch drawing done digitally. It helps the viewer focus on the outline of the elements. Designers can use line art to represent image placement if a designer wants to create low-fidelity wireframes.
Grayscale imagesDesigners can use grayscale images to show the different tones and temperatures of a design or an image. Without any distracting colors, grayscale can simplify the design and bring out a minimalistic look and feel to a website.
Multi-tone imagesMulti-tone images contain two or more shades of color, often in multiple combinations. They are not as same as the full-color images since they are only a combination of few colors.
Full-color imagesFull-color images can bring out different emotions through vivid colors. Typically used in either CMYK or RGB format, these images are commonly used in corporate applications and in graphics where first impressions matter.
What is a vector graphic?Vector graphics are a combination of mathematical formulas that define shapes, colors, and placement. They contain instructions about where to locate each of the components to create the expected element and even embed a bitmap graphic within a vector graphic. Vector graphics are created using Bézier curves, which allow designers to scale images as simple as a shape or as complex as a full-blown illustration.
What are the differences between bitmap vs vector images?Vector graphics vs. bitmap images have similarities and differences; understanding the distinction between them can help you make an informed decision about which type of graphic is best for your design. Differences in file sizeThe file size is an important factor when choosing between bitmap vs. vector. When designing digitally, vector images take up less space in storage compared to bitmap images. Bitmap images are typically larger because they are made from pixels that carry more weight than the vector images. If your design needs to be lightweight, you should avoid high-resolution bitmap images and use small, low-quality formats instead. Vector images are inherently smaller because they are made from lines of code rather than pixels. As a result, vector graphics load faster due to the small file size, making them very popular in mobile-based applications. Resizing imagesOne of the biggest problems that designers face is having to resize images. In UX design, a poor-quality image can negatively impact the overall user experience. Bitmap images can be resized, but you may sacrifice pixels in the process. In contrast, vector images can resize themselves without sacrificing image quality, making them more scalable in design. Bitmap vs. vector: Which is easier to use?Ease of use is an important consideration for UX designers. Scaling is a big problem when it comes to using bitmap vs. vector images. Bitmap images, in general, lack power in two main areas: The images lose quality when scaling, and it’s more difficult to transform from bitmap to vector rather than the other way around. These issues take away valuable time that the UX designer could use for improving the product. On the other hand, vector images are resolution independent; this is a huge advantage for the designers in web or application design. Having the highest-quality photo is great for the overall design since it has a direct impact on how the usability presents itself through an aesthetic lens. When to use a bitmap imageDesigners should use bitmap images for websites featuring products, restaurants, travel, tourism, and e-commerce because the images are more visually appealing. In digital applications, the designers use bitmap high-quality images to create an instant likeness, prompting users to interact with the product. Through the use of lifelike imagery, designers can create a sense of desirability and credibility that engages the user.
When to use vector graphicsVector images are the primary choice for printing, logos, signs, illustrations, infographics, and creating animations. Vector images provide high-quality, scalable images while also conserving file size. Versatile for many business applications, UI designers are able to edit vector graphics and quickly generate new ones to meet project requirements. Vector images are also useful for providing powerful, straight-forward messaging to a variety of audiences.
ConclusionWhen deciding between vector vs. bitmap, designers should always focus on the key aspects of the design and what message they intend to convey. Images are a powerful way of sending messages, and if a designer selects the wrong type of imagery, the user may lose interest in the product or service. Read through our web design articles for more inspiration, tips, and tricks. Words by Muditha Batagoda is a product designer and writer. He has over 10 years of experience working in the software industry as a developer and a designer and also enjoys podcasting, lecturing, and public speaking. What is the most suitable use for bitmap images?What's the best use of each format? As mentioned above Bitmaps are best used for photographs or detailed images. Bitmaps are usually the best choice for websites as screen resolutions are relatively low compared to print or other types of media.
Where is bitmap raster graphics used?Raster images are created with pixel-based software or captured with a camera or scanner. They are more common in general such as jpg, gif, png, and are widely used on the web.
What are bitmap and vector images used for?Bitmap formats are best for images that need to have a wide range of color gradations, such as most photographs. Vector formats, on the other hand, are better for images that consist of a few areas of solid color. Examples of images that are well suited for the vector format include logos and type.
|
What are bitmap graphics used for?
direito autoral © 2024 cemle Inc.
