Retina Quality
A Retina image is an image created specifically to look sharp on a Retina display. Retina screens, also known as HiDPI screens, feature a significantly higher pixel density compared to standard screens. Consequently, images must be twice their original size to ensure that everything appears crisp and well-defined on these high-resolution displays.
If you're using a Retina display and you observe that the images appear slightly blurry after optimization, it's advisable to activate this option. By enabling the "Retina images" feature, the images will be fine-tuned to display correctly on Retina screens.
| Enable the Feature |
User Site and Image Impact |
| Related Settings |
Use Cases |
| Benefits and Trade-offs |
|
| Useful Resources |
|
🔌 Enable the Feature
To enable this feature, navigate to WP Dashboard > Optimole.
- 1
-
Open the Settings tab.
- 2
-
Expand the Advanced accordion and open the Resize panel.
- 3
-
Use the toggle to enable the Retina Quality feature.
📝 Note: Please remember to disable the "Limit image sizes" option if you plan to use the Retina option. Keeping this option enabled will disable the retina functionality as described in the feature - https://vertis.d.pr/i/RwtdJV 🚀
🚀 User Site and Image Impact
Enabling Retina Quality means your website pictures will be incredibly sharp, especially on high-quality screens like those in iPhones and some laptops. Every small detail, like patterns and lines, will appear very clear and impressive. Despite these high-quality images, your website will still load quickly. This feature ensures your site looks professional on advanced screens without slowing down, providing visitors with a great experience.
To see if your images are displayed in high quality with the Retina Images feature, open the image URL and look for the dpr:2.0 parameter. If you find this, it means you're serving Retina Images through Optimole.
📝 Note: You need to have our lazyload enabled for images to be optimized for retina displays.
🔄 Benefits and Trade-offs
Benefits
- Increased credibility - websites with crisp, clear images project professionalism and credibility.
- Enhanced visual experience - high-quality visuals create a positive first impression, enhancing the overall user experience.
Trade-offs
- Compatibility Issues - while most modern devices and browsers support Retina images, older devices or outdated browsers might struggle to render these high-resolution images properly.
🧩 Use Cases
The
- Mobile apps - mobile applications, especially those on iOS devices like iPhones and iPads, utilize Retina Images to ensure that app graphics, icons.
- Gaming interfaces - video game interfaces and graphics, especially in mobile gaming apps, leverage Retina Images to ensure that characters, landscapes, and in-game elements are displayed in intricate detail on Retina screens.
- Interactive web applications - web applications with interactive elements, such as online design tools or virtual tours.
⚙️ Related Settings
🗂Useful Resources
You may find useful these guides:
- https://www.codeinwp.com/blog/how-to-optimize-images/#HiDPI
- https://wpmudev.com/blog/make-images-retina-ready/
Still looking for an answer? Contact us!