



This can be done using CSS or the width and height attributes of an image tag.

It is common in web development to have the browser render images in dimensions much smaller than those of the original file. If possible, you should pre-resize the image on the server so the user's browser downloads it in an appropriate size. Larger images mean larger files, resulting in more data traffic. Vector graphics (such as clipart and charts in Word or Powerpoint) are not comprised of pixels and therefore can be stretched to any size without loss of quality.Back to prompts Resize images appropriately Status Draft Category Images Difficulty Easyĭon't serve images that are bigger than they need to be.However, we strongly recommended resizing images in photo editors, such as Photoshop or GIMP, to achieve maximum photo quality. A very small amount of scaling can be OK, specifically when scaling down.For example, if you upload a very large image to a website and scale it down to a smaller size, the website still must load the full size version of that image and could cause the web page to load more slowly. Scaling images smaller than the original dimensions does not affect quality as much, but can have other side effects. The most common side effect of scaling an image larger than its original dimensions is that the image may appear to be very fuzzy or pixelated. When scaling, the resolution is not adjusted to best suit the new size, rather the pixels are stretched and can appear pixelated. When working with raster images (pixel-based) it is important to understand that scaling an image in programs, such as Word, Powerpoint, InDesign, or Dreamweaver, does not actually resize the image, but rather stretches images larger or scales them smaller.
