84 posts
  • Has been part of the Envato Community for over 4 years
  • Has referred 10+ members
  • Has sold $40,000+ on Envato Market
  • Has collected 1+ items on Envato Market
+1 more
Coffee-Themes says


I finish my new theme and it will be retina ready. Way that i approached problem is to prepare all assets in two sizes one for standard displays and @2x for retina and i will recommend WP Retina 2x plugin.
I know some authors rely on WP Retina 2x plugin, but noticed that some buyers prefer to have everything built-in. But this is not a big deal I think. Good luck :D

I think saying to client that this theme is retina ready and if You have enough high res images, install plugin is fair.

657 posts Fuel Your Web
  • Elite Author: Sold more than $75,000 on Envato Market
  • Won a competition
  • Had an item featured on Envato Market
  • Has been part of the Envato Community for over 7 years
+4 more
Pirenko says

But, according to this method, we have to upload only high res images, right? If this is correct, will the normal screens will be served with those high res images too?

84 posts
  • Has been part of the Envato Community for over 4 years
  • Has referred 10+ members
  • Has sold $40,000+ on Envato Market
  • Has collected 1+ items on Envato Market
+1 more
Coffee-Themes says

But, according to this method, we have to upload only high res images, right? If this is correct, will the normal screens will be served with those high res images too?

No, WP Retina 2x plugin handle image sizes. If You declare thumbnail size 200×200, plugin declare 400×400 and name it [orginal_name]@2x.jpg.

After that all when page is loaded javascript check screen ratio and serve right version.

657 posts Fuel Your Web
  • Elite Author: Sold more than $75,000 on Envato Market
  • Won a competition
  • Had an item featured on Envato Market
  • Has been part of the Envato Community for over 7 years
+4 more
Pirenko says
You need to server “retina images” only for retina displays. There’s no need to double everything on the site! You can simply check if the user is on a retina display with js, store this with a cookie and server double images via an image resizing plugin..
Sorry if I was unclear… I was talking about the method above suggested by RubenBristian.
115 posts Too Much is Never Enough
  • Elite Author: Sold more than $75,000 on Envato Market
  • Has sold $125,000+ on Envato Market
  • Made it to the Authors' Hall of Fame
  • Has referred 200+ members
+4 more
premitheme says

Thanks everyone, I think this discussion was helpful. Please keep it updated of anyone has new thoughts.

741 posts
  • Had an item featured on Envato Market
  • Won a Most Wanted contest
  • Has been part of the Envato Community for over 5 years
  • Has sold $40,000+ on Envato Market
+4 more
Orbital_Themes says

In the theme that I am now developing I decided to use a pure JavaScript solution and used a script called Picturefill. It mimics the proposed picture HTML element. The WP Retina plugin is great, but its only downside is that it only supports retina images, not responsive images. There’s no need to load a 1500px wide image on a mobile device that would otherwise need a 540px wide image. Loading such a huge image on, let’s say, iPhone 4 would not only eat a lot of bandwidth and take a lot of time, but can also dramatically decrease the performance of your website.

657 posts Fuel Your Web
  • Elite Author: Sold more than $75,000 on Envato Market
  • Won a competition
  • Had an item featured on Envato Market
  • Has been part of the Envato Community for over 7 years
+4 more
Pirenko says

I’m sorry to ask again, but can someone clarify if according to RubenBristian and Enabled method will the normal screens will be served with those high res images too? If this is true it seems to be a poor solution in terms of bandwidth usage…

115 posts Too Much is Never Enough
  • Elite Author: Sold more than $75,000 on Envato Market
  • Has sold $125,000+ on Envato Market
  • Made it to the Authors' Hall of Fame
  • Has referred 200+ members
+4 more
premitheme says

I’m sorry to ask again, but can someone clarify if according to RubenBristian and Enabled method will the normal screens will be served with those high res images too? If this is true it seems to be a poor solution in terms of bandwidth usage…

No, HiRes images will be served only when retina display is detected. Retina display will be detected using javascript, when detected a cookie will be generated then you can use php conditional statement to check the existence of this cookie, if it’s existing then generate image with x2 size (using one of the available image resizing scripts/technics) otherwise generate image with normal size. But to be sure that the x2 size will look sharp you need to upload already big images to the WP media library.

177 posts ThemeVan
  • Elite Author: Sold more than $75,000 on Envato Market
  • Has sold $125,000+ on Envato Market
  • Has been part of the Envato Community for over 4 years
  • Won a Most Wanted contest
+4 more
ThemeVan says

Very helpful thread, mark it! If I use 400X400 for the featured image and scale it to 200X200 with CSS, whatever retina or normal screen, how about that?

399 posts
  • Has referred 100+ members
  • Has sold $250,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Elite Author: Sold more than $75,000 on Envato Market
+5 more
EugeneO says

You need to server “retina images” only for retina displays. There’s no need to double everything on the site! You can simply check if the user is on a retina display with js, store this with a cookie and server double images via an image resizing plugin..
Would this technique work with caching plugins?

Helpful Information

  • Please read our community guidelines. Self promotion and discussion of piracy is not allowed.
  • Open a support ticket if you would like specific help with your account, deposits or purchases.
  • Item Support by authors is optional and may vary. Please see the Support tab on each item page.

Most of all, enjoy your time here. Thank you for being a valued Envato community member.

Post Reply

Format your entry with some basic HTML. Read the Full Details, or here is a refresher:

<strong></strong> to make things bold
<em></em> to emphasize
<ul><li> or <ol><li> to make lists
<h3> or <h4> to make headings
<pre></pre> for code blocks
<code></code> for a few words of code
<a></a> for links
<img> to paste in an image (it'll need to be hosted somewhere else though)
<blockquote></blockquote> to quote somebody

:grin: :shocked: :cry: Complete List of Smiley Codes

by
by
by
by
by
by