How to get full resolution photo in small area

Hi,

I’m trying to edit our business website and I need some help trying to figure out how to get the website to automatically resize an image but keep the quality. As of right now when I upload photos I have to go in and edit the size so that it fits appropriately but then the resolution is not great and the resulting image on the page is low quality and slightly pixelated. This seems to be the code associated with the grid photos.

.grid-post a {
width: 100%;
height: 100%;
display: flex;
align-items: flex-end;
justify-content: center;
text-align: center;
}

I have to resize the images on the backend down to 815 KB, 500 by 333 pixels in order to properly occupy the space. This is the website and the grid I’m referring to is on the main page.

I’m sorry if this is a simple question, or maybe even not a website issue. I’m literally just learning this in order to manage our website.

Thank you!

One thing that jumps out at me is that while your grid images have been sized to 500x333, the actual space you’re giving them on the page is 480x320, via the css in styling.css line 447:

.grid-post {
height: 320px;
}

So you’ve meticulously adjusted the images to one size, then told the browser to resize again, smaller. I’m not sure if there’s some reasoning you’re doing that or if it’s a mistake, but the net is going to be (because of the multiple resizing and lesser quality resizing you’ll get from a browser than say Photoshop) more fuzzy than it could be.

… what size were the originals?

1 Like

If possible, resize just once from the original images from the camera.

Because some users of smartphones and tablets can easily zoom into your photos using pinch gestures, consider uploading images with, say, twice the dimensions of the grid elements. However be aware that this will increase page download time.

From my experience, browsers are excellent at resizing images when sizes are reduced.

If you do not have access to the original images, you can do three things to give the images more zing:

  • Try adding a black outline to the images by adding outline: 4px solid black to the .grid-post a CSS rule
  • In your image editing software, try using ‘auto levels’ (if available in your software).
  • Also in your image editing software, try using ‘sharpen’.
1 Like

As an aside I notice the images are being repeated horizontally at screen widths of 768px and smaller and you need to add background-size:cover to stop them doing that.

e.g.

.grid-post a {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    text-align: center;
    background-size: cover;
}

As others have said create your images from the original high quality file and not from an already cropped jpg.

You don’t need to crop them to the exact size of the element because in a responsive site there is no exact size. Make the images larger in size than needed so that they scale down better and use good optimising techniques from your paint package to ensure the best trade off between image file size and image quality.

By the same token, trying to cram a 4k image (this is why i asked what size your originals were) into a 500px box will still cause loss of resolution - there’s literally not enough pixels to paint the picture, so it has to compress the pixel data. It will be the best possible outcome, but it wont be your stunning full definition shot. That’s just… how math works? 4000 > 500.

1 Like

The originals are large, around 5k by 3k. I have access to about 95% of the originals since I personally took them so I’ll try to resize them on my computer to 480x320 and then upload them to see if that helps.

Those are some pretty hefty images, so yeah, i would shrink them down before load too.

Again though, you will lose some resolution. It’s just the nature of making something smaller.

For example:
My original image is 3000x3000. I want to display it at 1000x1000 (so a 3:1 compression).
When you get right down close to it, that means for every 3x3 grid of pixels with the given pixel colors in the original image:

0 1 2
0 Gray BlueGreen Blue
1 RedGreen Green BlueGreen
2 Red RedBlue Brown

I have… 1 pixel to represent that entire block. What color do I choose for that 1 pixel? I’m going to lose the definition of all the rest of the pixels in that. And the same for every block of 3x3. The picture will, inherently, lose resolution. shrug It’s the price to be paid, unfortunately.

You will also need to judge the quality setting when saving your resized photos in JPG format (assuming the software you are using to resize has a ‘quality’ or ‘compression’ setting).

Adding a black outline (using CSS) and/or using ‘auto levels’ (in your photo resizing software) may give your photos a little more impact.

To keep image quality while resizing, add object-fit: cover; to your CSS, use max-width: 100%; height: auto;, and optimize images before upload. Also, consider using srcset for responsive images.