Understanding how image sizes work is an important part of any application. Making sure your images are the correct dimensions will help you to avoid pixelated images, as well as stretched or distorted images.


  1. When width and height are provided, Omnibasis scales image by width or height till both borders are fitted, and keeps aspect ratio same as the original image.
  2. When only width is provided, Omnibasis scales image by provided width value, auto adjusts new height according to aspect ratio.
  3. When only height is provided, Omnibasis scales image by provided height value, auto adjusts new width according to aspect ratio.


When you’re designing for the web, it’s important to think about image sizes as it can affect site speed. If an original image is larger than the space it fills on a website, it will shrink to fit. However, your browser will still need to load the larger image. 


If you have lots of large photos on a website, it can take longer for pages to load, which users might not be patient enough to hang around for. By resizing images so they fit the exact space they are supposed to, you can improve the site’s performance and user experience.


What is aspect ratio?

 

An aspect ratio refers to the ratio of an image’s width compared to its height. It essentially tells you what shape the photo is going to be. 


For example, an aspect ratio of 1:1 means the width and height are the same, creating a square image. A ratio of 3:2 means the width is greater than the height, creating a rectangular image. 


Common aspect ratio sizes.

 

1:1 aspect ratio.


Using a 1:1 aspect ratio means you’re shooting a square image, as both sides are the same width and height. It’s commonly used for things like social media profile photos.


3:2 aspect ratio.

 

Another common aspect ratio is 3:2, which is used across much of film and digital photography. This is the aspect ratio of original 35 mm film, which is why it’s so commonly used.


4:3 aspect ratio.


4:3 is the aspect ratio that some computer monitors, TVs and digital cameras use. This is the perfect aspect ratio to shoot photos or film in if you’re creating photos that will fill a screen. 


16:9 aspect ratio.

 

A 16:9 ratio is more common on most computer monitors and modern wide-screen TVs. This is a slightly longer width than a 4:3 aspect ratio.


Standard Images for The Web

Whether it’s achieving the perfect display on an HD monitor or creating a 4K standard image, it’s worth knowing the sizes that are common across the web. Using the wrong image size can mean you don’t achieve the right level of quality for the person who’s viewing it. 

 


For example, if a user is looking at your photos on a 4K monitor, you want to make sure they reflect the quality they’d expect to see.


SD quality.

SD stands for "standard definition" and refers to video resolutions that are 480p or lower. The most common SD resolution is 720 x 480 pixels, which is 720 pixels wide and 480 pixels tall.  


HD quality.

An image size of 1280 x 720 pixels is large enough to be HD standard and is commonly used in photography and film. This size uses a 16:9 aspect ratio, which is also common in filmmaking.


4K quality.

4K is four times the number of pixels of 1080 x 1080 images, which were once the benchmark of high-quality images and video. To achieve a 4K quality image, it must be 3840 x 2160 pixels.


8K quality


8K takes this even further, using even more pixels and, in turn, producing impeccable quality video and photography. For an 8K image, use pixel dimensions of 7680 x 4320.


Resize Mode

When resizing images, different resize modes determine how the image is adjusted to fit a target size. Here’s what each mode does:

1. Crop

  • The image is resized and cropped to fit the target dimensions exactly.
  • Maintains the aspect ratio but trims parts of the image if necessary.
  • Best for maintaining a clean and uniform layout (e.g., profile pictures, thumbnails).

2. Pad

  • The image is resized to fit within the target dimensions while maintaining its aspect ratio.
  • Empty space (often transparent or filled with a solid color) is added to fill the remaining area.
  • Useful for keeping the entire image visible without distortion.

3. Box Pad

  • Similar to Pad, but instead of a solid color fill, it adds padding that blends with the image (like a blurred background).
  • Commonly used in UI/UX applications to make images fit naturally.

4. Max

  • The image is resized to fit within the target dimensions without exceeding them.
  • The aspect ratio is preserved, and no cropping occurs.
  • Ensures that the image remains fully visible and fits within a constrained space.

5. Min

  • The image is resized so that at least one dimension matches the target size.
  • The other dimension may exceed the target size but remains proportional.
  • Best when you need an image to be at least a certain size while keeping proportions.

6. Stretch

  • The image is resized to exactly match the target dimensions.
  • This does not maintain the aspect ratio, leading to distortion.
  • Useful in cases where exact dimensions matter more than visual fidelity.

7. Manual

  • The user manually adjusts the resizing, cropping, or padding settings.
  • Provides full control over how the image is resized.

Each mode is useful depending on the scenario—Crop is great for thumbnails, Pad is useful for consistent layouts, and Stretch works when dimensions must be fixed, even at the cost of distortion.