3524 posts Ruben Bristian
  • Sells items exclusively on Envato Market
  • Elite Author: Sold more than $75,000 on Envato Market
  • Has sold $500,000+ on Envato Market
  • Has been part of the Envato Community for over 6 years
+10 more
KrownThemes 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?

No, this is a really bad practice, as you’ll server large images on normal screens without any real purpose and you’ll also get a bad score in Google Page Speed.

@Eugene, i’m not sure why it wouldn’t work.. The cookies are not stored in the cache..

574 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
+5 more
Pirenko says

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.
This starts to make sense now, but I see a problem… Let’s grab an example: the theme logo. The user has to upload it in the size he wants it to be displayed (instead of a larger size to be shrinked) so how will you handle these cases? The cases on where the image maximum size is the size you want to use on the frontend?
3524 posts Ruben Bristian
  • Sells items exclusively on Envato Market
  • Elite Author: Sold more than $75,000 on Envato Market
  • Has sold $500,000+ on Envato Market
  • Has been part of the Envato Community for over 6 years
+10 more
KrownThemes says


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.
This starts to make sense now, but I see a problem… Let’s grab an example: the theme logo. The user has to upload it in the size he wants it to be displayed (instead of a larger size to be shrinked) so how will you handle these cases? The cases on where the image maximum size is the size you want to use on the frontend?

The logo is a different story. Just provide the user the option to upload 2 logos and specify the width of the small logo, then do the switch in CSS. The logo is an exception from what i’ve wrote earlier..

574 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
+5 more
Pirenko says



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.
This starts to make sense now, but I see a problem… Let’s grab an example: the theme logo. The user has to upload it in the size he wants it to be displayed (instead of a larger size to be shrinked) so how will you handle these cases? The cases on where the image maximum size is the size you want to use on the frontend?
The logo is a different story. Just provide the user the option to upload 2 logos and specify the width of the small logo, then do the switch in CSS. The logo is an exception from what i’ve wrote earlier..
Ok, Thanks! This makes sense, but there will still be trouble with other type of images across the website (ex. on static pages where the user wants to show a “static” image).
Final question if someone still can stand the pain: for the logo example is it enough to provide a simple image that has 144 ppi and provide it on the original dimensions on all screen types?
386 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

@Eugene, i’m not sure why it wouldn’t work.. The cookies are not stored in the cache..
If you are using a caching plugin wouldn’t a visitor to your site see a cached version of the page whether they are on a device with a retina display or not.

Example: Visitor A is the first visitor to a new page. They are using a standard desktop. Page is cached with standard images.

Visitor B then loads the page on a retina mobile device. Because no changes were made to the content in the admin area and their is now a cached version of the page they receives the same version of the page with standard images as Visitor A.

3524 posts Ruben Bristian
  • Sells items exclusively on Envato Market
  • Elite Author: Sold more than $75,000 on Envato Market
  • Has sold $500,000+ on Envato Market
  • Has been part of the Envato Community for over 6 years
+10 more
KrownThemes says

@Eugene You have a point there, but i’m not certain about it.. If you test my latest theme like you descrived you’ll have the answer :)

Please let me know what you see (you should see the images on a retina devices only after a refresh or two)

@Pirenko Yes, you’re right. Static images embedded by authors which are not thumbnails or sliders or galleries or whatever you make for them will not be retina ready. You can’t have a perfect solution..

574 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
+5 more
Pirenko says

@Pirenko Yes, you’re right. Static images embedded by authors which are not thumbnails or sliders or galleries or whatever you make for them will not be retina ready. You can’t have a perfect solution..
Thanks. I’m still searching for a “perfect solution”, but this seems to be the better a approach now. Thank you all for your valuable inputs :nerdy:
491 posts
  • Has referred 1000+ 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
+8 more
pixelentity says

If you are using a caching plugin wouldn’t a visitor to your site see a cached version of the page whether they are on a device with a retina display or not.
yep, exactly. Device dependent server side code should never be used for this reason. I recall some caching plugins like wp super cache disabling cache for mobile devices but i don’t like this approach a bit because it hurts performances.

This is the kind of stuff that should be handled client side only, we’ve been thinking about a possible solution which involves setting multiple “data-src” in imgs element and then using js to load the appropriate source for the detected device.

However, i’m still not sure whether this whole retina thing is worth the effort or not. Apps and games are fine but for websites on mobile devices, to serve bigger images doesn’t seem a good idea when you think most of them will be on slow/data limited 3g connections (no reliable way to detect available bandwidth).

BF
574 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
+5 more
Pirenko says

To avoid that caching issue why don’t we use a PHP session for that? Each time a retina device opens the page a session is created setting a PHP variable to true. This should fix that, right? I’m currently coding a solution with sessions that seems to be working…

3524 posts Ruben Bristian
  • Sells items exclusively on Envato Market
  • Elite Author: Sold more than $75,000 on Envato Market
  • Has sold $500,000+ on Envato Market
  • Has been part of the Envato Community for over 6 years
+10 more
KrownThemes says

To avoid that caching issue why don’t we use a PHP session for that? Each time a retina device opens the page a session is created setting a PHP variable to true. This should fix that, right? I’m currently coding a solution with sessions that seems to be working…

you can’t detect retina via php

by
by
by
by
by
by