You can make an image larger by adding width and height to the image tag. You can also use CSS in a style sheet or inline. Keep the ratio of the original picture so it does not look squashed.
Add width and height to the image tag
The simplest way is to set the size right in the tag. Add them to the image statement like this.
<img src="path/to/my/image.jpg" width="400" height="400" alt="information about my image" />The numbers are pixels. The browser draws the picture at that size. Change the numbers to make it larger or smaller.
Use CSS in a style sheet
When many images share one size, write the rule once in your style sheet.
.your-image {
width: 100px;
height: 90px;
}Then add class="your-image" to each image tag. Change the rule later and every image follows. This is the better choice for a large site.
Use CSS inline
Inline CSS sits inside the image tag. It affects only that one picture.
<img src="path-to-your-image" style="width:100px;height:90px" alt="Your Alt text">Inline CSS is fine for a quick change. For a whole site, a style sheet is easier to manage.
Make the image fit a phone screen
For responsive design, set the width as a percent. This keeps the picture inside its box.
img {
max-width: 100%;
height: auto;
}The image grows up to its real size and shrinks to fit a phone screen. The height adjusts by itself, so the ratio stays right.
Which method should you pick
Use the tag attributes for a quick one-off change. They are easy to read and every browser understands them. Use a style sheet when many images share one size, because you only edit one place.
Use max-width: 100%; for most images on modern pages. It keeps pictures inside their box on every screen size.
What to do if it still looks wrong
First, check that you saved the file and refreshed the page. Your browser may show an older copy. Press Ctrl and F5 together to force a fresh load.
Next, look for another CSS rule that sets a different size. A rule that comes later in the style sheet wins. If the image is still too small, check the real size of the file. A tiny file cannot grow without losing quality.
In WordPress, you can also click the picture in the editor and drag a corner handle. Pick a size in the block settings if you prefer.
Common mistakes to avoid
Keep the width and height in the same ratio as the original picture. If you change only one number, the image looks stretched or squashed. Setting height: auto; lets the browser do the math for you.
Do not stretch a small image far beyond its real size. It will look blurry. If you need a bigger picture, start with a bigger file.
Always keep the alt text. It describes the picture for screen readers and search engines.
Width and height change only how big the image looks. They do not change the file size. A photo that is much bigger than it needs to be still loads slowly, so resize it in a photo editor first. A smaller file helps your pages load faster on phones.
If you need help with your pages, our Omaha web design team answers at 402-813-4034. You can also use our contact page.
AboutRod and Tami Atwood
Rod and Tami Atwood and other Websnoogie contributors write the Websnoogie blog. Rod has built websites since 2004 and founded Websnoogie, LLC in Omaha in 2012. Tami is co-owner, content editor and billing expert. Call us at 402-813-4034 or write to staff@websnoogie.com.
