MozillaZine

image blurry when using background-size

Discuss how to use and promote Web standards with the Mozilla Gecko engine.
neilcreagh
 
Posts: 3
Joined: October 8th, 2014, 1:09 pm

Post Posted October 8th, 2014, 1:32 pm

I'm having an issue where a logo image, being resized via CSS 'background-size' is displaying very blurry on Firefox for Mac (latest version running on Mavericks). The image is being resized to exactly half the actual image width, and it displays perfectly in all the other browsers (nice and sharp on retina, which is the point) but it's very blurry in Firefox:

See main logo (HTML work in progress) here:
http://fuel.ie/inphophotography/

Image
Last edited by neilcreagh on October 9th, 2014, 2:12 am, edited 1 time in total.

DanRaisch
Moderator

User avatar
 
Posts: 121575
Joined: September 23rd, 2004, 8:57 pm
Location: Somewhere on the right coast

Post Posted October 8th, 2014, 5:14 pm

Moving to Web Development.

patrickjdempsey

User avatar
 
Posts: 23734
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC

Post Posted October 8th, 2014, 5:48 pm

That logo appears blurry to me at every zoom size including 100%... in every program including graphics editing software. It looks exactly the same to me in Chrome as it does in Firefox at 50%... both look blurry and it's not the fault of these programs. The graphic has bad anti-aliasing along flat edges that should be sharp, and also along the straight lines. It looks to me like the original graphic was provided as a bitmap at a weird size and then resized in a graphics program by a weird factor.

In addition, if you know you are going to be resizing a graphic (for HiDPI support I'm guessing?) then you need to make sure that all of the line weights divide evenly into the resizing factor. So the underline should be exactly 2px if you want it to resize to 1px, and you may have to play around with it's exact positioning to get it to resize in the right way and not just turn to gray mush.

So IMO, the original logo graphic needs to be output from whatever vector format it was originally in, to the exact proper size it needs to be for the website, and that needs to be tested by the graphics artist for proper reduction to 50%, with careful attention payed to line widths and positioning for scale reduction.
Tip of the day: If it has "toolbar" in the name, it's crap.
What my avatar is about: https://addons.mozilla.org/en-US/seamonkey/addon/sea-fox/

neilcreagh
 
Posts: 3
Joined: October 8th, 2014, 1:09 pm

Post Posted October 9th, 2014, 2:23 am

Thanks, some valid points there and valuable feedback, but it's more than just that - There is an undeniable difference between how blurry this looks in Firefox compared to any other browser I've tried. I've updated the original post above with a screen grab comparing the same section of the image as they appear in Firefox and Safari - you can see how in Firefox it's considerably more blurred.
I've tested this on PC and get the same issue. I can work around it, using a media query to deliver the high res file to retina screens only (or I might try an svg file) but it's definitely worth pointing out I think.
Is this a bug or does anyone know if something else might cause this?

patrickjdempsey

User avatar
 
Posts: 23734
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC

Post Posted October 9th, 2014, 3:16 pm

On this machine at 50% it looks closer to your Safari sample to me. But they both look blurry and like I said, it's also blurry in graphics software. In general you should never resize images in the browser, but you can thank Apple for requiring this kind of support and not giving a decent way to detect hi-DPI screens.
Tip of the day: If it has "toolbar" in the name, it's crap.
What my avatar is about: https://addons.mozilla.org/en-US/seamonkey/addon/sea-fox/

neilcreagh
 
Posts: 3
Joined: October 8th, 2014, 1:09 pm

Post Posted October 13th, 2014, 6:21 am

Ok, going with svg instead

patrickjdempsey

User avatar
 
Posts: 23734
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC

Post Posted October 13th, 2014, 6:02 pm

SVG is still pretty slow on Firefox and may not work on older machines. Your graphic could probably just be done with a font, a few DIVs and some CSS. Which would be dramatically easier, faster, and lighter than SVG.
Tip of the day: If it has "toolbar" in the name, it's crap.
What my avatar is about: https://addons.mozilla.org/en-US/seamonkey/addon/sea-fox/

Return to Web Development / Standards Evangelism


Who is online

Users browsing this forum: No registered users and 1 guest