Image Cropping and Loading Issues on Website (HTML/CSS Issue)

[devjoe]

Hi everyone,

I’m working on a client’s site (Spiritual Gleam), and I’ve run into an issue with images. Some images are getting cropped or only partially loading, especially on mobile.

Here’s what I’m using in the HTML:
<img src="path-to-image.jpg" alt="Symbolic Image" class="spiritual-img">


And the CSS:


.spiritual-img {
width: 100%;
height: auto;
object-fit: cover;
}




I thought object-fit: cover would solve the cropping, but it’s still happening. Plus, some images don’t fully load at times.

Any ideas on what might be causing this? I’m stuck. Appreciate any help!

Thanks!

 

[Johna]

Could it be connection issues? Does this occur when loading the site hosted on the internet, or is this on a local server? Or both?

 

[EkBass]

Sounds as loading issue for me too. Share more information to get proper answers. Are you developing this locally or in some server somewhere at the internet? What backend you have, more code from frontend too please. Size and type of original images etc.

 

[Edrol97]

Hi devjoe. Also something to consider: as an artist myself with a copious amount of images I made sure that all images I had were the least amount of pixels. Things to consider: RGB color suppression uses less than CMYK- if you use Photoshop or a similar photo editor, you can toggle between RGB and CMYK. For pixels I tend to stick for digital images to around 300px maximum height/width- that's about 8cm in height. If you set your images to 300ppi- print quality, it should be good enough. In case your client wants to expand the file at a later date for print make it a PNG or another lossless format. It's good to have both a jpg and a png version of images, as jpg although lossy are generally much smaller files. When uploading all of your files to your website, setting your image to 100% width can be tricky, as the images you have could be very different sizes. I found in dev mode with some of my images that they were 1200px (way too big). Sometimes when you export and reopen a file in Photoshop, it changes a file size completely. I recommend looking for a lossless image resizer online- just Google it and you'll find one easy. Hope these tips help and hope to see your client's website when finished.

 

[simong1993]

Hey there, When you make your browser bigger and smaller does the image change?