The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Image down-size looses sharpness

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • #171328

    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.


    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…


    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.


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

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


    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.

        <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="" />
            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("");
            height: 20%;
    <!-- MainPage -->
    <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 data-role="footer" data-position="fixed">Some ads</div>
    <script src=""></script>
    <script src=""></script>
Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.