<html>
<head>
<base href="https://bugs.webkit.org/" />
</head>
<body><table border="1" cellspacing="0" cellpadding="8">
<tr>
<th>Bug ID</th>
<td><a class="bz_bug_link
bz_status_NEW "
title="NEW - Retina-ready images appear soft and blurred on non-retina displays"
href="https://bugs.webkit.org/show_bug.cgi?id=157123">157123</a>
</td>
</tr>
<tr>
<th>Summary</th>
<td>Retina-ready images appear soft and blurred on non-retina displays
</td>
</tr>
<tr>
<th>Classification</th>
<td>Unclassified
</td>
</tr>
<tr>
<th>Product</th>
<td>WebKit
</td>
</tr>
<tr>
<th>Version</th>
<td>WebKit Nightly Build
</td>
</tr>
<tr>
<th>Hardware</th>
<td>Unspecified
</td>
</tr>
<tr>
<th>OS</th>
<td>All
</td>
</tr>
<tr>
<th>Status</th>
<td>NEW
</td>
</tr>
<tr>
<th>Severity</th>
<td>Normal
</td>
</tr>
<tr>
<th>Priority</th>
<td>P2
</td>
</tr>
<tr>
<th>Component</th>
<td>Images
</td>
</tr>
<tr>
<th>Assignee</th>
<td>webkit-unassigned@lists.webkit.org
</td>
</tr>
<tr>
<th>Reporter</th>
<td>ashleykaryl@gmail.com
</td>
</tr></table>
<p>
<div>
<pre>Created <span class=""><a href="attachment.cgi?id=277604" name="attach_277604" title="Safari Vs Firefox image comparison">attachment 277604</a> <a href="attachment.cgi?id=277604&action=edit" title="Safari Vs Firefox image comparison">[details]</a></span>
Safari Vs Firefox image comparison
I recently ran a test to see how image compression affects visual quality for retina-ready images starting with an image that was exported from Photoshop save for web at various quality levels. The original image was sized 1000x667 but CSS was used so that the image appears on the page as 500x333. You can see the page in question at <a href="http://sunnymede.net/retina/">http://sunnymede.net/retina/</a>
When viewed with Firefox the images look sharp, whether on retina or non-retina displays. In Chrome or Safari the image is sharp on a retina display but when you open the browser on a non-retina display the image appears sharp for about a second but then becomes soft.
If you click on the edge of the browser window on a Mac and drag it to make it wider the image immediately becomes sharper until the moment you release it. Looking just now on a borrowed Windows laptop using Chrome it seems to be soft all the time.
Normally I use the latest stable release version of Chrome & Safari, so I just downloaded the latest nightly build of Webkit for Mac and found it had exactly the same problem. I am a photographer with no real understanding of browser development or bug resolution but at the moment retina-ready images appear soft in webkit browsers on non-retina displays. Firefox does not share this problem and Microsoft Edge appears to be OK.
Just to be certain this was nothing to do with other factors I created another page with zero styling and that has the same problem. <a href="http://sunnymede.net/blank/">http://sunnymede.net/blank/</a></pre>
</div>
</p>
<hr>
<span>You are receiving this mail because:</span>
<ul>
<li>You are the assignee for the bug.</li>
</ul>
</body>
</html>