Images with good resolution

The backgrounds and images that you use in your application should be adapted to the different densities where they will be shown. The images you use in your application can be vector or bitmap. Bitmap images are a collection of ordered pixel colors in a grid, and vector images are defined using polygons with attributes as to their color or shape. That means that vector images are scalable without loss of quality; simply increasing the numbers in their mathematical specification, changes them to the new size, but bitmaps can show blurred areas when scaled. There are some projects, such as Google RAISR, that try to mitigate this loss of quality in bitmap images.

Scaling effect in bitmap images; graphic gets blurred when scaled at 2x (middle)

If your image is vectorial, you can use different vector formats to provide developers with a single asset that will scale properly when it is displayed in a different density. Some formats that support vector information are Scalable Vector Graphics (SVG) and Portable Document Format (PDF).

If your image is in bitmap, for example, Portable Network Graphics (PNG) files, Joint Photographic Experts Group (JPEG or JPG) files, or Graphics Interchange Format (GIF), make sure that you provide assets adapted to the different resolutions in which they will be shown. A larger image than necessary will occupy valuable space in your application, and a low quality image will make your application look unpolished--not all the assets will suffer in the same way.

Scaling effect on a thin font logo. Small details can be visually poor.
(assets from https://pixabay.com/en/camera-photography-lens-equipment-801924/)

Busy backgrounds will not suffer as much from using a lower resolution compared to some logos, icons, and geometric artworks. Keep that in mind when making concessions on the quality of your assets.

Scaling effect on a busy background where quality differences are not so evident but still appreciable.
(assets from https://pixabay.com/en/spice-chiles-paprika-chili-powder-370114/)

Also, keep in mind that formats such as JPG can help you to lower the weight of certain assets. Test the exported files on real devices to confirm whether they respond to the desired result. You should also confirm whether the colors are represented as expected in each type of screen.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.144.17.45