How do I optimise my images for retina displays?
Some systems have a feature called retina display. This function is mainly for certain Mac systems and found less frequent on Windows or other systems at this current time. Retina display is a high screen resolution of 4k or 5k, meaning a monitor resolution of 3840 x 2160 pixels for 4k and 5120 × 2880 for 5k.
Retina images are images that can be viewed with great quality in these resolutions. So when you have a retina image and you view it on a retina display, the image will be scaled up to this display resolution. When retina images aren't viewed on a retina display, it will be scaled down to suit the viewing resolution. This is done in order to keep a high quality image while speeding up load times.
The image formats below are the best-used formats for different situations, but can all be used as retina images.
JPG/JPEG: best format for photographs or images that are generally used as a background or reference image.
PNG: best used when you have an image with a transparent background. This could be an image of a character/animal/object with a transparent background, so only object/character/animal is shown.
SVG: best format for vector images. Vector images are purely made up out of shapes and can be scaled up and down to any resolution without losing any quality.
GIF: best format for when you want to make a short video, using multiple image frames played in a sequence.
Retina images are images that can be viewed with great quality in these resolutions. So when you have a retina image and you view it on a retina display, the image will be scaled up to this display resolution. When retina images aren't viewed on a retina display, it will be scaled down to suit the viewing resolution. This is done in order to keep a high quality image while speeding up load times.
The image formats below are the best-used formats for different situations, but can all be used as retina images.
Image Formats
JPG/JPEG: best format for photographs or images that are generally used as a background or reference image.
PNG: best used when you have an image with a transparent background. This could be an image of a character/animal/object with a transparent background, so only object/character/animal is shown.
SVG: best format for vector images. Vector images are purely made up out of shapes and can be scaled up and down to any resolution without losing any quality.
GIF: best format for when you want to make a short video, using multiple image frames played in a sequence.
Updated on: 08/02/2023