84 posts
  • Bought between 1 and 9 items
  • Exclusive Author
  • Has been a member for 3-4 years
  • Referred between 10 and 49 users
  • Sold between 50 000 and 100 000 dollars
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.

568 posts Fuel Your Web
  • Elite Author
  • Won a Competition
  • Sold between 250 000 and 1 000 000 dollars
  • Exclusive Author
  • Has been a member for 7-8 years
  • Bought between 50 and 99 items
  • Referred between 200 and 499 users
  • Europe
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
  • Bought between 1 and 9 items
  • Exclusive Author
  • Has been a member for 3-4 years
  • Referred between 10 and 49 users
  • Sold between 50 000 and 100 000 dollars
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.

568 posts Fuel Your Web
  • Elite Author
  • Won a Competition
  • Sold between 250 000 and 1 000 000 dollars
  • Exclusive Author
  • Has been a member for 7-8 years
  • Bought between 50 and 99 items
  • Referred between 200 and 499 users
  • Europe
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.
107 posts Too Much is Never Enough
  • Elite Author
  • Sold between 100 000 and 250 000 dollars
  • Exclusive Author
  • Bought between 1 and 9 items
  • Referred between 100 and 199 users
  • Has been a member for 3-4 years
premitheme says

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

741 posts
  • Has been a member for 5-6 years
  • Sold between 50 000 and 100 000 dollars
  • Exclusive Author
  • Most Wanted Bounty Winner
  • Bought between 50 and 99 items
  • Poland
  • Referred between 10 and 49 users
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.

568 posts Fuel Your Web
  • Elite Author
  • Won a Competition
  • Sold between 250 000 and 1 000 000 dollars
  • Exclusive Author
  • Has been a member for 7-8 years
  • Bought between 50 and 99 items
  • Referred between 200 and 499 users
  • Europe
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…

107 posts Too Much is Never Enough
  • Elite Author
  • Sold between 100 000 and 250 000 dollars
  • Exclusive Author
  • Bought between 1 and 9 items
  • Referred between 100 and 199 users
  • Has been a member for 3-4 years
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.

154 posts ThemeVan
  • Elite Author
  • Sold between 100 000 and 250 000 dollars
  • Bought between 1 and 9 items
  • Exclusive Author
  • Has been a member for 4-5 years
  • Most Wanted Bounty Winner
  • Referred between 100 and 199 users
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?

386 posts
  • Elite Author
  • Sold between 250 000 and 1 000 000 dollars
  • Has been a member for 4-5 years
  • United Kingdom
  • Referred between 100 and 199 users
  • Bought between 10 and 49 items
  • Exclusive Author
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?
by
by
by
by
by
by