Serving Retina Images

Home » Docs » Serving Retina Images

Any asset/design element used under this theme is already optimized for viewing on high resolution displays. Also this theme comes with custom icons web font which looks good on any size. If you want to keep your site look good on retina displays, you will need to optimize images used on your site. You can do so by following below steps:

  • Upload two versions of any image. For example: if you are uploading a logo named ‘logo.png’ with a size 100px x 40px, then upload the same image with double size, in this case, 200px x 80px and name it as logo@2x.png.
  • It is important to rename the second image ending with ‘@2x’ otherwise it won’t work.
  • We are using a script on the theme, which replaces any image on site with another image ending with @2x, if it’s not there it won’t replace and the same image will be served for both retina and non-retina screens.
Last updated on November 8, 2023

Search docs

In this category