Adjust picture size

Based on the carousel bootstrap template (sorry, I cannot include the link directly in this post - but see on the webpage of bootstrap > examples > Carousel). I would like to include a picture for the carousel item. The height of the picture according to its css is 32 rem which would be around 512px. The picture should be displayed in a clear resolution, say at least on a monitor with 1920x1080. I tried using a picture with resolution 7952x5304. Since the height is only supposed to be 512px I cut out a portion of that picture but when including it into the webpage it appears blurred. I played around with that picture and tried out different scenarios but it somehow doesn’t meat my expectations.

How would I choose and/or process a picture to be a good fit into such a scenario? What should the resolution be like?

I know I could adjust the height in the css but I would not want the picture to cover much more than 500-600px. On the mobile screen it anyway would be scaled.

html of the carousel for carousel-item

<div class="carousel-inner">
        <div class="carousel-item active">
            <img src="./images/MyPhoto1.jpg"/>
        </div>
		<div class="carousel-item">
            <img src="./images/MyPhoto2.jpg"/>
        </div>
</div>

css

/* Declare heights because of positioning of img element */
.carousel-item {
	height: 32rem;
}

.carousel-item > img {
	position: absolute;
	top: 0;
	left: 0;
	min-width: 100%;
	height: 32rem;
}

Sorry, but your instructions on how to find what you’re referring to do not provide enough information. I’ve bumped up your posting privileges. If you’d like to post the entire URL now, you can do it.

Are you referring to images contained in the carousel or an image of the carousel?

The measurements you provided the dimensions of the photo in pixels, not its resolution. Resolution is determined by how many pixels are included in a given area and is not necessarily linked to clarity. A blurry photo is a blurry photo, despite its resolution or pixel dimensions.

Why would you use an image width a height of 5304 pixels that would only be displayed at a height of 512 pixels in a web browser? All those extra pixels will just add up to a slower download.

Why did you cut out part of the image? Was this an attempt to make the image smaller? Is this cut-out part of the image for inclusion in the carousel or for another place on the website?

You’re obviously doing something wrong, but I can’t tell from what you’ve written what that might be. It also seems you’re likely a little confused about how digital images need to be prepared for websites.

You listed a fixed height — 512 pixels — for the photo. REM, which you also mentioned, is a measurement based upon the root element size of the typography used on the website. Is this a responsive website where the photos take on a size determined by the width of the browser window or are we really discussing a fixed image size with a height of 32 rems? Your CSS indicates that it’s fixed to a 32rem height but with a 100% width to the parent element. Off the top of my head, this seems a little odd since I think it will result in an image that will stretch horizontally (depending on the browser window width), but not vertically.

There’s also a class in your HTML — active — that’s a bit of a mystery since you didn’t include the CSS in your posted example. I also don’t know why that class only pertains to the first image and not the second.

If we’re really discussing a fixed height, you should resample the image in a photo editor, like Photoshop, to be exactly that width, then save it using JPEG compression to a good compromise between file size and sharpness. Upload that to the website, and it will display exactly as you saved it.

I have a feeling, though, there’s something else going on in all this that you haven’t told us because, possibly, you’re not aware of it. For example, you mentioned Bootstrap, which implies we’re not talking about fixed image sizes, but rather responsive widths that could display at larger sizes depending on the width of the client browser. It’s not likely, but we could also be talking about a server web application that uses something like a GD library to resample and compress the images once they’re uploaded. That’s not likely, but, like I said, I suspect there’s something you’re not telling us because a photo that looks good when it’s sized correctly should look exactly the same before it’s uploaded as it does once it’s uploaded and displayed by a web browser.

So, bottom line: there’s really not enough information in what you’ve written to provide an real answers — just a bunch more questions and observations. Maybe someone else can better decipher it all than I can. If you want to post that link, like I mentioned, you should be able to do that now.

Thanks for your message and analysis although I obviously are unsure about things myself which reflects itself in my post. And sorry about my bad english. Thanks for pointing out resolution is not the same as dimensions. I try to give more info.

I still cannot post links. And I couldn’t find out how to send you a private message with the links in it. :confused:

The example I am following uses the carousel at the top of the page. Now again I have an english problem: I would express it to be a picture of the carousel and not in it (although it is in the carousel, ins’t it?).

As mentioned my picture has the dimensions 7952x5304. If I just add it to the example then it has 100% width of the monitor but the height is squeezed into the given 32rem. Hence, the proportions are wrong. Exactly as you stated:

this seems a little odd since I think it will result in an image that will stretch horizontally (depending on the browser window width), but not vertically.

I could increase the height but since I don’t want the picture to cover the whole height of the monitor but only a certain part/band/stripe I originally thought: If I cut such a stripe out of the picture then the height will not be squeezed/compressed and the proportions be ok. That seemed to be working but then the picture has a bad resolution (not sharp anymore). I guess that is because by cutting a band out of it the zoom of that band was too much.

Now my question was whether my picture possibly was a wrong choice because it reflected the horizon and zooming into that would anyway give a bad resolution. So I possibly should choose a picture like against a wall where the whole picture had more or less the same distance towards the photographer resulting in a good resolution everywhere in the picture. Or whether it would be possible to still use the above picture.

You mentioned as well the download speed. That is another reason why I would like to reduce the picture (cutting out a part or anything else).

I hope that explains it a bit better. The addtional css class “active” is not of relevance for the example. The active class is further deep in bootstrap.

I think the solution would be what you mentioned by stating

If we’re really discussing a fixed height, you should resample the image in a photo editor, like Photoshop, to be exactly that width, then save it using JPEG compression to a good compromise between file size and sharpness. Upload that to the website, and it will display exactly as you saved it.

Could you please tell me more specifically what you mean by “resample”?

©2020 Graphic Design Forum | Contact | Legal | Twitter | Facebook