In this article we talk about the Adoptive Resolution Technology in Jupiter. With the increase of new mobile and tablet devices in the market, manufacturers adopt new technologies regarding the screen pixel density and resolution. A vivid example of the new technologies is the Apple Retina enabled devices. To be able to have a crispy image for Retina enabled devices it is mandatory to upload a new image for each website image with double the size of the original one.
This kind of mandatory additional care for Retina specific devices makes it hard for multipurpose themes to be able to handle all cases. In the Jupiter version 5.1 release Artbees team decided to code an adaptive resolution technology which will handle different device screen cases. The following is a brief description of the underlying code for the new technology.
Adoptive Resolution Technology
Whenever an image is used in the Jupiter theme, no matter if it is part of a shortcode or a Jupiter Post Type, a tiny blank placeholder image will be used in the actual first load of the <img> HTML tag. The theme code calculates the necessary resolutions and best cutting points needed for the actual image, generates separate images for each case, and adds the link of the images as a data-mk-image-src-set HTML5 data attribute.
As shown in the screenshot above, Jupiter creates separate images for Default, Retina (2X) and Mobile views. When the page is viewed, Jupiter checks the characteristics of the viewer device screen and decides which image is suitable to show. By this method Jupiter is compatible with Retina devices.
If you do not want the theme to generate Retina size images you can go to Theme Options > Global Settings > Site Settings and disable the Retina Images option.
The Adoptive Resolution Technology is implemented for nearly all shortcodes available in Jupiter theme, however there are a few shortcodes that are either in the process of adoption or are not possible to be adopted due to the underlying technology.
