Wrong size image being loaded

  • Resolved markman641

    (@markman641)


    3 years, 8 months ago

    Hello,

    I am working on optimizing a new theme and using JEtpack to automatically resize my photos, and I have the one issue I’m noticing that on my homepage, if you look at the “photo gallery” section, the photos in there are not being loaded at the correct resolution and are loading the full size, even though the css says width: 1170px.

    I did notice the parent div is 17550px which may be causing the issue, but I’m not sure why it would be looking at the parent div to get the size anyways.

    <div style="background-image: url(&quot;https://i2.wp.com/www.redroll.com/wp-content/uploads/2019/12/Zeds-Dead-Photo-26-scaled.jpg?fit=2560%2C1730&ssl=1&quot;); width: 1170px; position: relative; left: 0px; top: 0px; z-index: 998; opacity: 0; transition: opacity 500ms ease 0s;" class="slide slide-id-18093 tie-slide-1 tie-thumb slick-slide" data-slick-index="0" aria-hidden="true" tabindex="-1" role="option" data-aria-describedby="slick-slide20">
					<a href="https://www.redroll.com/2019/12/23/deadbeats-tour-zeds-dead-aragon-ballroom/" class="all-over-thumb-link" aria-label="Deadbeats Tour: Zeds Dead @ Aragon Ballroom" tabindex="-1"></a>
					<div class="thumb-overlay">
								<span class="tie-icon tie-media-icon"></span>
							<div class="container"><span class="post-cat-wrap"><a class="post-cat tie-cat-4" href="https://www.redroll.com/category/editorials/" tabindex="-1">Editorials</a></span><div class="thumb-content"><div class="thumb-meta"><span class="date meta-item tie-icon">December 23, 2019</span></div>
				<h2 class="thumb-title"><a href="https://www.redroll.com/2019/12/23/deadbeats-tour-zeds-dead-aragon-ballroom/" tabindex="-1">Deadbeats Tour: Zeds Dead @ Aragon Ballroom</a></h2>
			</div> <!-- .thumb-content /--></div><!-- .container -->
					</div><!-- .thumb-overlay /-->
				</div>
    • This topic was modified 3 years, 8 months ago by markman641.

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Support Bruce (a11n)

    (@bruceallen)

    Happiness Engineer

    3 years, 8 months ago

    Hi @markman641

    I’m not quite sure what you mean, can you give us a little more information? When I look at the Photo Gallery section of the homepage, the images appear to be loading correctly.

    Could you share a screenshot so we can see what you’re describing?

    You can create screenshots using something like Snipboard or Imgur and post the link here.

    Thread Starter markman641

    (@markman641)

    3 years, 8 months ago

    Look at the source of the images in the photo gallery. For example the first one is loading at 2560×1730, when the div is only 1170×500
    https://i2.wp.com/www.redroll.com/wp-content/uploads/2019/12/Zeds-Dead-Photo-26-scaled.jpg?fit=2560%2C1730&ssl=1

    Another image further down the gallery is being loaded at 4000×2707, when again, the div is only 1170×500
    https://i2.wp.com/www.redroll.com/wp-content/uploads/2017/09/Dancefestopia-Sunday-Photo-17.jpg?fit=4000%2C2670&ssl=1

    From there, they are being scaled down to fit properly in the div, but Jetpack is detecting the wrong size image to be loaded causing poor Page Speed scores

    • This reply was modified 3 years, 8 months ago by markman641.
    Plugin Contributor Stef (a11n)

    (@erania-pinnera)

    3 years, 8 months ago

    Hi @markman641,

    Have you tried resizing your images before uploading it? That would help avoid problems with the speed score.

    One handy plugin that helps with image resizing is Imsanity. It works well with Jetpack! Try that out, re-upload the images you flagged and let me know if that makes any difference.

    I’d also suggest enabling Lazy Images to see if that can help too 🙂

    Let me know how you get on. Thanks!

    Thread Starter markman641

    (@markman641)

    3 years, 8 months ago

    Jetpack is supposed the automatically detect what size image should be displayed and resize on the fly. Hence the ?fit= in the URLs. Jetpack tries to find the correct size image and resize it. According to other posts on this forum, it uses the containing div width to find the correct size of the photo, however as explained in my original post the width of the div is 1170px but jetpack thinks it should be loading the full size image

    That’s why I posted in the jetpack forum.

    • This reply was modified 3 years, 8 months ago by markman641.
    • This reply was modified 3 years, 8 months ago by markman641.
    Plugin Author Jeremy Herve

    (@jeherve)

    Jetpack Mechanic 🚀

    3 years, 8 months ago

    Jetpack is supposed the automatically detect what size image should be displayed and resize on the fly

    That’s correct. Jetpack tries to find the right image size parameters based on different factors. The site’s content width is one of those factors. The width and height parameters passed alongside the image are also important.

    Looking at your Photo galleries, the image URLs appear to be provided as a background property in CSS. Since the images are not inserted as img tags as happens elsewhere in your posts, this is most likely what complicates things when Jetpack tries to look for the right image size.

    Could you tell us more about how the slideshow is built? Is this done via a plugin, or via your theme?

    Thread Starter markman641

    (@markman641)

    3 years, 8 months ago

    The slideshow is built via the theme. I’ve tried diving into the theme code to see exactly how it was being built, but couldn’t exactly figure it out.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Wrong size image being loaded’ is closed to new replies.