or Connect
AppleInsider › Forums › General › General Discussion › WebKit adds support for high-resolution displays, paves the way for Retina-friendly Web
New Posts  All Forums:Forum Nav:

WebKit adds support for high-resolution displays, paves the way for Retina-friendly Web

post #1 of 21
Thread Starter 
WebKit, the Apple-supported open source project behind Safari, is the first browser layout engine to support a new Web standard that makes it easier for developers to take advantage of high-resolution displays, like the Retina panels found in the iPhone, iPad and MacBook Pro.

WebKit
Example of srcset variable resolution implementation. | Screen images by Gianni Cumbo via Flickr


The new standard, an addition to the HTML5 specification called "srcset," provides developers with an easy way to serve users different image versions based on the resolution of their device. For example, a website may serve larger, higher quality images to visitors browsing on a Retina MacBook Pro while sending smaller, lower quality images to visitors on a MacBook Air.

Websites and Web-based applications have been slow to provide support for Retina displays since the screens first appeared on the iPhone 4 in 2010. Current methods for implementation are suboptimal - they can be cumbersome for developers, degrade the user experience, or lack cross-browser support.

Using srcset, developers can specify multiple variations of an image with a single declaration, and it is designed for compatibility with older systems. Browsers that do not support srcset will simply ignore it without any adverse affect on the user.

The syntax is similar to Apple's iOS conventions for Retina-ready graphics: developers simply provide an alternate filename and a resolution multiplier, e.g. 1x, 2x, or 4x. The "resolution multiplier" is a measure of how many physical pixels make up one display pixel; for example, the iPhone 5 has a physical resolution of 1,136-by-640 pixels, but a display resolution of 568-by-320 pixels. This means there are 4 physical pixels for each display pixel, or a 4x multiplier.

WebKit


The World Wide Web Consortium, or W3C, the international organization that defines and administers the open standards that underpin the Web, added srcset to the HTML5 specification in May 2012.

A similar feature, called "-webkit-image-set," was added to WebKit and shipped with Safari 6 and Google's Chrome 21 in October of the same year. The asset never achieved widespread adoption, however, as it was not implemented in Microsoft's Internet Explorer and Mozilla's Firefox, which together commanded more than 50% of the international browser market at the time.

WebKit is the first browser engine to announce support for srcset, and the feature is likely to ship in Safari 7 with OS X Mavericks.
post #2 of 21

Great, now to have no browser but Safari ever use it.

Originally Posted by Slurpy

There's just a TINY chance that Apple will also be able to figure out payments. Oh wait, they did already… …and you’re already f*ed.

 

Reply

Originally Posted by Slurpy

There's just a TINY chance that Apple will also be able to figure out payments. Oh wait, they did already… …and you’re already f*ed.

 

Reply
post #3 of 21
Quote:
Originally Posted by Tallest Skil View Post

Great, now to have no browser but Safari ever use it.

I wonder what Google is doing for their Chromebook Pixel now (if anything) that they've split off from WebKit?

post #4 of 21
Android added 4k display support with 4.3. Chrome version 30 adds HiDPI support which I believe is what this article refers too. As also alluded to in the article Chrome added support for Apple Retina display resolution last July
Edited by Gatorguy - 8/14/13 at 3:19pm
melior diabolus quem scies
Reply
melior diabolus quem scies
Reply
post #5 of 21
Originally Posted by Gatorguy View Post
Android added 4k display support with 4.3. Chrome version 30 adds HiDPI support which I believe is what this article refers too. As also alluded to in the article Chrome added support for Apple Retina display resolution last June

 

Yeah, did they do it via this standard right here or their own hobbled together crap?

 

You need to look less desperate.

Originally Posted by Slurpy

There's just a TINY chance that Apple will also be able to figure out payments. Oh wait, they did already… …and you’re already f*ed.

 

Reply

Originally Posted by Slurpy

There's just a TINY chance that Apple will also be able to figure out payments. Oh wait, they did already… …and you’re already f*ed.

 

Reply
post #6 of 21
Quote:
Originally Posted by Tallest Skil View Post

Yeah, did they do it via this standard right here or their own hobbled together crap?

You need to look less desperate.

http://news.cnet.com/8301-1023_3-57593030-93/chrome-gets-high-resolution-screen-support-on-windows-too/
http://appleinsider.com/articles/12/07/31/google_chrome_browser_updated_for_apples_retina_display_macbook_pro

If I've read other articles about it correctly Apple's Safari is in fact the first to finalize while Chrome may be another few weeks. Both are working with the W3C on the same standards according to the AI article, right?

