84 posts
  • Weekly Top Seller
  • 4 Years of Membership
  • Affiliate Level 2
  • Author Level 6
+3 more
7CS
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.

698 posts Fuel Your Web
  • Trendsetter
  • Weekly Top Seller
  • Elite Author
  • Winner
+6 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
  • Weekly Top Seller
  • 4 Years of Membership
  • Affiliate Level 2
  • Author Level 6
+3 more
7CS
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.

698 posts Fuel Your Web
  • Trendsetter
  • Weekly Top Seller
  • Elite Author
  • Winner
+6 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.
119 posts Too Much is Never Enough
  • Elite Author
  • Featured Author
  • Weekly Top Seller
  • Author Level 8
+4 more
premitheme
says

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

743 posts
  • Elite Author
  • Weekly Top Seller
  • Featured Item
  • Most Wanted Winner
+5 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.

698 posts Fuel Your Web
  • Trendsetter
  • Weekly Top Seller
  • Elite Author
  • Winner
+6 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…

119 posts Too Much is Never Enough
  • Elite Author
  • Featured Author
  • Weekly Top Seller
  • Author Level 8
+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.

199 posts ThemeVan
  • Weekly Top Seller
  • Elite Author
  • Author Level 8
  • 5 Years of Membership
+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?

407 posts
  • Top Monthly Author
  • Weekly Top Seller
  • Elite Author
  • Author Level 9
+7 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?
by
by
by
by
by
by