The image is 30px high. I downloaded the images with the lowest resolution I found and with a good quality. However, they are blurry.
I put a hover animation and when I move the mouse, in the time that the animation occurs it defaults and then becomes blurry again.
Is there any way to solve this ??
You could download SVG version of it
Related
I was experimenting with bitmaps and created an alpha mask. When i test the program in full screen, it works fine however when I re-size the screen, the bitmap alpha masks doesn't seem to scale correctly. Below are illustrations of my issue. The bitmap alpha mask is shown as a purple background for visibility, and the blue portion is where the bitmap is completely transparent.
Full Screen (Looks Good)
Regular Screen (Looks like the mask is shifted to the left):
Why is this happening and what can i do to fix it?
Thank you.
It turns out the text box Anti-aliasing was the problem. I changed the ani-aliasing from "Anti-alias for readability" to "Anti-alias for animation" and now everything scales properly.
When I add a 775 x 775 image to a fabricjs canvas and resize it down to around 90 x 90, the image greatly loses its quality.
But if I add that same image as an <img/> and scale it down, it retains its quality.
Why does the canvas image become so low quality? How can I make the canvas image retain it's original quality like the <img/> does?
It should probably go for a comment, but unfortunately I am new here and I can't add comments.
However, to me it looks like antialiasing issue. Canvas is just bunch of pixels - it's up to you whether you do some antialiasing or not. Browsers however do some antialiasing on picture scaling (see here Disable antialising when scaling images).
This question might be a duplicate of:
Html5 canvas drawImage: how to apply antialiasing
HTML5 Canvas and Anti-aliasing
Hope it helps.
I have an odd issue. Sometimes when I load the website I've created within IE8, my main content block loads, the background color for the entire page loads, but the background image I've declared hangs for about ten seconds before suddenly appearing.
This does not happen in FF, Chrome, Safari, or IE10. Have not tested in IE9. I've read that you should try to minimize the size of the background image, so I got it down to around 100kb.
I'm just hoping that someone could give me some insight into why IE8 would hang on loading a background image. Here are links to my page, and my CSS code. Also, keep in mind that I am using GetSimple CMS, so all of the absolute paths I'm using are on purpose as this CMS requires it.
http://expirednews.net
http://expirednews.net/theme/CornerShop/css/style.css
Picture of what is happening:
http://i.imgur.com/ES3LXOf.jpg
I would guess that it's just taking a long time to load in. You've got a lot of graphics there, and the background image will load last. You might consider further delaying the slideshow, and dynamically loading the images into it after both the page has completed, and a small timeout, even 100ms should help significantly.
Another alternative, is to put the background image in an actual img tag that is hidden via css. This should cause IE to load the background image before all the slideshow images. A little bit hacky, but quick and dirty.
I have a website with a jquery cycle slideshow. It slides smoothly on the ipad, but if i add a css background image to the body, it seems like the FPS drops and the slide effect looks really bad. This happends even if the background image is smaller than the iPad screen.
Why is this and how can I fix it?
You can try to use hardware acceleration like adding the -webkit-transform: translateZ(0); CSS to the block you want to accelerate.
Here is a good article about GPU accelerating.
Also, I don't know what image do you use, but there is a bug in webkits, where using CSS3 radial gradients for background may cause great drops in FPS.
I've built a website for someone, but according to him, scrolling is very very choppy on the website in IE7 on his computer. On my computer I don't have any problems with scrolling (in any browser), i've already tried some things, but according to him scrolling still is very choppy. So I was wondering if someone has some suggestions for me? I think the main problem is the full width background image, but i'm not entirely sure.
The website is:
www.casalagodilugano.nl
The website is in dutch, but for this question that doesn't have to matter
edit:
Tx for the helpful answers. In the end, it was indeed the background image which caused problems in IE7. By accident I found a way to work around this problem: I set the image as the background image, centered the image, and using css3 I made sure the was stretched the way it should.
I had a problem similar to this. It turned out to be because my computer was full and my performance suffered. Viewing the issue on my new machine (also had IE7) produced no choppy scrolling. I fear your client has the same problem, perhaps suggest it's his computer and not your website?
Edit:
Many things affect the processing on a website, I'd suggest it has to do with your background image. The sand has quite a "repeatable" texture so perhaps you should Photoshop it down so it's a much smaller image and just use 'background-repeat' in your CSS to achieve a similar effect. Your background image is also around 200% of what it displays on the website, I copied the URL of the image and viewed it by itself and it's HUGE! The emphasis here is on image file size, because IE is having trouble shifting the image down when you scroll. It's not a very good browser to be fair. I've also noticed that your large header image is larger in actual size, suggesting that the size is reduced by your code. Try reducing this image size to the size you want to display it
Edit pt 2
I've stumbled upon a script that for some reason waits 5 seconds before running and that is the Google maps API. I respect that you need this for the Routes page but if I were you, on any page where there is no map, remove any mention of the google maps api from the source code.
I have found that IE gets choppy when you have an <input> tag without a border or background specified ... very strange IE "bug" but i've fixed choppy scrolling on sites/pages by just adding a border to the <input> tags.