Support for HiDPI images and assets / Retina display support

Erik

Well-known member
Now that we have an actual computer out with a high density display, I would really like to see HiDPI support in the next major point release of XenForo.

XenForo already looks great on the Retina MacBook Pro due to its extensive use of CSS, but if it served HiDPI images across the entire product, it would look beautiful and truly stand apart.

I would hope for a server-side solution, as something like retina.js not only slows down page loading, but also uses far more bandwidth than necessary by loading both the normal resolution and the high-resolution image.

In fact, since XenForo seems to almost entirely use CSS background-images for UI images, including avatars, almost everything could be handled by making a slight change on the backend to generate @2x versions of every image, and then using CSS media-queries to serve the HiDPI versions to clients that support it. Like so:

Code:
@media screen and (-webkit-min-device-pixel-ratio: 1.5) {
     /* target code here */
}
 
Upvote 15
Fully support this idea. I have been tinkering with my site since I got the ipad 3.
I also read up on making websites retina ready.
For the time being, I redid my logo to use SVG format. The result is great.
So either XF provides stock images in vector format or provide 2x versions.
 
I just tried to upload a svg file as avatar and got an invalid type error.
Yeah, that's not going to work, mostly because the internals are built entirely to handle bitmap image formats (including upscaling/downscaling). Support for vector user uploads would be nice, but vectors aren't appropriate for most avatar images, so there's still going to need to be a lot of backend work to generate @1x and @2x versions for each image.
 
Nokia and old IE won't allow it.

The only thing that needs to be done to support @2 displays is create larger icons and then scale them down via background-size. Problem with that is Opera Mini and old IE don't support background-size.

edit: I was wrong. Please ignore this.
 
Nokia and old IE won't allow it.

The only thing that needs to be done to support @2 displays is create larger icons and then scale them down via background-size. Problem with that is Opera Mini and old IE don't support background-size.

It can be implemented in JavaScript.
 
I thought I saw Shawn mention how he'd made the images all SVGs and they scaled for retina display. I might be misremembering though.
 
Because I just checked it with my phone that has @2 display.
Any chance you could post a screenshot of what you see with your phone?

The left is the same avatar here vs on my site (as example)...

Image%202013.01.28%2012:19:07%20AM.png
 
Nice. I didn't look at avatars. Well done :)
Forum icons though aren't done. See folder icons and forum selection icon on screenshots below.
 

Attachments

  • 2013-03-01 21.35.47.webp
    2013-03-01 21.35.47.webp
    95.2 KB · Views: 59
  • 2013-03-01 21.35.59.webp
    2013-03-01 21.35.59.webp
    85.4 KB · Views: 55
Nice. I didn't look at avatars. Well done :)
Forum icons though aren't done. See folder icons and forum selection icon on screenshots below.
I think Shawn posted how to make the avatars retina-ready before.
Can you make your Responsive addon retina compatible as well?
 
Top Bottom