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

[David Fawcett]

Jeremy,

In general, whenever you have text or other vector features in a
raster/image format, they only look good within a relatively narrow
scale window.

If you are planning on serving this image up using MapServer, have you
thought about separating the text out and using MapServer to put the
text on as labels?  This would give you crisp text at any scale.

David.

On Thu, May 15, 2008 at 1:48 PM, Jeremy Short <jshort at lodgingcompany.com> wrote:
> 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/
> _______________________________________________
> Users mailing list
> Users at openlayers.org
> http://openlayers.org/mailman/listinfo/users
>