I need help guys. I am trying to re-size a jpg image to the exact dimensions of 1000 X 400 in Photoshop. The image must be this size because that is what the wireframe calls for. Photoshop is only allowing me to re-size it to 1000 X 700 and something. How do designer’s deal with this. All of the pictures provided to me from the client are taken from a camera and they come in quite large. Also, I will need to make some of the pictures 100 X 100. Again, I know I’m going to run into the same problem there as well. I need to re-size without losing image quality. How do you guys get this done?? Thanks in advance.
1 Like
Jason,
Assuming that you are indeed scaling the image up or down to 1000px wide, it sounds to me like you need to crop the height of the image down to change it from 700px to 400px (or whatever units you are using); otherwise, the aspect ratio of the image would change (the image would become distorted) if the height were changed disproportionately to the width. One cannot scale a 1000x1000 image down to a 200x100 image without cropping from the top and bottom or changing the 1:1 aspect ratio and distorting the image.
Does this help or am I off base?
3 Likes
Yes, the problem is that the desired aspect ratio is different to the original. Image Size… does let you disable Constrain Proportions, but that will distort the image.
If as it seems in this case the original aspect is taller than the intended result, I would do this in two stages. First use Image size to set the width to 1000px. Then use Canvas Size to reduce the height to the required size or use the crop tool to do this second part.
3 Likes
Thank you for the replies. Unfortunately, none of those solutions worked. When I scale it to 1000px width, and then crop the necessary height; I lose most of the picture. This happens with all the pictures provided to me. Is there a solution to this problem?
Hi there Jason_Delgado,
unfortunately, you cannot have your cake and eat it. 
If you wish to maintain aspect ratio then you can
resize to either 1000 x 700 or 571 x 400. 
But 1000 x 400 will, obviously, be rather squashed. 
I would suggest that now is the appropriate moment
to actually discuss these issues with your client .
coothead
4 Likes
Well, it sounds like you need to crop the height significantly, so there’s no way around this unless you’re prepared to have whitespace on each side or something. It’s not really clear what you goal is here—at least to me. I normally set the crop tool to the desired dimensions and then keep as much of the image as I can within those dimensions. Then I export for the web.
The solution is to use pictures of the correct aspect ratio so that they fit your wireframe or change the wireframe to fit the aspect ratio of the pictures. There is no other automatic solution I’m afraid.
As others have suggested you use ‘art direction’ and crop the pictures at suitable points to fit the wireframe once you have resized them while maintaining aspect ratio. This of course may mean for large images with varying aspect ratio that you may miss out on a lot of content.
It’s a simple matter of logistics and you can’t have a picture fit any size unless you squash or stretch it. An image can only be resized as long as you maintain the aspect ratio.
2 Likes
You are altering the aspect ratio of the picture, therefore something has to give, there is no way around that.
If you must change the aspect, you have 3 options.
-
Squash the image by unchecking Constrain Proportions in Image Size. This will cause distortion. Squares will become rectangles, circles become ellipses, people will go short and stubby.
-
Letterbox the image. This method is used in film and video to display media shot in a different aspect to the display screen. Like when you view a wide-screen movie on an old 4 by 3 TV, you get the black bands at the top and bottom. Today you sometimes see vertical letterboxing on TV. For example when they show footage from a football match from the 80s, shot in 4 by 3 on today’s 16 by 9 screens, they put bands on either side of the screen, I have also seen this when they show footage shot on a mobile phone in portrait orientation. Though they may use a background image for this, instead of the plain black bands.
-
Crop the image. This is the method already described, part of the image must go. For me, this is the preferred option for a web image, as the others will look ugly IMO.
As Paul mentioned, there is another option. That is to keep the original aspect ratio, but alter the aspect of the frame on the page to fit the picture. This may be your preferred option, if it does not break your layout.
1 Like
Ok. So, it sounds like I need to alter my layout of my wireframe. Let me ask you guys, what is the height to have a picture cover everything above the fold. I do plan on having my header a 100px in height, so I may be able to crop less if I am able to allow for more height on my layout.
Hi, Jason,
There are too many devices, monitor sizes, and browser windows in the world for anyone to know “exactly” what height an image should be. The worst mistake you can make is to assume everyone else’s browser window amd settings are the same as yours. Give it your best guess. That’s all anyone can do.
Well would a “safe” height be 768 for desktops and what would a safe height be for mobile?
Full browser height can be set with height: 100vh;
But the size of that and the overall aspect ratio of the screen can vary infinitely, from a large hi-res wide-screen monitor to a small mobile in portrait orientation, as well as any possible size/aspect of someone’s browser window on screen.
Short story, you can’t do this with a fixed aspect. If you use that, the image has to crop.
For a fixed aspect one dimension must be tied to the other. Typically width will be dynamic/responsive and height will adjust accordingly with that.
It’s too varied to pin down.
In any responsive layout, don’t think in fixed dimensions. For images, think the width is whatever proportion of screen, like 100%, 90% or whatever (though you may have a max-width), and the height will be whatever maintains the correct aspect.
Do you have a layout sketch or something, to give a better idea what you are trying to do? That would help in giving more specific advice to the layout you want.
Yes. I will post the sketch later today when i get home. Thanks Sam
This is best done with a background image and you can use background-size:cover which will make the background image always fit the container. It does this in exactly the way we mentioned above in that the browsers automatically adjusts the height and width of the image while maintaining its aspect ratio until all of the element is covered by the image. This may result in parts of the image being out of view but you can centre the background image assuming the focal point is the centre.
You can do similar with a real image using object fit but it isn’t well supported yet. There are other ways of doing this with a foreground image but are a little more complex. If a background image will suffice then use a background image with background-size:cover applied.
You could use media queries to supply a range of images so that smaller devices get a smaller initial image and larger devices get the better quality larger image rather than just use one very large image for all.
Making a container cover the viewport is usually done by giving the element a 100vh height but you must remember that 100% is 100% and will fill from top to bottom so if the element you apply 1000vh to is not at the top of the viewport then the bottom of it will be below the viewport. Also an element set with 100vh cannot grow bigger than 100% so is not suitable for fluid text.
I generally use an element that is set to display:table and then use width:100% and height:100% (for better older browser support) and this will allow the element to grow with content as required because the display:table property treats height as a minimum. Also remember to remove the margins and padding from html and body otherwise these will affect the calculations and also set html and body elements to height:100% also as percentage heights need a parent with height defined (other than auto or content).
2 Likes
Thank you Paul. This may be the solution I was looking for.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.