缩放图像会导致临时抖动

Question

这可能是一个重复的问题;我不确定如何说出来，所以我无法找到答案。

我正在使用jQuery在页面加载时弹出一个图像。见http://jsfiddle.net/KT728/

问题在于，当图像达到最终尺寸时，边缘会抖动/粗糙一两秒钟，之后它们会变得平滑。到目前为止，我已经在Safari和Firefox中注意到了这一点。这是动画的代码：

$(document).ready(function() {
    $("img").animate({
        opacity: 1,
        width: "300px",
        height: "300px"
    }, 400, "swing", function() {
        $("img").animate({
            width: "200px",
            height: "200px"
        });
    });
});

我正在使用512像素x 512像素的PNG图像，按比例缩小10到10到300乘以300.

将PNG图像转换为SVG格式是否可以解决问题，或者至少使其不那么明显？最新的浏览器是否支持SVG图像？