Image down-size looses sharpness - CSS-Tricks

This topic is empty.

Viewing 5 posts - 1 through 5 (of 5 total)

Author

Posts
May 29, 2014 at 2:01 am #171328
laura
Participant
Is there any easy way to control how a bigger size image is downsized by the browser without messing up the quality? Normally all information I find on this subject refers to up-sizing images and reduce with traffic.
In my situation this is not an issue since I am implementing a phonegap application and the resources are stored locally. I start with a .png image that is about 1000x300px and has transparent edges. This image needs to be set as background to the header of each page (using JQM). I use
```
background-repeat: no-repeat;  
background-position: right center;
background-size: contain; etc.
```
on the div that makes up the header and the div takes about 25% of the screen height and 100% of the screen width.
Since in mobile development we deal with various screen sizes I think that was a good choice. The problem is that on some devices the image looks nice and sharp and on some it gets blurry (devices are not the same size but really close to each other).
I have read a while ago some article explaining how downsizing an image can lead to quality loss but it related to a photoshop solution on how to resize images – the article stated that resizing an image down to 50% for example is safe but doing so to a 40% for example is not . I am aware my issue might depend on how good the browser is at downsizing images.

Is there any css trick on hot to fix this ?

PS: A similar situation applied to a .jpg image (we also present a small photo gallery – pictures are set as background to a div, also sized relative to screen size this time and withbackground-size: cover) doesn’t seem to be a problem or is less obvious.
May 29, 2014 at 2:30 am #171330

Paulie_D
Member

The problem is that on some devices the image looks nice and sharp and on some it gets blurry

TBH…it sounds more like a retina or pixel-ratio issue…

May 29, 2014 at 3:28 am #171334

laura
Participant

In iPhone everything is nice and sharp
The first Android deivce, an Alcatel renders everything as expected.
The second android device a Sony Xperia SP makes it look blurry.
The issue can also be reproduced in a desktop browser by resizing the window.

May 29, 2014 at 3:58 am #171336

Paulie_D
Member

The issue can also be reproduced in a desktop browser by resizing the window.

Perhaps you could share a link or Codepen.io demo so we can check for ourselves.

May 29, 2014 at 5:39 am #171344
laura
Participant
I’ve put together a small example. I hope it is sufficient to make a point. I am unfortunately not allowed to provide any of our code or images because they belong to the company I work for. I have therefore just used some random images. The logo can be somehow similar since it also consists of styled text and some additional graphics. I have additionally just tested with a couple more images using firefox. Using the image linked in the example and the “responsive design view” in firefox with size 433×644 for example will make the logo look somehow weird.
```
<html>
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no" />
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
    <style>
    .header-with-logo>.ui-header{
        background-color: rgba(0, 0, 0, 0);
        border: 0 none;
        background-repeat: no-repeat;
        background-attachment: scroll;
        background-position: right center;
        background-size: contain;
        background-image: url("http://code2040.org/wp-content/uploads/2013/05/Redbeacon_outline.png");
        height: 20%;
        width:100%;
    }
    </style>
</head>
<body>

<div data-role="page" data-theme="a" id="Home" class="header-with-logo">
    <div data-role="header" data-position="fixed"></div>
  
    <div data-role="content">
        <div>Some content</div>
    </div>
    
    <div data-role="footer" data-position="fixed">Some ads</div>
</div>
  
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
  
</body>
</html>
```
Author

Posts

Viewing 5 posts - 1 through 5 (of 5 total)

The forum ‘CSS’ is closed to new topics and replies.