1

I am building a very simple four page website; actually, I hired a major hosting company to do it but they're core competency stops after loading text and images into pre-existing templates.

The top of my site has a hero image in landscape orientation. That displays just fine on a desktop, laptop, or tablet, but poorly on a phone. I need a separate image that can be called by phones that will display without terrible cropping that occurs now. Dimensions will cover the widest cross-section of devices?

I'm NOT a web designer, html programmer, ..... just a client who has to fix a provider's work.

Many thanks in advance.

TL

2

3 Answers 3

1

There is no "one best" set of dimensions that will cover the most mobile devices across all website templates. The height of the hero image on mobile devices will determine how the image is cropped, and this height depends on your specific website's template/code (HTML and CSS).

However, I believe I have a good way to go about finding a good image size. On your mobile device, take a screenshot of the website. Then from the screenshot of the website, measure the height and width of the hero image in pixels. This should give you a good aspect ratio for your image to display well on mobile devices, because most mobile devices should display the site similarly enough to each other.

For mobile hero images, the general consensus seems to be that 1200 pixels is a good width. So take your original uncropped hero image, resize it so that it's 1200 pixels wide, then vertically crop it to make it match the aspect ratio you determined from the screenshot. An image cropped in such a way should fit perfectly within the space on your website.

If the image comes out blurry when viewed on the website, that means 1200 pixels is too low-resolution. Try doing a larger resize; resize your original image so that it's 1600 or 2000 pixels wide, again cropping to the proper aspect ratio.

1

You can save images in a few different general sizes, (large, medium, small) then use CSS media queries to change which image is served based on viewport size.

You can use this code styling to get your images to fit proportionately in your div.

<!-- css -->
.box {
 width:20%;
 height:300px;
}

img {
 width:100%;
 height:auto;
}

<!-- html -->
<div class="box">
 <img src="https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png" alt = "My Picture" />
</div>

https://jsfiddle.net/jasonbruce/jt1hd0qk/

0

Assuming that the image if resized instead of being cropped, would look fine on the mobile, then it's a matter of changing the css to resize it. I don't see any reason why an image would be cropped. For instance, the site would look very strange if that happened as you were resizing it on the desktop.

For a 4-page website, I don't think that you even need other images. IN an extreme case, perhaps one for landscape and another for portrait format/orientation. But that is it. More fancy stuff is required for complex websites.

The resizing is done via media queries like this

@media (max-width: 1250px) {
  /* … */
}

this will be applied when the browser's viewport is equal to or narrower than 1250px.

From Using media queries

You can take care of min-width, max-width, orientation etc.

I won't post a link to my site but just look at almost any site, right-click on the browser and select inspect. Then look at their css for @media.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.