Make Photos Non-Pixelatedin Photoshop

Issue

I am one day new to photoshop and can not seem to find how to do this… I have a div that is col-lg-2 and I have an image that I am placing in that div. What is the best way to make an image not become pixelated/dis-proportional when I begin to shrink the size of the screen down. I am using bootstrap, so I would like for it to look the same on a 27 inch screen as it would on an iPhone.

Can anyone point me in the right direction of how to achieve this? I know it will have to do with the quality of the photo, I don’t expect to be able to all of this with CSS. The resolution of my original photo is 640x425.

My markup

 <div class="col-lg-2 col-md-4 col-sm-6 newClass">
        <div class="module">
            <img style="width: 100%; height: 100%;" src="Images/myimage-image.jpg"/>
            <header>
                <h1 style="font-size: 20px; text-align: center;">Test
                </h1>
                <h2 style="font-size: 13px; text-align: center;">This is some sub-text

                </h2>
            </header>
        </div>
    </div>

CSS

 .newClass {
        /*background-color: lightgray;*/
        padding: 0px !important;
        margin: 0px !important;
    }

.module {
        /*background-color: #abc;*/
        background-attachment: fixed;
        /*width: 400px;*/
        height: 300px;
        position: relative;
        overflow: hidden;
    }

        .module > header {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            padding: 20px 10px;
            background: inherit;
            background-attachment: fixed;
            overflow: hidden;
        }

            .module > header::before {
                content: "";
                position: absolute;
                top: -20px;
                left: 0;
                width: 200%;
                height: 200%;
                background: inherit;
                background-attachment: fixed;
                -webkit-filter: blur(4px);
                filter: blur(4px);
            }

            .module > header::after {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, 0.25);
            }

            .module > header > h1 {
                margin: 0;
                color: white;
                position: relative;
                z-index: 1;
            }

            .module > header > h2 {
                margin: 0;
                color: white;
                position: relative;
                z-index: 1;
            }

Image

Solution

Bootstrap has .img-resonsive class available that you can add to your <img> tag. This will apply some default CSS rules that allow the image to scale down to smaller screen sizes.

More details on responsive images are here: http://getbootstrap.com/css/#images

Generally, moving from a large screen size to a small screen size will not negatively affect image quality. Modern browsers use bicubic downsampling in their scaling algorithms, which is comparable to how Photoshop downsamples images in the application.

Answered By – MW5280

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0