Image Sizes With width/height, and Where Images Are Allowed to Come From
Image Sizes With width/height, and Where Images Are Allowed to Come From
~8 Min. Lesezeit Zuletzt aktualisiert am August 8, 2026
This chapter covers two very practical questions: how do I control how large an image is displayed? And where am I even allowed to get images from?
The width and height attributes
With width and height you can set the display size of an image in pixels:
<img src="images/ball.jpg" alt="A white football on a green pitch" width="400" height="300">Without width/height, the browser displays the image at its actual original size - for a photo from a modern camera or phone, that can be huge, often much bigger than the screen. With width and height you can make the image display smaller.
Keeping the aspect ratio
Important: if you only change one of the two attributes without respecting the original image's ratio of width to height, the image will be displayed distorted (squashed or stretched). An image that's originally 1200 by 800 pixels has a ratio of 3 to 2. If you set width="400", height should be roughly 267 (400 divided by 3, times 2), not just any arbitrary number.
Tipp: A simple trick: only set width and leave height out entirely. The browser then calculates the matching height automatically, without distorting the image. That's often the safest option for beginners.
<img src="images/ball.jpg" alt="A white football on a green pitch" width="400">Where are you actually allowed to get images from?
This is an important question many beginners overlook: not every image you find on the internet is automatically okay to use on your own website! Images, just like music or books, usually have copyright - someone made them, and that person decides who's allowed to use them and how.
- Your own photos: the safest choice - you took them yourself, so they belong to you.
- Websites with explicitly free images (like Unsplash or Pexels): these sites offer photos for free, usually with no special conditions.
- Images under a Creative Commons licence: some images can be used, but you might have to credit the photographer's name, for example - always check exactly what conditions apply.
Achtung: Images simply found via a Google image search are, in most cases, not automatically free to use just because they show up on the internet. For this tutorial and for practicing, that's not a problem, but as soon as a website really goes live and is seen by other people, you should pay close attention to where images come from.
Preparing Finn's photo gallery
For the next chapters, go ahead and put a few images into your images folder, for example training.jpg, match.jpg, and team.jpg - we'll use them later in the block about tables and in the photo gallery.