Unnecessarily large header image

  • Resolved atabhatti

    (@atabhatti)


    7 years, 8 months ago

    My temp website: https://5c8.f79.myftpupload.com

    I am looking at YSlow to reduce page load times. I am using Primer and a stock header image (qtq50-2yFMfV.jpeg) that is 213K. However, only the bottom 5th of this image is shown as the site header (name?) on top of my page. Is there a way to reduce the size of the image that comes over the wire? I would be reducing ~20% of the total bits for my webpage through that alone.

    Thanks in advance

Viewing 2 replies - 1 through 2 (of 2 total)

  • Hi @atabhatti, sure you can just upload your own version of the image.

    1. Download the original image to your computer: https://5c8.f79.myftpupload.com/wp-content/uploads/2017/02/qtq50-2yFMfV.jpeg
    2. Resize it to be whatever you want
    3. Go to Customizer > Header Image and click the “Add new image” button
    4. Upload your version of the image and Save Changes

    Change header image in Customizer

    Hi @atabhatti,

    Adding onto @fjarrett comments:

    The first suggestion I would make would be to is to compress the image down so it has a smaller overall size. When you choose an image from the Stock Photos tab a copy of it get’s imported onto your site. This allows you to use one of the image compression plugins found here in the plugin repository to compress your images to a smaller size. One that I can recommend off the top of my head to achieve this task is WP Smush.

    This should bring the overall image size down resulting in a decreased load time.

    The second suggestion I can make is to use a CDN to serve your static assets (images included) from. This would drastically decrease page load times. There are many paid CDN services that work quite well.

    An alternative to a paid CDN option is to use the Photon module that comes bundled with Jetpack.

    Using a combination of the three suggestions above you should be able to bring down your page load times considerably.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Unnecessarily large header image’ is closed to new replies.