How to fix png image issue in IE6? - javascript

I know there are many ways available on internet, I found one with using iepngfix , but to resolve this issue i need to specify width and height to each png image and its too time consuming process for me. Because i have 1000's of png images in my project, Is there any way to resolve this issue without specifying width and height to image tag,
My image tag is :
<img src="myPngImage.png" width="120" height="100" />

You might want to look at CSSPie, I use it personally and so far it works great. I didn't test for images transparency in IE6 but seems to be well-supported http://css3pie.com/documentation/supported-css3-features/#pie-png-fix.

If you must support IE6, then I recommend using something like jquery's capabilities (which will auto detect the width/height of images).

<!--[if IE 6]>
<script src="js/DD_belatedPNG_0.0.8a-min.js" type="text/javascript"></script>
<script type="text/javascript">
DD_belatedPNG.fix('img,div,ul,li,li a,a,input,p,blockquote,span,h1,h2,h3');
</script>
<![endif]-->
download code from here
http://trac.symfony-project.org/browser/plugins/pkToolkitPlugin/trunk/web/js/DD_belatedPNG_0.0.8a-min.js?rev=20453
or
customize-your-blogger.googlecode.com/files/DD_belatedPNG_0.0.8a-min.js

Related

Server Side Image Sizing For Responsive Web Site

I need a good idea. I have a website with responsive design.
For example, I have a post and this post has a cover photo and :
If the user's device is a mobile phone, I want to load this image like 300x300.
If it's desktop device ==> 800x500
If it's tablet ==> 600x400
The sizes are only examples. In reality, there are not only 3 sizes but 14 different sizes.
Now what should I do when uploading this image : Should I create 14 different sizes for one image ?
Holding 14 files for 1 image doesn't make sense to me. There should be a better way.
Do you have any better idea ?
Popular approach to this problem is to generate multiple sizes of the same image dynamically. You can put the requested dimensions in the query string of the image URL, with potential size validation.
Often, these images are lazy-loaded, so the size is being generated the first time someone requests it.
Example:
<img src="http://example.com/img/image.php?file=profile.jpg&size=400x400">
The image.php file would return the contents of existing scaled image file (if it exists) or generate it if it doesn't yet.
I hope I understand you correctly, but by creating a separate layout for each device, you can determine how large the image should be for this device.
It could look something like this:
<!DOCTYPE html>
<html lang="en-US">
<body>
<mobilephone>
<style type="text/css">#media(min-width: 400px){smallheader{display: none;}}</style>
<img src="Your Image">
</mobilephone>
<desktop>
<style type="text/css">#media(max-width: 400px){smallheader{display: none;}}</style>
</desktop>
</body>
</html>

Image scaling in IE 11, 10, and 9 is terrible

