Firstly, lets talk about resolution and how do we define what resolution is in the HD range. Resolution are usually measured in how many pixels exist within an inch of screen and they are usually measured in dots per inch (DPI) or pixels per inch (PPI). To make things easier, any resolution that has more than 200 ppi are HD resolution.
Images for web in the older days are mostly save in raster formats such as .JPEG, .GIF and .PNG where the images are compress in order to speed up the loading time of the website. Here comes a problem where the advancement of technology causes HD displays to be more common in households such as television and electronic gadgets such as smartphone and computer screens. This will cause a problem as raster format images are usually blurry because with in HD screens, the image pixel are displayed twice more than usual. As a result, the trend to use HD images, HD video and HD animations has become a trend in website design.
However, HD images are usually not the solution because photograph taken with camera are limited to the resolution they were taken in. In laymen terms will be that no matter what screen size be it larger or smaller screens, vectors in photograph will not change on how they are rendered in those screen sizes.
Besides raster formats, there are vector formats which are usually stored in scalable vector formats (SVG). SVG allows the same image to appear at its best on difference screen resolutions because the images are connected using points and lines which are different from the usual pixel-for-pixel images.
A little advice to you guys would be:
- Use vector for original graphics
- Use raster for photographs and graphics whose pixels can’t be changed. Thus, use the highest resolution available on your device when you are planning to use an image for a background.
Source: Wed Design Book of Trends 2015-2016, by UXPin
Thumbnail: Designed by skadyfernix / Freepik