CSS image rendering solution

I have a scalable image on a website. When an image is scaled to a large extent, it seems very SHARP and ugly.

I tried using image rendering: opimizequality, optimizepeed CSS, but didn't work.

Is there any other way.

thanks

0
source share
3 answers

According to image-rendering in MDC , image-rendering is currently only supported in Firefox 3.6. A similar property -ms-interpolation-mode available for IE7 and IE8. Other browsers do not seem to have this feature (yet).

As latze pointed out , it is best to edit the image, scaling it to the desired level. I'm not sure, but you can try using <canvas> to perform the required interpolation.

+3
source

I would just edit the image instead of CSS.

Try to make the image a little big step by step until you make sure that the image is not displayed (as we call it in Danish, not sure if it is correct in English) "pixelate".

This can be done in various image editing programs from The Gimp-shop to Photoshop.

0
source

Images should not change much. Think of a graphical image, where each pixel represents one square on the graph. If you stretch an image, you essentially make the pixels stretch. Some programs try to fill these pixels with what they think fit, others just make the pixel larger, while others just fill the surrounding areas with the same pixels to give it a kind of flickering effect. Resizing images down, while it tends to work better, also creates the same effect because you simply chop off the pixels instead of adding them. Most of the programs that I saw will twist the pixels together, combining any colors in these pixels. If you have an image with high detail, then chopping off the pixels will look awful. There are no truly reliable ways to determine which pixels to keep in order to keep the overall image in tact. Most websites with zoom features have a significantly larger image size, which is reduced in size, and they allow you to zoom in to view the details of a larger image. Some even get single images of massive detailed and finer previews.

0
source

All Articles