3395 posts Nice Guy
  • Most Wanted Bounty Winner
  • Elite Author
  • Sold between 250 000 and 1 000 000 dollars
  • Has been a member for 6-7 years
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Won a Competition
  • Bought between 100 and 499 items
  • Exclusive Author
  • Referred between 500 and 999 users
+5 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..

547 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

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?
3395 posts Nice Guy
  • Most Wanted Bounty Winner
  • Elite Author
  • Sold between 250 000 and 1 000 000 dollars
  • Has been a member for 6-7 years
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Won a Competition
  • Bought between 100 and 499 items
  • Exclusive Author
  • Referred between 500 and 999 users
+5 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..

547 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



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?
384 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

@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.

3395 posts Nice Guy
  • Most Wanted Bounty Winner
  • Elite Author
  • Sold between 250 000 and 1 000 000 dollars
  • Has been a member for 6-7 years
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Won a Competition
  • Bought between 100 and 499 items
  • Exclusive Author
  • Referred between 500 and 999 users
+5 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..

547 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

@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
  • Elite Author
  • Sold between 250 000 and 1 000 000 dollars
  • Won a Competition
  • Referred between 1000 and 1999 users
  • Author had a Free File of the Month
  • Author had a File in an Envato Bundle
  • Bought between 10 and 49 items
+3 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
547 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

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…

3395 posts Nice Guy
  • Most Wanted Bounty Winner
  • Elite Author
  • Sold between 250 000 and 1 000 000 dollars
  • Has been a member for 6-7 years
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Won a Competition
  • Bought between 100 and 499 items
  • Exclusive Author
  • Referred between 500 and 999 users
+5 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