Welcome to Code Forum!

Join a community that supports you and your coding journey from day one. We strive to be a friendly, supportive community that empowers everyone to be better developers. By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.

    GIF shows where to locate </> in the thread and or post editor toolbar.
    To learn more about how to use our BBCode feature, review our "How to post your code into threads" here.

    Thank you, Code Forum.

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

devjoe

devjoe

New Coder
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!
 

Attachments

  • Screenshot 2024-09-13 091032.png
    Screenshot 2024-09-13 091032.png
    411.1 KB · Views: 7
  • Screenshot 2024-09-12 132209.png
    Screenshot 2024-09-12 132209.png
    124 KB · Views: 8
Sort by date Sort by votes
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.
 
Upvote 0 Downvote
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.
 
Upvote 0 Downvote
Play Snayk 3+, higher dimensional snake game?
devjoe said:
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!
Click to expand...

I agree that it looks like a connection issue.

For image prep, we use applications on Mac called ImageOptim or ImageOpt to compress images. Our workflow might be abnormal but we work off designs from designers. Photos are exported 1.5 - 2 times the size in the layout for web so as to keep them looking sharp while allowing for responsive layout size changes. Usually jpg for photos and svg for graphics. SVG do not have resolution issues (usually) and therefore are exported at actual size based on the design. SVG can scale without loss of quality. We also use image srcset where needed to deliver appropriately sized images based on viewport (screen) sizes.

Using responsive images in HTML - HTML | MDN

In this article, we'll learn about the concept of responsive images — images that work well on devices with widely differing screen sizes, resolutions, and other such features — and look at what tools HTML provides to help implement them. This helps to improve performance across different devices.
developer.mozilla.org developer.mozilla.org
 
Last edited:
Upvote 0 Downvote

New Threads

Latest posts

Share this page

Buy us a coffee!

Buy me a coffee.
DataCamp Advertisement
Code Academy Advertisement

About Us

Code Forum is a community platform where coding enthusiasts can connect with other developers, engage in discussions, ask for help, and share their knowledge with a supportive community. It's a perfect place to improve your coding skills and to find a community of like-minded individuals who share your passion for coding.

Site links

Stay Connected

Back
Top Bottom