Before you say this is an existing question, or that all I need to use is ms-interpolation-mode, or that I just need to have a pre-scaled version of the image on the server and serve that up, read the question. Please. None of those are appropriate.
I have an app that draws a very large image using the HTML5 canvas in the browser on all modern browsers. I pull an image out of that canvas and display it (shrunk down considerably in size on-screen). The scaled down image looks fine on Chrome, Firefox, Safari, or Opera whether Windows or Mac. IE however looks very terrible, even though I'm not testing this on old versions of IE (like IE 7 where the ms-interpolation-mode works), but only on IE 9, 10, and 11.
Why are they not smoothly scaling down the image? I thought later versions of IE could do this?
Here's a screenshot of my image saved off as a PNG file and loaded up in IE 11. Note that it's broken even if all I'm doing is looking at the PNG. My software and my web page are completely out of the picture here. This is just IE 11 showing a PNG file.
Am I going to have to do some kind of resizing in the canvas just to make a reduced size version for IE because they can't handle image scaling that every other browser on the market handles with ease? Is there nothing I can turn on via CSS to make this look better?
Here's a direct link to one of the generated images: http://i.imgur.com/T9wgHSo.png. Show me how to make this look good in a significantly smaller (say 0.25x) size in a page for IE 9, 10, and 11.
Why are they not smoothly scaling down the image? Well because Internet Explorer simply does not support a smooth form of interpolation any more. It was indeed supported in earlier versions of Internet Explorer (version 7) by using ms-interpolation-mode.
Newer versions of IE do not support this. It is a very frustrating IE issue and cannot be solved by CSS.
The only options you have is to divert to alternatives (downscale it on the server or obey Microsoft and use Silverlight... ;-) ).
Hate to say it but the only true solution is to just live with it.
There seems to be two questions.
The first is about downscaled <img> and the second is about downscaling image in canvas.
The first happens only on IE but the later happens to other browsers too.
You are doing well, but you can clarify your question more next time; both has been answered on SO and each has different solutions.
For <img>, as discussed in other answers there is nothing you can do, except to provide a properly downscaled image.
For canvas, the question boils down to downscale quality with drawImage, and has already been answered:
HTML5 Canvas Resize (Downscale) Image High Quality?
Here is a sample, using the algorithm in that answer, that produce a nicely scaled image on IE 11:
<!DOCTYPE html><meta charset="utf-8"/>
<img width='2550' height='3300' src='T9wgHSo.png' />
<script> 'use strict';
var img = document.getElementsByTagName('img')[0];
document.body.appendChild( downScaleImage( img, 0.1 ) );
img.parentNode.removeChild( img );
function downScaleImage(img, scale) { /* Please copy code from the other answer */ }
function downScaleCanvas(cv, scale) { /* Please copy code from the other answer */ }
After encountering the same problem myself, I found this Crossbrowser-Bicubic-Image-Interpolation script. I tested it on my Win7 virtual machine in IE11 and it works.
After downloading the .zip you can open the demo.html file to see how to apply the script. Notice on line 26 of that HTML file there is jQuery code that targets only images with the class "first":
$('img.first').bicubicImgInterpolation({
But you can remove ".first" to make it target all images:
$('img').bicubicImgInterpolation({
So that's all you need. jquery.js, bicubicInterpolation.js, and the <script> that calls the function.
These items in the <head> tag are probably a good idea to include too:
<!-- enable canvas for old versions of IE -->
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="edit-Type" edit="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">

How to generate thumbnails automatically with uniform size from orginal images?

I have orginal image from post. I now want get it to create thumbnail but the image is blurred because of resizing.
You can see example from this image :
How can i do that with javascript/jquery?
Thanks for your help.
If you're willing to use CSS rather than jQuery, you could investigate the background-size:cover declaration.
<div style="background:url(/path/to/your/image.jpg);background-size:cover;height:200px;width:170x;"></div>
This ensures that both portrait and landscape orientation pictures will fit into whatever size div you decide.
DEMO: http://jsfiddle.net/8V4f6/
From the images you posted, I assume you already know how to force the size using HTML or JavaScript (e.g., <img width="32" height="32">, myImage.style.width="50%", etc.). Since you said, "image is blurred because of resizing,", I think you're asking how to resize with better quality.
You can't control the quality of resizing done in the browser. (A few years ago, I did a comparison and found big differences in quality between browsers.)
For better quality, your only option is to create separate images using a better algorithm (often referred to as "resampling"). Personally, I use either ImageMagic (any platform) or IrfanView (Windows).
With ImageMagick:
mogrify -path MY_THUMBNAILS -thumbnail 32x32 *.jpg
That's also quicker to download for the user. In contrast, if you were to simply use HTML or JavaScript, the user's browser would still have to download the full resolution file of every image, even if it looks small on the screen.
I realize that isn't the answer you asked for. If you really must do everything in JavaScript, I suppose you could write a web service that resizes images and returns thumbnails. I don't think that's what you were after.
You can use the same image with a lower height and width attribute as your thumbnail image.
<img src="http://i.stack.imgur.com/AziqE.png" height= "10" width = "10" alt = "test image"/>

How do I use Javascript to blur a background image?

My users upload background images. These images are stored in CDN on Amazon S3 (not on the same server).
Currently, the way I do the background is this.
<div id="background"></div>
It's position fixed, and I use javascript to set the background-image.
I would like to BLUR this background on the client side. How can I do this?
Blur.js does not work with an image on Amazon CDN.
You could always try using the Pixastic library (as long as you don't mind using HTML5 features):
http://www.pixastic.com/lib/
You can use css filters to do this, but only in super new browsers. That and a combo of SVG filters will get you a few browsers. I guess you could then fall back to canvas, and excanvas to get almost all browsers.
Really, I'd just use filters, in a year or so most users will have them.
Currently, you can use style.filter, see example below:
var element = document.getElementById("background");
element.style.filter = "blur(0px)";
Tested on Chrome Version 86.0.4240.198 (Official Build) (x86_64) and it works.

Looking for IE6 .PNG Transparency Fix for both img tag and background images

Not sure if this exists as I have been googling all around and can't find anything great. Thought I would post this question prior to redesigning the page I am working on.
Is there anyway to fix the transparency problems with .png's in IE6 for both image tags and background images?
Please tell me there is a magical javascript that just does it!!! I am assuming that I will have to apply two different fixes to address img tags and then background images. If this is the case, what have you found is best?
This may fix the problem
Go to
http://www.twinhelix.com/css/iepngfix/
Download the file iepngfix.zip
To download permanently: iepngfix.zip (40kb). Open "iepngfix.html" in a browser; step by step instructions are within.
After downloading in css
img, div { behavior: url(iepngfix.htc)}
Take a look at
jquery.pngFix.js - PNG-Transparency for Windows IE 5.5 & 6 (IE PNG Fix)

Categories

Resources