If you are creating any website or blog one of the key factor that many developer misses is the proper image resolution to be used for the website. It is not just about handcrafted website for agencies or organizations. It’s about every single site, even if it is a normal blog. The major problem I’ve seen in many sites is that they uses an oversized image on almost every pages and IU completely understand why they do that. As most developer and designers uses Apple computers like iMac, MacBook Pro, Mac Pro etc. for developing the websites or blog, they naturally use the image which looks crispy on their screen and here the problem starts.
As apple uses retina display in all of its devices, the pixel density of any apple retina display is higher than a normal Full HD monitor or we often call them as a 2x or HiDPI screen. There was a time when DV cameras were the most amazing thing in the world but now we live in such a time where 1080p is the most basic screen resolution possible and on the other hand screens with 2K, 4K and even 8K resolution is also out there for the general consumer. In this situation, you much consisted either using an extremely high resolution image everywhere on your website or you can show images as per screen need using WP Retina 2x.
But, what is 2x?
Retina display of all Apple devices are specially manufactured to product extraordinary image quality which you generally wouldn’t in any similar monitors or screens. Apple produce this awesome screens using the concept of HiDPI, which generally means that it has more pixels stuffed into a much smaller space than other screens and thats why any normal resolution image, which might be looking good on a general monitor or device’s screen might look dull in an Apple Retina display as it is a HiDPI screen.
As per Wikipedia
HiDPI (High Dots Per Inch) displays, also known by Apple’s “Retina Display” marketing name, are screens with a high resolution in a relatively small format. They are mostly found in Apple products or high-end “ultrabooks”, as well as in 4K (Ultra HD) or even 5K monitors.
Why should I care if I have a HD image?
That’s a very good question. Few years ago a research has been conducted on California University to understand the modern web and it’s data need. The result was really surprising. It has been seen that the major amount of data utilize for loading up various images in the webpage on internet, not the text files or css or JavaScript. It has been predicted that an average internet user spent his/her 69.25% bandwidth just for downloading images on internet. Also the higher images you have on a webpage, the slower it loads up. Recently Google has announced that in their new updated search algorithm, website load time will be given a higher priority in the search ranking and SEO.
Now if you have four images on a webpage and each image size is 1MB on average, the webpage size has become more than 4MB and it would take a serious amount of time to load up on a slower internet connection. So, in your website, if you think that using an extremely high resolution image is going to make your site looks crispy on every single high resolution device then you are absolute right, but it is also gonna take a hilarious amount of time to load up the same page on a 1080p or 720p display with a slow internet connectivity.
What is the solution then?
Well the solution is simple, if you are using WordPress for building your website, just use WP Retina 2x plugin which is completely free and it will generate a 2x version of every image you have uploaded on your website. But make sure that the minimum upload resolution of your image is 2048px X 2048px otherwise it won’t be able to generate ALL 2x version of your image, as the general WordPress Large image size is set to 1024px X 1024px.
WP Retina Plugin Dashboard
Also make sure that width and height is mentioned on every image tag has been used inside your website. By using proper width and height on every single img tag, WordPress will load up the nearest image resolution of what you need besides loading up the full high resolution image.
This will show up the general low resolution image for normal screens and high definition 2x images for supported screens. So nor all devices has to download those high resolution images every time they visit your site and this will decrease your website load up time insanely. WP Retina 2x uses picturefill polyfilll to use srcset html attribute on non-supportive browsers. This plugin is completely future proof and well coded.
If it’s free then why should we pay?
WP Retina 2x base plugin is a free plugin and will remain free always, but there are some awesome pro features available with this plugin along with the personal 1 on 1 support. If you are using the free plugin then no support will be provided for it unless it is a bug report. But all pro license users will get all kind of in-depth support for whatever problem they face with this plugin.
WP Retina Pro Settings
Beside the support WP Retina 2x Pro comes with some sleek features which are worth noting and worth paying for. Here are a brief overview about some of those features.
Lazyload using lazysizes
If you are thinking that what so special about it as WordPress plugin directory have lots of lazy load plugin. Let me tell you this, this is the first lazy load plugin I’ve seen in my entire webmaster career which doesn’t break a single thing. This is seriously extraordinary if you have tried to implement lazyload before in your site. The lazyload pro feature that comes with WP Retina 2x Pro is seriously extraordinary and never break a single thing.
Also most problem all lazy load plugin face is that Google stop indexing image files after implementing lazyload on website. But lazysize is complexly SEO friendly works perfectly with every single search engines. You can know more about lazysize script here. Lazysize script is written by Alexander Farkas, the creator of html5shiv, which is being used by every single website on internet build upon HTML5.
Keep image src
As I said earlier WP Retina 2x plugin uses srcset HTML5 attribute inside the plugin, but if you are a pro user you can for the plugin to use img src tag instead of srcset. But please note that lazyload feature will not work with this option enabled.
Retina for full size image
This is a very useful feature in many ways. If you are using the full size version of certain uploaded images anywhere in your website, then those full size images does not have any retina version on the server, as they are the highest resolution image you have uploaded. But if you are a WP Retina 2x Pro user, you can manually upload the 2x version of full size images from your admin dashboard. This is a very important feature for both developer and designers to build a pixel perfect website.
What about the cost?
I’ve seen and used many premium plugins in my webmaster career, but never seen any plugin with this kind of reasonable pricing. WP Retina 2x Pro costs $5/year for 5 websites. That’s all. No other hidden costs and with these $5 you will be able to enjoy every single pro features of WP Retina 2x. Awesome right? The purchase experience is also sleek. You just have to visit apps.meow.fr/wp-retina-2x and click on “BUY SERIAL KEY” button. It will take you to the PayPal page where you can initiate the subscription 🙂
What about the author?
This awesome and unique plugin has been developed by Jordy Meow, a professional French photographer living in Japan. He wrote awesome articles about the abandoned island of Gunkanjima. He develops these awesome plugins as a side project. Jordy is really smart and an awesome person to work with. You will never find a single reason to complain about his works, he is that much precise. After all this if you want you can order a printed copy of the awesome photographs he has taken 🙂
Conclusion
I use WP Retina 2x Pro on my website and I’m very much happy with it special with its precise lazyload functionality (which I haven’t seen anywhere before), Retina for full size images etc. I think this small plugin will do a lot of thing to improve the visual quality of your site on every single screen size. What do you think about WP Retina 2x Pro? Do you also use it on your website? Do you think it is working upgrading to pro plan? What else do you wanna see in the pro version of WP Retina 2x plugin? Let me know in the comment section below. I’ll be happy to hear your feedback on this. 🙂
WP Retina 2x Pro
$5/year
Pros
- Extremely lightweight
- Extraordinary support
- Best Lazyload support
- Extremely SEO friendly
- Complete CDN support
Cons
- Nothing so far
Related Posts:
