> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.maglr.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# 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.

## 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.