Viewing Image fill Retina bug
Image fill Retina bug
|
User: Robert G. 10 years ago
|
|
|
Hi, When creating a button using a rectangle shape, filled with images (using the image fill option for normal, over and down) only the 'normal' state calls the retina file version on a retina screen while both 'over' and 'down' use the non-retina version. An example here: http://graphicdesignportfoliocourse.com/everwebissue/index.html I created both standard and @2x sized versions of each button state at precise pixel dimensions in Photoshop before importing all six images into assets and the file names are correct. Any ideas? Thanks. EDIT: I've just put the better example link here at the top. Last edit 10 years ago |
|
|
User: Robert G. 10 years ago
|
|
|
I should say I am running Everweb version 1.8.2. Also, having checked today, this happens with both PNG and JPG versions of buttons. Last edit 10 years ago |
|
|
User: Robert G. 10 years ago
|
|
|
Ok, here is another version that hopefully demonstrates the problem a little more clearly (you need to be viewing on a retina screen to see it): http://graphicdesignportfoliocourse.com/everwebissue/index.html As you will see, the first image in all buttons and text is @2x but the 'over' and 'down' states are the standard definition. Though it is plainly obvious to me that this is wrong, it can help you to observe the problem if you turn on screen magnification in OS X preferences available in the accessibility system prefs pane > zoom; I use the two finger gesture on trackpad, holding down the control key to zoom in to see. I've read all the past posts about similar issues but they mostly seem to have been a failure to add @2x to the filename or similarly simple errors. These images have been created at precisely the right sizes at both standard and at @2x sizes, added to assets and placed onto a fresh page but the issue persists. This is a bug right? |
|
|
User: James G. 10 years ago
|
|
|
Since this is an experiment page, what happens when you remove the non-@2x images from Assets and just call out the single image? I personally do not use 2 versions of an image, only 1 at twice the size it will ever be displayed. Browsers/servers should serve the correct image for the display used. It also looks like your images_are_named_with_underscores. They-should-have-hyphens-instead, or so I have been told and read in many places. |
|
|
User: Robert G. 10 years ago
|
|
|
Hi Jim. Thank you for your suggestions. I tried a version using just @2x assets here: http://graphicdesignportfoliocourse.com/everwebissuev2 As you will hopefully be able to see on a retina mac, in this instance the 'over' and 'down' states now appear enlarged, pixellated and cropped as if the shape fill has been zoomed by 2x. The images in this version are all set to 'original size'. I also tried a version using just @2x assets but with 'stretch' selected in the image settings instead: http://graphicdesignportfoliocourse.com/everwebissuev3 No dice. Looks awful. Lastly, I tried a version using filenames without spaces, hyphens or underscores here: http://graphicdesignportfoliocourse.com/everwebissuenohypens/index.html It doesn't seem to make any difference in this instance though I will be careful about filenames in future. You mentioned that you only use images at twice the size they will ever be displayed. I had always understood from the EverWeb tutorials that you had to prepare both 'normal' and '@2x' versions of images? It is a pain but I actually don't mind doing it as long as the quality is good (but it isn't). Anyway this seems like it should be a simple fix for the EverWeb Team but it is a fairly fundamental issue I would think for images to look as good as they can on all displays? |
|
|
User: Jumbo T. 10 years ago
|
|
|
If you look at the source you can see what's happening : <img src="images/home/2_track_record_normal.png" height="40" width="109" data-src2x="images/home/2_track_record_normal@2x.png" onmouseover="swapImage(this,'images/home/shape_mh_4.png')" onmouseout="setOriginal(this)" onmousedown="swapImageMD(this,'images/home/shape_md_4.png')" onmouseup="setOriginal(this)" /> On a retina display the @2x image is displayed. But when you hover (onmouseover) of click (onmousedown) a normal image (shape_mh_4.png) is displayed. It's not a bug. It's basic code that you can copy from the internet. Perhaps there is better code if you search for it. |
|
|
User: Robert G. 10 years ago
|
|
| Thanks Jumbo - that is insightful and it does clarify what is happening. As a former iWeb user I was quite used to digging around in the code in html snippets to manually repair problems but it seems to me that EverWeb really should call the correct image automatically as I don't want to be manually adjusting every image link before uploading. I do have hosting both with Rage and elsewhere so I could do what you suggest if uploading to my alternative space from a folder but it wouldn't even be an option for a user who wanted one click publishing via Rage. I still think it is an issue to be resolved by the EverWeb Team but thank you for explaining what is actually happening under the hood. | |
|
User: Roddy 10 years ago
|
|
|
For images this size, I wouldn't bother with the "retina" deal. Your hover button is only going to work when viewed on computers and there aren't too many around with retina displays - yet. You could just serve up an image at 100px x 100px. Using a 200px image in the 100px container will give you "retina" quality and won't have much effect on bandwidth since the hover image is only going to be used on the full version of your website. The tablet and smart phone versions won't use hovers - will they? Javascript should be avoided where possible and a better, smoother hover can be created using CSS. All this retina stuff is really redundant since all the major browsers support srcset which allows us to use not only @2x but @3x, @4x and so on. Srcset is simple to use since it is just added to the <img> tag and the browser makes the decision about which image to load. ------------------------------- Roddy Website: http://everwebwidgets.com Contact: http://everwebwidgets.com/ewWidgets-home/contact.html NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own. |
|
|
✔ Best Answer
|
|
|
User: Robert G. 10 years ago
|
|
|
Hi Roddy. You make some good points and I realise that this is a specific (non-mobile device) situation and you're correct, a smartphone optimised version wouldn't use them. However, using a 200px image in a 100px container doesn’t work as far as I can achieve: I tried this and it gives the effect I previously mentioned here: Quote: I tried a version using just @2x assets here: http://graphicdesignportfoliocourse.com/everwebissuev2 As you will hopefully be able to see on a retina mac, in this instance the 'over' and 'down' states now appear enlarged, pixellated and cropped as if the shape fill has been zoomed by 2x. The images in this version are all set to 'original size'. The use of the non-retina images for 'over' and 'down' affects images of any size I believe (not just these small buttons) and I agree that it is not that noticeable in the examples I have offered but it is noticeable and it annoys the hell out of OCD me because it seems that the solution should be simple: just have EverWeb use the files from the asset list as one specifies in the program. I am sure I speak for many coding illiterate folk when I say that while I can see that the solution appears very simple if willing to dig around in the code it would seem to go somewhat against what the program is supposedly all about. Having said that, I do like your CSS 'fade over' example (thanks) and I do have ALL your ever web code box widgets/stuff; is this one of them that I haven't yet explored? Thanks Roddy. |
|
|
User: Roddy 10 years ago
|
|
|
The code I used for the demo is similar to that of the Image Cross Fade widget.
------------------------------- Roddy Website: http://everwebwidgets.com Contact: http://everwebwidgets.com/ewWidgets-home/contact.html NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own. |
|
|
User: Robert G. 10 years ago
|
|
|
Thanks Roddy. I've tried a version here that uses your Image Cross Fade widget as an alternative to using the EverWeb shape fill options: http://graphicdesignportfoliocourse.com/turnbullconstruction/navtest.html I am pleased that it uses the correct high resolution artwork on a retina Macbook screen. There is no 'down' state for this widget of course but as we've discussed on a mobile device it is largely irrelevant and I think this does what I am looking to achieve. Thank you for suggestion. |
|
| Post Reply |
| You must login or signup to post. |