The only reason I replied to your post was becasue you hoped it would only be a Safari supported feature, which apparently won't be the case. That's a good thing too since Safari on any platform other than Apple's may not be an ideal choice. And yes I tried it on a Windows machine last year.
Edited by Gatorguy - 8/14/13 at 3:24pm
melior diabolus quem scies
Reply
melior diabolus quem scies
Reply
post #7 of 21

I have not started putting any Retina specific code in my pages and I haven't had time to research it but how does this markup handle a rMBP that is using a different resolution, as there are a few different choices that the user can select, unlike iOS devices where the resolution is fixed.

Life is too short to drink bad coffee.

Reply

Life is too short to drink bad coffee.

Reply
post #8 of 21

Apple 4K Cinema Monitors coming up next!

Proud AAPL stock owner.

 

GOA

Reply

Proud AAPL stock owner.

 

GOA

Reply
post #9 of 21
Quote:
Originally Posted by Gatorguy View Post


http://news.cnet.com/8301-1023_3-57593030-93/chrome-gets-high-resolution-screen-support-on-windows-too/
http://appleinsider.com/articles/12/07/31/google_chrome_browser_updated_for_apples_retina_display_macbook_pro

If I've read other articles about it correctly Apple's Safari is in fact the first to finalize while Chrome may be another few weeks. Both are working with the W3C on the same standards according to the AI article, right?

The only reason I replied to your post was becasue you hoped it would only be a Safari supported feature, which apparently won't be the case. That's a good thing too since Safari on any platform other than Apple's may not be an ideal choice. And yes I tried it on a Windows machine last year.

What I don't get is why it appears it was added to the HTML5 spec in May 2012 and no one has used this standard in a browser until now? And that in fact they used an alternate method later in 2012? Or I'm not understanding it correctly which is certainly possible, lol

post #10 of 21
Quote:
Originally Posted by Gatorguy View Post

Android added 4k display support with 4.3. Chrome version 30 adds HiDPI support which I believe is what this article refers too. As also alluded to in the article Chrome added support for Apple Retina display resolution last July

 

No this is not what this artilce is referring to.

 

It's referring to WebKit proper, NOT Blink, Google-forked WebKit.

 

http://trac.webkit.org/changeset/153624

http://trac.webkit.org/changeset/153733

 

https://www.webkit.org/blog/2910/improved-support-for-high-resolution-displays-with-the-srcset-image-attribute/

 

These are Apple commits.

post #11 of 21

Like the way you never mentioned where you sourced this: Gruber.

Citing unnamed sources with limited but direct knowledge of the rumoured device - Comedy Insider (Feb 2014)
Reply
Citing unnamed sources with limited but direct knowledge of the rumoured device - Comedy Insider (Feb 2014)
Reply
post #12 of 21
Quote:
Originally Posted by mdriftmeyer View Post

No this is not what this artilce is referring to.

It's referring to WebKit proper, NOT Blink, Google-forked WebKit.

http://trac.webkit.org/changeset/153624
http://trac.webkit.org/changeset/153733

https://www.webkit.org/blog/2910/improved-support-for-high-resolution-displays-with-the-srcset-image-attribute/

These are Apple commits.

Doesn't the article say that WebKit is the first browser engine to support the standard? Chrome would be the next. Same standard different engines unless I've misunderstood, with the article as much about the standard as it is about Safari now supporting it.
melior diabolus quem scies
Reply
melior diabolus quem scies
Reply
post #13 of 21
Quote:
Originally Posted by Tallest Skil View Post

Great, now to have no browser but Safari ever use it.

 

That would kind of defeat the purpose of having, or using, a standard.

post #14 of 21
Originally Posted by Frood View Post

That would kind of defeat the purpose of having, or using, a standard.

 

Let's look at the facts. IE raped the Internet for over a decade with its own stuff; it's not WebKit. FireFox is a dog; it's not WebKit. Opera is obscure; it's not WebKit, and Chrome is made by thieves who are acting ever more like Microsoft and creating their own versions of things. It's WebKit, but I can't see them supporting this.

Originally Posted by Slurpy

There's just a TINY chance that Apple will also be able to figure out payments. Oh wait, they did already… …and you’re already f*ed.

 

Reply

Originally Posted by Slurpy

There's just a TINY chance that Apple will also be able to figure out payments. Oh wait, they did already… …and you’re already f*ed.

 

Reply
post #15 of 21
Quote:
Originally Posted by Tallest Skil View Post

