I am dynamically sizing a transparent .gif on my web page using JavaScript. The original image size is around 200x200 pixels and it’s typically resized to between 600x600 and 800x800. In IE8 and FF3, the resized image results in a nice looking gradient where the colors appear to be stretched. However, in older browsers such as IE7 and FF2, the resized image does not show a gradient, but just blocks of the same color. Obviously, there is something built into the browsers that causes this however I am curious if there is a way around this without having to change my original image.
There isn't. Older browsers just take the pixels in the image, and multiply them according to the new size you gave the image.
Newer browsers seem to have more advanced image rendering with anti-aliasing and such, but older browsers just aren't capable of that. If you want the image to look good in all sizes, take the biggest you can and then let it shrink if needed. Upsizing a small image will look ugly, expecially in the old browsers, and there's nothing you can do.
If you are just using it as a gradient, why not just whip up a new one in Photoshop/Gimp that's at the correct resolution for what you need. It will be far simpler in the long run then trying to get an up-scaled image to display properly in all browsers.
It looks like IE7 supports bicubic if you add "-ms-interpolation-mode:bicubic;" to your img css style. I haven't tried it myself, and wonder if it'd work on gifs or if it'd only work on true color images.
Related
I have a background image which is responsive. It adapts to the container with the background-size: 100% method which keeps the aspect ratio. However, for older browsers like Firefox 18 and below and all versions of internet explorer I get a bad image when scaled (jagged or blurry). I tried the css bicubic interpolation (internet explorer) and "image-rendering" (firefox) fix yet no effect what can be observed.
My question is: is there a jquery or javascript way that does the same job while preserving the quality? Like a browser independent scaling method. Googled but found nothing.
I know this is not ideal in terms of speed and I should instead do the resizing in my image editing software but this is not an option in my scenario.
Would be happy to hear about your answers,
Sincerely,
Michael
The only good solution I found to provide the best possible quality is by using a css responsive method.
For latest chrome & safari you have the new HTML attribute SRCSET.
For olders browsers, you can use your images as a div background and change it dynamically with CSS only.
For very old browsers, the only way is to grab images with different sizes using JS...
Having a blurred image is one of the main aesthetic features on my website. So far I am using CSS3 filter blur() to create the blur, but I know this is not supported in neither Firefox nor Internet Explorer. I was wondering is there an alternative, maybe JavaScript/jQuery, which will help me create the blurred effect I am looking for?
There are plenty of JS libraries that blur images.
BlurJS
VagueJS
StackBlur Algorhythm
Anyway, if you're using a static blurred image (i.e., no need to unblur/blur it again), I'd say you should go with a normal bitmap image. That might help to avoid unnecessary CPU load on the browser and compatibility issues.
See if blur.js, a jQuery plugin, does the trick for you. Essentially, what it does is move your image to a <canvas>, and does the blurring effects there. See a more comprehensive article on the topic: Effects for the Web!.
On a site of mine, my client is reporting that images that are reduced in size by code (i.e. specified a width/height) are appearing jagged and pixellated. I have asked her what browser she uses and inevitably it's Internet Explorer.
Is there a way to optimise images in IE or do I need to manually resize the images on photoshop before I put them on the site?
The images in question are resized from 220x220 to 80x80 and I have javascript that expands them to 220x220 upon clicking.
Resizing down or up in a browser can look terrible. It varies from browser to browser, but apparently IE is the worst.
It's best to either write a server side script to create thumbnails, or to manually do it yourself if quality of the image is important. It also saves bandwidth as you don't need to load the big image and only display 1/10th of the pixels.
You should avoid using width and height for resizing. It'll cause a longer loading time (on slow connections and big images).
A better idea is making thumbnails (with Photoshop for example) and use the "Web save" option to reduce the size even more.
http://acidmartin.wordpress.com/2009/01/05/better-image-scaling-and-resampling-in-internet-explorer/
Bicubic image resampling is turned off by default in IE. You can use this to turn it on in your reset stylesheet:
img
{
-ms-interpolation-mode: bicubic;
}
use timthumb, it will create thumbnails for you, you just need to link to the script, and specify the size of the thumbnail and that's it. http://www.darrenhoyt.com/2008/04/02/timthumb-php-script-released/
i'm using it on one of my sites -> http://iv-designs.org/
you can see the images are clean and not pixelated.
Assuming your images are JPEGs, the easiest option is to use IE7's bicubic image resizing feature, which you can turn on using CSS:
img { -ms-interpolation-mode: bicubic; }
Be aware that it's got performance implications (using it a lot will slow the browser down). It also has no effect in IE6, and is no longer needed in IE8.
Another way (which does work in IE6) is to use Ethan Marcotte's wonderful Fluid Images script, which uses some damn clever CSS filters to fix the problem in IE6 and 7. My own variation on the theme fixes the right click problem, but requires jQuery.
HI, Is there a way by which I can rotate an image inside a div clockwise or anticlockwise.
I have a main fixed width div[overflow set to hidden] with images loaded from database. There is a scroll bar for showing the images inside the div. When image is clicked then I need to show the rotating animation either in clockwise or anticlockwise direction.
I have done it using Matrix filter. I would like to know whether it is possible to be done in IE only without using any filters.
try this: http://raphaeljs.com/image-rotation.html
uses canvas but also supports IE
If you're using jQuery, jQueryRotate is a small (less than 3Kb minified+gzipped) plugin that rotates images:
http://jqueryrotate.com/
The only way I can think of for rotating images on the client-side in IE is using filters. For somewhat recent versions the other browsers you can use the <canvas> control.
Your alternative is to use a server-side script to rotate the image. Then you can send the information on how to rotate it with JavaScript (i.e. generate a path to the image such as /rotate?image=img.jpg&amount=90)
CSS3 supports rotation, but it isn't widely supported.
As you asked for JavaScript solution, here's one, but I don't think you can get smooth images.
There is other way to rotate images without any filters / html5.. it's nasty and useless in real world, but possible.
You can store your image as array of pixels, for javascript. Write function to perform rotation with it and encode it to base64 datauri, bmp could be easy and replace image.src with it.
There will be some limitation about filesize and support in old browser and of course terrible performance..
I have a web page which displays a large image, for example a page from a magazine. I have no control over the image size or orientation. It's possible that the image may need to be rotated by the user to orient it correctly.
Are there any Javascript or Flash solutions that will allow someone to rotate and zoom a given image? Ideally I'd specify a single image and the dimensions to use when displaying it. If the image is larger than those dimensions, the user could zoom in and view a portion of the image in greater detail.
I've seen a couple of solutions for rotating images with straight Javascript and CSS. Raphael would do the trick. There is apparently even an example featuring rotating an image. (it uses SVG but is support on all major browsers)
This one is not cross browser, but is an interesting exercise nevertheless.
As for flash rotation etc...
For rotating images, I used jquery-rotate and it works very well.
It is not totally cross-browser, it doesn't work with IE6 (and probably other old browsers).
For zooming, I guess you could make your own implementation using javascript, you can just resize the image (easy with jQuery).