Working with images?

Hello,

I have never really learned how to handle images correctly so I am atm starting a hobby project which contains alot of images.

  1. How do I make images fit to the div or whatever, without stretching it etc? I obv want to keep the quality intact

  2. whats the recommended minium and maximum size of images?

  3. Does it matter what width and height the image has as standard?(I guess this might be the key to make images keep their quality)?

  4. do I have to think about aspect ratio(this probably is the answer to question nr 3)

Scaling doesn’t always have to be bad. In todays world where everyone expects everything to work on every kind of screen out there some times just scaling images is way easier than hacking around it. You could take a look at srcset if you want to be able to show different images depending on the screen space available
https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

No catch all answer, whatever you decide them to be. Usually you should keep in mind both the quality of the images (if they are central to the content provided) but also the load times and data amount for users. Normally don’t want to serve 20x 25MB images on a single load…

The only thing this will have an effect on is how you display the images / how the site is designed.

Likely. If you want a range of different images - or allow people to upload their own images you will probably need to crop thumbnails or find some other way of displaying them if you want it to look uniform on the page.

Sponsor our Newsletter | Privacy Policy | Terms of Service