Great, now to have no browser but Safari ever use it.
Would safari run this on Microsoft if you have a 4k display?
Quote:
Originally Posted by Tallest Skil View Post

Let's look at the facts. IE raped the Internet for over a decade with its own stuff; it's not WebKit. FireFox is a dog; it's not WebKit. Opera is obscure; it's not WebKit, and Chrome is made by thieves who are acting ever more like Microsoft and creating their own versions of things. It's WebKit, but I can't see them supporting this.
Chrome could get advantages from it however on apple, and its own devices.
post #16 of 21
Quote:
Originally Posted by Gatorguy View Post


Doesn't the article say that WebKit is the first browser engine to support the standard? Chrome would be the next. Same standard different engines unless I've misunderstood, with the article as much about the standard as it is about Safari now supporting it.

 

Looks like this feature is not in active development in Chrome/Firefox/IE

 

http://www.chromestatus.com/features/4644337115725824

post #17 of 21
Quote:
Originally Posted by mdriftmeyer View Post

 

No this is not what this artilce is referring to.

 

It's referring to WebKit proper, NOT Blink, Google-forked WebKit.

 

http://trac.webkit.org/changeset/153624

http://trac.webkit.org/changeset/153733

 

https://www.webkit.org/blog/2910/improved-support-for-high-resolution-displays-with-the-srcset-image-attribute/

 

These are Apple commits.

 

Those commits are made by Apple's employee but they are not authored by Apple aren't they? I am not familiar with WebKit commit/review process but looks like two guys made patches, got reviewed, and got merged into WebKit trunk by a WebKit reviewer/committer that happens to be Apple's employee.

post #18 of 21
Quote:
Originally Posted by Ireland View Post

Like the way you never mentioned where you sourced this: Gruber.

Oh. Burnlol.gif

post #19 of 21
What's this Chrome thing people write about? Sounds like you'll need to polish it ¡
How to enter the Apple logo  on iOS:
/Settings/Keyboard/Shortcut and paste in  which you copied from an email draft or a note. Screendump
Reply
How to enter the Apple logo  on iOS:
/Settings/Keyboard/Shortcut and paste in  which you copied from an email draft or a note. Screendump
Reply
post #20 of 21
Quote:
Originally Posted by iang1234 View Post

 

Those commits are made by Apple's employee but they are not authored by Apple aren't they? I am not familiar with WebKit commit/review process but looks like two guys made patches, got reviewed, and got merged into WebKit trunk by a WebKit reviewer/committer that happens to be Apple's employee.

 

Patch Set Author: dino@apple.com

 

The reviewer: Sam Weinig.

 

As a NeXT/Apple alumni I'll put it bluntly: All commits to WebKit proper are for WebKit proper and originate for WebKit proper. The team was very clear that if and only if they decide any source from Blink is interesting enough that makes sense they will consider it.

 

Google and Apple aren't sharing code in their respective WebKit trunks.

post #21 of 21
Quote:
Originally Posted by Gatorguy View Post

Doesn't the article say that WebKit is the first browser engine to support the standard? Chrome would be the next. Same standard different engines unless I've misunderstood, with the article as much about the standard as it is about Safari now supporting it.

Quote:
Originally Posted by iang1234 View Post

Looks like this feature is not in active development in Chrome/Firefox/IE

http://www.chromestatus.com/features/4644337115725824

Quote:
Originally Posted by mdriftmeyer View Post

Patch Set Author: dino@apple.com

The reviewer: Sam Weinig.

As a NeXT/Apple alumni I'll put it bluntly: All commits to WebKit proper are for WebKit proper and originate for WebKit proper. The team was very clear that if and only if they decide any source from Blink is interesting enough that makes sense they will consider it.

Google and Apple aren't sharing code in their respective WebKit trunks.

mdriftmeyer, it looks like I owe you an apology based on the above comments.

Apple is going to try and go with the "srcset" implementation in HTML5, but there's nothing to indicate that Chrome is also committing to it. From what the article states the last time Chrome and Safari tried a specific commit last fall it didn't catch on because neither Explorer nor Firefox would also commit. Perhaps that's the reason for Chrome going for a cross-platform solution? I did note Github comments from last year showing some interest from Chrome developers but they may have decided on this new route instead. No idea really.

I'll certainly defer to you sir.
melior diabolus quem scies
Reply
melior diabolus quem scies
Reply
New Posts  All Forums:Forum Nav:
  Return Home
  Back to Forum: General Discussion
AppleInsider › Forums › General › General Discussion › WebKit adds support for high-resolution displays, paves the way for Retina-friendly Web