• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Support for HiDPI images and assets / Retina display support

Erik

Well-known member
#1
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 */
}
 

Andy.N

Well-known member
#2
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.
 

Erik

Well-known member
#7
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.
 

Adam Howard

Well-known member
#8
With many major sites accepting this as a standard option, such as Gravatar which is built into XenForo and a wide range of mobile, tablet, and even desktop hardware support for retina display, logic would suggest XenForo offer better built in support for this.

Even free alternatives such as Word Press are adding such support
http://techcrunch.com/2012/08/02/wo...atar-and-all-hosted-and-self-hosted-wp-sites/
 

Arty

Well-known member
#11
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.
 

mizter1nho

Well-known member
#12
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.
 

RobParker

Well-known member
#16
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.
 

Andy.N

Well-known member
#20
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?