WebKit adds support for high-resolution displays, paves the way for Retina-friendly Web
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.
The new standard, an addition to the HTML5 specification called "
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
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.
The World Wide Web Consortium, or W3C, the international organization that defines and administers the open standards that underpin the Web, added
A similar feature, called "
WebKit is the first browser engine to announce support for
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.
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.
Comments
Great, now to have no browser but Safari ever use it.
Quote:
Originally Posted by Tallest Skil
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?
Originally Posted by Gatorguy
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.
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.
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.
Apple 4K Cinema Monitors coming up next!
Quote:
Originally Posted by Gatorguy
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
Quote:
Originally Posted by Gatorguy
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.
Like the way you never mentioned where you sourced this: Gruber.
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 Tallest Skil
Great, now to have no browser but Safari ever use it.
That would kind of defeat the purpose of having, or using, a standard.
Originally Posted by Frood
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.
Chrome could get advantages from it however on apple, and its own devices.
Quote:
Originally Posted by Gatorguy
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
Quote:
Originally Posted by mdriftmeyer
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.
Quote:
Originally Posted by Ireland
Like the way you never mentioned where you sourced this: Gruber.
Oh. Burn.
Quote:
Originally Posted by iang1234
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: [email protected]
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.