Currently the png images used in the application do not show up crisp and clear. There is clearly a resolution issue. We tried to change the resolution of the images like in page.setImage from 32x32 to even 128x128. The higher the resolution, the worse the images actually look.
In native iOS the resolution of the images used for retina displays are defined by a naming convention, like icon.png and icon#2x.png, which has double the resolution.
Tried that as well, knowing there is no documented evidence that this should work.
Any words of wisdom?
Thanks!
Vincent
This is planned for a future release. The API (based on SWT) does currently not support multiple images with different resolutions to be set on a single widget.
Related
I use openseadragon show arts in my web site, but they seem not so clear as its origin. (I do not have so much reputation to post snapshots):
The original one is sharper, and the one rendered by openseadragonone is blurred.
I was thought that it caused by Deep Zoom Composer, which decreased quality when creating DZI image parts, but i was wrong. The part image in DZI directory and the original one are exactly same, and all of them are readered by a browser(IE 10).
Now the reasonable explaination is the randering type of openseadragon cause the difference, is this a bug? or is there an option / argument which can improve rendering effect in openseadragon?
Two possible issues here. Are you on an HDPI (i.e. "retina") screen? If so, there is a bug fix in master that's not on the latest release yet.
Otherwise, it's probably the minPixelRatio. By default OpenSeadragon allows the image to not be entirely full resolution at some zoom levels, to save on bandwidth. You can modify this value by passing minPixelRatio: 1 as one of the options when you create your viewer (the default value is 0.5).
We can continue the discussion in the issue here: https://github.com/openseadragon/openseadragon/issues/646
Can anyone please help me understand what resources the system uses to render fonts on the browser? For e.g. graphics card, memory, etc. Sorry for this vague question but I am facing a problem here. We have a custom font which gets rendered differently in same versions of safari browsers in different systems. For instances, in some systems the fonts appears to be a bit bolder and due to that it is taking up more space to get displayed. All the systems have same resolution.
Safari uses Quartz to render fonts on OS X. I'm not sure what it uses on Windows but it seem it doesn't use Windows rendering engine for that. Quartz utilizes some of the graphic card resources but it's still mostly software rendering.
Quartz has a number of rasterization options that can influence font appearance. One of the most prominent is Font Smoozing. Here's an article about Font Smoothing on support forums. Though, I don't think it should change the amount of space rasterized text actually takes.
You may have problems with fonts themselves. Maybe, different systems have different versions of the font you use and that changes the way it looks. Or your font doesn't get loaded on some systems and Safari uses a fall back font. There may be many reasons. It's hard to tell what exactly causes your problems just from your description.
Now that the new Macbook Pro is coming out with a Retina Display, there are a lot of resources out there on how to make Mac apps and now even websites "Retina Display Friendly". Even Google is updating Chrome for Retina Display...
Why is this necessary at all? From what I understand, Retina Display is just a higher resolution screen. Right?
I thought when you develop gui's for desktop software and develop websites, you are developing something that is supposed to work and scale properly with virtually any resolution... When you resize an app's window, or display it on a higher or lower resolution display, it is supposed to scale and display properly.
So why are these people coming out with guides on how to make something look good on a Retina Display? Shouldn't it already look fine by default? Is there something about Retina Display that I'm not understanding?
And for the record, I'm not talking about iPhone 4 Retina Display. Most iOS dev's make their apps with fixed position elements since they know the screen's won't change size/shape. So I understand the importance of developing an app to look good on the iPhone 4/s vs 3g/s.
With the Retina display apps don't actually scale like they're being resized, all the controls are resized to be twice as big. If an app would be scaled normally, not by scaling all the controls, etc. you wouldn't see anything, because everything would be too small. It's the same difference between a Retina and a lower-resolution display as on the iPhone 3GS / iPhone 4.
An example:
These images are actually the same size, just the pixel densities differ.
And here's how it looks not properly scaled (using some app to disable proper scaling):
http://cloudmancer.com/images/trueretina.jpg
I thought when you develop gui's for desktop software and develop websites, you are developing something that is supposed to work and scale properly with virtually any resolution... When you resize an app's window, or display it on a higher or lower resolution display, it is supposed to scale and display properly (StackOverflow, for example, uses a 960px-wide container).
From a web developer standpoint, you are often asked to develop fixed-width websites (ranging from normally 940 to 1000 pixels wide), and they don't get to scale at all. There are a lot of websites like this and many apps just aren't designed to increase in size.
Also, apps that do grow in size usually expect that a bigger resolution also means a bigger screen, so they simply stretch the main application panels and are done with it.
Now, consider static elements, like a 150x50 button that says 'Click me'. This button is not intended to become bigger and is perfectly acceptable on a regular 1440x900 display. Now the retina screen comes in with its 2580x1800 resolution. The app sees the resolution change but it thinks "Hey, that user must have a huge screen" so it keeps the button the same size.
The problem that now occurs is that the button, because both resolutions apply to the same 13" screen, is now appearing to be a fraction of the size of the original button. Depending on your user vision, he might not be able to read the text on it, and might have a hard time clicking it, depending on the mouse settings.
To fix that problem, Apple and Microsoft used two different solutions:
Microsoft decided to tell the app the display had a 2580x1800 resolutions, but that the user wanted to have everything scaled to 200 dpi. This means that, if an app does not follow the guidelines, it will look smaller. Many apps simply ignore the DPI settings (though this might change with Windows 8);
Apple decided to report to apps that the resolution of the monitor was 1440x900, but that it could display higher-resolution elements if asked to; This means that apps existing before the new retina settings will appear to be the same size as before for the end-user (with added benefits like crisper text if they use the default Apple APIs), but that they can decide to provide high-DPI images that will look much better on the display.
Both solutions requires apps to be aware that the display is high-DPI ('retina'), but the way Apple handled it means the static websites and apps mentioned earlier will keep looking just fine, except they wont have super-crisp, high-resolution images to use. And, to opt-in to the retina features, they have to provide 200x200 images for a 100x100 canvas, for example, and Apple will take care of the rest.
I'm starting to venture out from using jpeg and gif files to png, I was wondering if there were any standards for using png beside IE's lack of support for it. I also want to know if there was any current articles about setting I should be using when optimizing for web? Right now I'm using photoshop to do this, should I be using firework instead?
Which optimizations you use depends on the type of image. If your image contains only few colors, you might use png-8, otherwise you may need png-24. Same goes for the use of transparency/alpha blending.
The Photoshop save for web-feature does a fine job, but when your website has a lot of visitors, you may benefit from using PNGCrush for further compressing your images. You can use the YSlow plugin for FireFox to test how much bandwidth you can save by crushing your images.
Also, you can make use of CSS-sprites if your design allows it. This can result in less (but larger) images and therefore less requests and sometimes less bandwidth. But this doen't depend on the type of images you use.
Png is supported by IE, by the way. Only the alpha-transparency is not supported by IE 6, but there are CSS/Javascript trics to work around that, although they do not work for background images.
I wouldn't quit using jpg. Jpg is very useful when it comes to pictures. Png files are convenient for small images like buttons, graphical elements, and for images with large plain areas, like screenshots.
Since I'm always sticking to CSS 2, it was a (pleasant) surprise for me today to find out that CSS 3 supports alpha channels in colors. That allows for a nice range of effects. But - which browsers (and from what version) support this? Is it safe to use this today, or are we better off by still making a 1x1px png image and adding the IE6-filter-hack?
Here is an article detailing support for that in various browsers.
You probably should do this with a PNG image and fall back to something reasonable for IE 6. And you don't want that PNG image to be 1×1 px² large because tiling such very small images is painfully slow in some rendering engines. Making the image 100×100 px² doesn't cost you anything :-)