How to Resize Images in HTML
To resize an image in HTML, use the width and height attributes of the <img> tag. You can also use various CSS properties to resize images.
Here's an image at its original size:
This should be at its original size, unless your device is narrow and has resized it.
Below is the same image after it's been resized using HTML (using the width and height attributes of the <img> tag):
You can play with the dimensions and click Run to see how it affects the end result.
Resizing with CSS
It's usually better to use CSS to resize images in HTML. You can do this with the height and width properties.
Resizing Considerations
Resizing images with HTML/CSS should only be done if necessary. It is usually better to use an image that is the correct size in the first place than to resize it with HTML. This is because resizing it with HTML doesn't reduce the file size — the full file still has to be downloaded before it can be resized.
Therefore, if possible, resize the image to the correct dimensions first using in an image editor (such as GIMP) before uploading it to your website/blog.
Resize an Image Dynamically
You can use the CSS max-width property to resize the image dynamically.
The following example displays quite a large image in a small viewport. To see it in different sized viewports click Editor and Preview. You can also resize your window to see the image shrink and expand.
By ommitting any width/height declarations and only using max-width: 100%;, the image will be displayed at 100% of the size of its container, but no larger. If the image is larger than its container, the image will shrink to fit. However, if the image is smaller than its container, it will be displayed at its true size (i.e. it won't increase in size to fit the container).
This technique can be handy when designing responsively for the image/web page to be displayed across multiple sized devices.
Putting Styles into an External Style Sheet
The above example uses inline styles but could just as easily have used an external style sheet or an embedded style sheet (styles embedded in the document head).
If you place the background image code into an external style sheet, here's a snippet of what that might look like:
Here's a snippet of what the HTML code could look like:
Adding the above external style sheet sets all <img> elements to a maximum width of 100%.
This example also sets a class for thumbnails (called thumbnail) which sets their width and height. Now, any <img> element that uses that class will automatically be displayed at that size.