CALL or TEXT 609-914-1318
Home / Blog / Websites and Web Design / Wide or Panoramic Images on Website

How to Fit Wide or Panoramic Images on a Website

How to Fit Wide or Panoramic Images on a Website

How do you display a very wide or panoramic image on a responsive website, when the width of the website varies between very narrow (mobile website) to very wide (ultra wide monitors)?

What Size and Dimensions Should My Panoramic Website Images Be?

Finding images that are large and wide enough to stretch across even the widest browsers can be a challenge. Depending on the display width, dimensions and resolutions, parts of the image will be cut off. As the display gets wider, more of the top and bottom of the image get cropped. As the display gets more narrow, more of the left and right of the image get cropped. So if it's an image of a close-up shot, important parts of the image may get cut out, making these wide, panoramic images better suited for photos that are taken from farther away and don't have any text near the edges. And of course, the image to be used must be in landscape orientation (wider rather than tall) instead of portrait orientation (taller rather than wide).

How Should My Panoramic Website Images Get Cropped?

Figuring out how to size and crop the image properly involves some math. There are websites that can help, but they can be confusing and complicated. Your best bet is to work with a web designer who knows how to properly optimize your images so you don't have to. If it's not done correctly, your website images could end up looking distorted, blurry or pixelated, as well as slow down the loading of your website (and website speed is a major Google search ranking factor).

See Panoramic Image Dimensions Change in Real‑Time

The best way to see how display size affects the wide image at the top of this page is to adjust your browser's width. This is also a great way to see how a responsive website's formatting changes based on screen size.

  1. On a PC-based desktop or laptop (these instructions may or may not work for a Mac), open your internet browser and hit the Alt key then the Space key simultaneously. This will bring up a menu on the top left side of the browser window. If the "Maximize" option is greyed out, then left‑click the "Restore" option. If the "Restore" option is greyed out, go to next step.
  2. After your browser window is out of Maximize mode, hover your mouse over the right edge of the browser window, directly to the right of the scroll bar.
  3. When you've reached the edge of the browser window and the white arrow mouse icon turns into a black line with arrows on both ends, hold down the left mouse button and drag your mouse to the left or right to make the browser window narrower or wider.

Panoramic and Wide Images on Website This image is 1900 pixels wide. If the display size is over 1900 pixels wide, the image gets enlarged. Too much enlarging can make an image blurry, but most monitor widths max out at around 2500 pixels. Extra widescreen monitors themselves are a panoramic shape, so the top and bottom of the image must be hidden. This is why wide images on a website shouldn't be taken up close, or else important parts of the image on top and bottom will get cropped out.
Panoramic and Wide Images on Website The same image as the previous one, but with nothing hidden. The image takes up the entire top of the website, so the user has to scroll to see the beginning of the body text, which is not ideal. In fact, the rest of the image continues to extend well below the bottom of the browser window, requiring the user to page down not once, but twice.
Panoramic and Wide Images on Website At a smaller screen width (like 1366px), you can see more of the top and bottom of the image than you can in the first example.
Panoramic and Wide Images on Website As the screen width gets more narrow (this one is 950px), more of the top and bottom of the image shows, but the left and right side of the image start getting cropped.
Panoramic and Wide Images on Website Once the display size is under 500 pixels wide, the 1900 x 1000 pixel image (with a file size of 247KB) gets swapped out for an identical 500 x 320 image (with a file size of 33KB) that loads more quickly.
Panoramic and Wide Images on Website At the smallest mobile display (300px), you see the full top and bottom of image, but the sides are cropped.
Panoramic and Wide Images on Website The image in the previous example, with the entire image fitting into the space, and no cropping. But the image looks too flat, because the image itself is very wide. It could be solved with a third swap if showing the cropped out elements on the left and right side were important.

Panoramic and Wide Images on Website
This example shows what you might see on your screen...
Panoramic and Wide Images on Website
And this example shows the actual size of the image. The areas of the image outside of the red box are hidden from view. The areas that are shown or hidden will change depending on browser width, display resolution, screen size and dimensions, device, etc.
© T. Brooks Web Design, LLC. All rights reserved. Protected by Copyscape
Do not copy content from this page without attribution to T. Brooks Web Design and link back to this page.

Do you have questions about my services?



  • 7 Days/Week

    3.5% fee added to credit card payments


    Serving all U.S. states, New Jersey (South Jersey, North Jersey, Central Jersey, Jersey Shore), Pennsylvania, Delaware, etc., including Atlantic County NJ, Bergen County NJ, Burlington County NJ, Camden County NJ, Cape May County NJ, Cumberland County NJ, Essex County NJ, Gloucester County NJ, Hudson County NJ, Hunterdon County NJ, Mercer County NJ, Middlesex County NJ, Monmouth County NJ, Morris County NJ, Ocean County NJ, Passaic County NJ, Salem County NJ, Somerset County NJ, Sussex County NJ, Union County NJ, Warren County NJ, Atco NJ 08004, Audubon NJ 08106, Bayonne NJ 07022, Bensalem PA 19020, Berlin NJ 08009, Bordentown NJ 08505, Brick NJ, Bristol PA 19007, Burlington NJ 08016, Cherry Hill NJ, Cinnaminson NJ 08077, Claymont DE 19703, Clifton NJ 07011, Collingswood NJ 08108, Columbus NJ 08022, Croydon PA 19021, Delanco NJ 08075, Delran NJ 08075, Deptford NJ 08096, Eastampton NJ 08060, East Windsor NJ 08520, Evesham NJ 08053, Ewing NJ 08618, Fairless Hills PA 19030, Florence NJ 08518, Franklinville NJ 08322, Glassboro NJ 08028, Haddonfield NJ 08033, Hainesport NJ 08036, Hamilton NJ 08610, Hoboken NJ 07030, Hockessin DE 19707, Jersey City NJ, Jobstown NJ 08041, Juliustown NJ 08042, Langhorne PA 19047, Laurel Springs NJ 08021, Levittown PA, Lumberton NJ 08048, Mansfield NJ 08022, Mantua NJ 08051, Maple Shade NJ 08052, Marlton NJ 08053, Medford NJ 08055, Mercerville NJ 08619, Merchantville NJ 08109, Moorestown NJ 08057, Mount Holly NJ 08060, Mount Laurel NJ 08054, Mullica Hill NJ 08062, New Castle DE 19720, Newfield NJ 08344, Oaklyn NJ 08107, Old Bridge NJ 08857, Parsippany-Troy Hills NJ 07054, Passaic NJ 07055, Paterson NJ, Pemberton NJ 08068, Pennsauken NJ 08110, Philadelphia PA, Pine Hill NJ 08021, Piscataway NJ 08854, Pitman NJ 08071, Princeton NJ, Riverside NJ 08075, Riverton NJ 08077, Robbinsville NJ 08691, Rockland DE 19732, Sewell NJ 08085, Shamong NJ 08088, Sicklerville NJ 08081, Somerdale NJ 08083, Southampton NJ 08088, Tabernacle NJ 08088, Toms River NJ, Trenton NJ, Turnersville NJ 08012, Vincentown NJ 08088, Vineland NJ, Voorhees NJ 08043, Washington Township NJ, Westampton NJ 08060, West Berlin NJ 08091, Williamstown NJ 08094, Wilmington DE, Woodbridge NJ 07095, Woodbury NJ 08096
    © T. Brooks Web Design, LLC