Twenty Fourteen Serving Scaled Fetured Images In Homepage Grid (4 posts)

  1. Haz
    Posted 1 year ago #

    I have featured images cut in Photoshop to 1038x576px, per best practices. When I import an image, WP creates an jpeg of 672x372 to go into the featured image section on the homepage grid. WP correctly adds width="672" height="372" attributes, so far so good.

    But then WP scales the image to 341x189, and GTMetrix flags the site for serving scaled images.

    I am willing to cut separate images in Photoshop so they wont be scaled but I cannot figure out how to stop Twenty Fourteen from scaling the images. I used Measurit in Firefox and appears the images should be 420 x 233 and I can add code in my child functions.php to get the featured images to call for that size:

    function my_theme_thumb() {
    	set_post_thumbnail_size( 420, 233, true );}
    add_action( 'after_setup_theme', 'my_theme_thumb', 11 );

    But even with that, Twenty Fourteen still serves scaled images of 341x189. How can I tweak this so the images wont be scaled?

    Any thoughts would be appreciated.



  2. talkstory
    Posted 1 year ago #

    The images are scaled because Twenty Fourteen is a responsive theme. Depending on the browser width, images of up to 672px wide are required. (Try resizing your browser to about tablet width and notice how the images change.)

    This is the trade-off of a responsive theme — sometimes the device (desktop, tablet or phone) may have to download larger images. The goal is to serve up images that look good on a variety of devices. It's a balance of size and quality. As long as you are optimizing your JPGs, having a few images scaled shouldn't cause a significant problem with page load time, and will benefit users on retina devices and tablets.

  3. Haz
    Posted 1 year ago #

    Thanks for getting back to me so quickly. That's what I figured.

    And I took the step of switching to the featured images slider with images of 1038x576 and I like it better.

    And to top it off, WP sets the proper height and width attributes and the images are NOT scaled, so it works better as well.

    Thanks again.


  4. talkstory
    Posted 1 year ago #

    Awesome! Glad you found a solution.

Topic Closed

This topic has been closed to new replies.

About this Topic