[OpenLayers-Users] Large PNG image degraded when inserted into smaller DIV

[Jeremy Short]

I have a 24 bit PNG image 3872 by 2904 pixels (4 by 3 proportion) which 
when rendered in a DIV with those dimensions looks decent, but big. 

I want to display this image within a smaller div 400 by 300 pixels to 
make it manageable in terms of screen size and so I can use the zoom 
tool usefully.  However when I do this it degrades the image such that 
the writing is jagged and not nearly as crisp, especially noticeable 
when I zoom in a couple of levels. 

Eventually, I'll be retrieving the image from Mapserver via tiling but I 
want to make sure I can render the full size image properly before I 
proceed.

Is there a way to perform the desired resizing without the degradation 
of quality?  Here is the code used.


<style>
...
        #map3 {
            width: 400;
            height: 300;
            border: 1px solid gray;
        }

    </style>
 
    <script type="text/javascript">

...
            map3 = new OpenLayers.Map('map3');

            var options3 = {numZoomLevels: 4};

            var graphic3 = new OpenLayers.Layer.Image(
                                'Big White',
                                '/img/BigWhite_300.png',
                                new OpenLayers.Bounds(-200, -150, 200, 150),
                               new OpenLayers.Size(400,300),
//                                new OpenLayers.Size(3872,2904),
                                options3);

           map3.addLayers([graphic3]);
           map3.zoomToMaxExtent();

</script>



-- 
Jeremy Short
IT Programmer
The Lodging Company
http://www.skihills.com/