Proper Image Upload Dimensions – Best Practices?

  • In the olden days back when we last redesigned my websites, we did everything by hand. There was no “Responsive Design”. Therefore, images we uploaded were always custom sized. If we needed a banner image at the top of an article, we cut and shaped that image perfectly in Photoshop, and uploaded that image in those exact dimensions.

    If we wanted a thumbnail version of the same image on another page, we cut and shaped that image to much smaller dimensions.

    Now we are redoing the site in WordPress. And the theme we are using has some examples. It uses one image – massive (3200×3500 pixels and 2 MB file size) for a header image, even though that header image actually displays at 800×320. It uses the same image for a thumbnail version on another page, at about 150×74.

    BOTH of these images will display at varying sizes as the responsiveness kicks in – viewed on mobile, tablet, landscape, portrait, etc.

    So my question:

    Is that how we are supposed to do things now? Upload a massive image and just reference that same massive image for all instances of that image on the site? Even if one of them is a tiny thumbnail?

    Wont that cause the page load time to be ridiculous as it tries to load a 2MB image over and over? Or does WordPress dynamically resize dimensionally *AND* file size-wise?

    Or should we still upload a perfectly sized image in multiple sizes for its multiple different uses? Wont we risk problems with the auto-resizing if we do that? Seems like we would WANT to upload just one very large image and let wordpress do the rest?

    This is so confusing for me.

    Love,

    A 41 year old who for the first time feels old and out of touch.

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter WPBurger

    (@wpburger)

    Maybe I wrote too much. Here’s a shorter version:

    With wordpress and responsive themes, are you supposed to upload the largest possible image, and apply that image to various places (and sizes) throughout the site where that image will appear? Then let WP and the theme resize and resameple it to the various display sizes?

    Or are you supposed to create multiple instances of that image in different sizes, exactly at the size they are intended to display on the front end?

    Thanks

    This is a great question – and wish someone would’ve answered it – as I have the same exact question…

    Frustrating when I do a search on Google and this is in the top of the search engine – however there is no answer.

    Hopefully this will respark this question?

    Thanks!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Proper Image Upload Dimensions – Best Practices?’ is closed to new replies.