Hello everyone,
Every time I create an HTML design of a website I find myself struggling most of the time with images. Be it a full cover image, positioning an image which is 200px wide in a div which is max 100 px wide and then keeping the aspect ratio and these kinds of things.
I want to get a good understanding in this field and get good at it. However, I am looking for good resources on this subject. When you google you can find some things. But I would like to get some feedback from the pros on this forum.
So do you have any suggestions?
Thanks very much
Funny I was just struggling with this yesterday. I have an image in a container in a div and it is the only thing that is not responsive for some reason. I would be interested to see the responses
If your using Bootstrap - use the class "img-responsive"
Which is basically just width: 100%; height: auto; - that's really all there is to fitting an image into a specific size div.
If your cutting up a PSD, this is all well and good - the html / css should work out to be close to what the PSD says.
If you need images for mobile versions of a site; your designer should prepare those for you or you'll need to scale them yourself. In that case, you can scale the PSD to the width you need, then recut a new set of images and present those at the appropriate media query.
If your talking about dealing with user uploaded content - things get a bit more complex - you'll need to deal with users that upload big files ( > say 500kb) - most users don't know to crop and resize images before uploading to a site (nor should they really).
You'll need to deal with any dimensions thinkable from a user also - you may specify an image space that's say 5:3 ratio - which the user probably has no idea what that is.
This is where a 3rd party service I use - Cloudinary - comes in great help. In this case, it doesn't matter what the user uploads - you format the image when you request it as you need it. A perfect example of this is asking a user to upload a headshot - again, the user doesn't know to crop the image to say 200px by 200px - they'll upload say chest up. So Cloudinary can take that image, scale it to 200x200 with gravity (focus) on their face. And instead of having a file that might be 3mb, now it's down to 150kb and just the part of the image you need. Works great.
There are free alternatives to this of course - google server side image transformation as well as modules like PHP-GD library which can work on images via PHP.