How to maintain an image's quality when resizing with CSS?

HTML & CSS
1

Hi,

I have an image that is 828px wide. The images on my site have the max-width property set to 100% to make them responsive. When I include my 828px image in a container whose width is less than 828px, the quality of the image suffers badly.

Here is a simplified example where I have resized the image using CSS to a width of 700px. As you can see the quality of the resized image is poor.

Is there any way to resize an image using CSS whilst maintaining the quality? If not, what is the best way to proceed in this case?

2

I’m not the best for judging image quality. It has to be quite bad (or I need to look long and hard) before I even notice. Then again, I’m not so sure that I’m able to see a quality image all that well to begin with.

Anyway, what are referring to as “quality”, blur, contrast?

Is this happening only for two color images, only jpegs, or all images?

1 Like
3

Hey Mittineague, check the demo in my first post and you should be able to see the problem. The image on the left is nice and crisp, the one on the right (the smaller one) is blurred. Happens for pngs and jpgs.

4

Normally you would set width:100% along with height:auto to make them scale down for smaller screens. The max-width:100% does not allow them to scale down, it says don’t go beyond the images native width in your case. Case being that the image is not in it’s own wrapping div or other element.

It is important that the image has a good quality to begin with, I think that is the problem with your image. It seems to be lacking some quality and the text gets difficult to read as it scales down.

Back to the scaling routine, try thes adjustment to your img rules

img {
    vertical-align: middle;
    border-style: none;
    width: 100%;
    height: auto;
    max-width: 828px;
}

And you will see them scale, but the quality begins with the image itself

2 Likes
5

I’ll have to defer to others with better visual acuity. They both look to have the same amount of crispness to me. eg. other than size I don’t see any differences for the "Ubuntu"s.

image
image790Ă—1738 177 KB

6

I just uploaded a higher quality png (1.7MB), but unfortunately the problem persists (demo).

7

With your native img at 828px it looks like the width of the text is no more than 1px wide, computer code text at that.

So when it scales down to 50% a text character at 1/2 pixel will look blurry and loose it’s crispness.

8

So there’s not really anything I can do? At least, no easy fix…

9

Hi there Pullo,

is there any particular reason for your use
of an image instead of text for this project?

coothead

10

Hi coothead,

Yeah, it’s basically a bunch of GUI screenshots. Text wouldn’t work.

11

Right, I don’t see much hope for scaling that image down and keeping it readable.
Just to clarify, I wasn’t saying the font size was 1px, but rather the width of the lines in the text. Such as “U” or “J”, was comparable to a 1px border.

That’s why you don’t scale down text for mobile devices, they still get full size text.

1 Like
12

I don’t recall which they were, but I have noticed CLI display settings somewhere before. If you have the option for what you can use.

I think what might work is pseudo images. i.e. do mark - copy, then use CSS to style it to look like a CLI

1 Like
13

Thanks, Ray. I just wanted to make sure I wasn’t missing anything obvious.

1 Like
14

Hi there Pullo,

I think that you are stumped then. :eek:

The image will certainly be useless on mobile devices. :wonky:

coothead

1 Like
15

Yup, I’ll knock them out for mobiles. They will be useless.

It would just have been nice to have them crisp at a slightly lower res than they actually are (i.e. not have them look all blurry at 750px)

But all good :slight_smile: Thanks for your help.

1 Like
16

You can try some of the options on this page but you may only have limited success as it does depend on the image.

2 Likes
17

How about setting the parent div’s width, height and overflow: auto for the mobile version?

Edit:
Cropping the original image’s width could also be considered and would eliminate the second image.

1 Like
18

Hi, Jim.

Are desktop screen shots essential? Is there something sacred about that screen layout?

Several possibilities come to my mind (some have already been mentioned):

(1) Crop the width and height to eliminate empty black space.

(2) Allow the screen layouts to change at specific widths. Three screen shots of the source taken at specific window widths should cover the gamut and be legible. Remember that any screen shot can be viewed a little larger than its native size before it becomes objectionably fuzzy. In other words, it’s not all about scaling down, one can scale up a little, too.

(3) If content supercedes a fixed layout, you can style a container in which the background color and text looks like a command line screen and make it behave responsively. Requires more work than pasting screen shots, but the payoff might be worth it. (I tried this with the text in your screen shot and it worked well to my eye.) The trick seems to be finding a desirable “command line” font. smile

1 Like
19

Hey Ron,

They’re for a tutorial on how to install Ubuntu server on VirtualBox and connect to the Ubuntu instance via SSH. They’re not essential to the tut, but are meant to give the reader a couple of checkpoints as to what they should be seeing on their screens.

I think this is what I will end up doing. Thank you :slight_smile:

Will also give that a try. Thanks, John.

Thanks, Paul. I found that page, too and thought “Yay! A quick fix”. It does improve the quality of the image a little, but makes a portion of it unreadable :frowning:

1 Like
20

@James_Hibbard, Just for fun, I’m still dabbling with your screen shot issue, but I need to ask a few numpty questions.

Is the tutorial meant to demonstrate the view of a desktop layout (where such an installation would most likely take place) yet be readable on a variety of devices, desktop, tablet, mobile? Ie, the person could be reading the tutorial on his mobile device while installing Ubuntu on his desktop?

Are you using a terminal emulator with a fixed width in the installation process or is there some predictable width that the installation may occupy on the screen? (I notice that the 4th and 5th starred lines seem to wrap at about 78-80 characters.) Can I assume tha 80 characters is a predictable max width of a screen shot?

1 Like