Skip to content

Having a high resolution image and scaling down

November 6, 2013

I have encountered a very common problem in that I have been given a high resolution image which I scale its resolution down for a smaller image but lose drastically the quality (blocky edges).

Not sure if its the best approach, but I take the high resolution image, and use CSS to rescale the image using width and height and setting background-size to 100%. This ensures that the image used is from a high resolution original image without losing the quality. be sure to refresh the browser to get the latest updated image if you are used an older low resolution image.

Here is the CSS to cater for the browsers.

.header .logo{
    display:inline-block;
    vertical-align:top;
    width: 260px;
    height: 72px;
    text-indent:-9999px;
    overflow:hidden;
    background:url(../images/logo.png) no-repeat;
    background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    text-align:center;
    margin-left:20px;
}

Notice here I have use the height and width accordingly, and set the background size to 100%.

Advertisements

From → Uncategorized

Leave a Comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: