Resizing images for SEO and speed bofore uploading to WordPress

Hello!

I found a post from this forum that explains very simply about how to resize images within WordPress’ own resizing method or using the “Smush it” plugin.

https://premium.wpmudev.org/forums/topic/simple-tutorials-for-resizing-images-and-adding-text-content

I just tested the Smus it yesterday and it works great!

My question is however that should I resize the pictures BEFORE uploading to WordPress or is it just as good to resize them with WordPress’ own functionality or Smush it?

I don’t mean the caching of images but the actual size in pixels.

I ask this because I have read earlier from a quite recognized blog (which I don’t remember now) that it could slow down the site if you use plugins to resize the images.

Example:

A picture is at the WordPress library for example 600×600 pixels and then there would be a plugin that would resize the image to for example 300×300 pixels but it would actually have to resize it every time a quest enters the website instead of the picture “truely being” size of 300x300pixels.

And this could slow down the site?

Any opinions on this one?

Thank you!

  • James Morris
    • WordPress Enthusiast

    Hello Tuomo,

    I hope you are well today.

    The article you are referring to is talking about resizing using CSS or HTML. To illustrate, let me give you a couple examples….

    Say you have a graphic titled avatar.jpg. This image is 800x800px in dimension.

    If you have a profile plugin that resizes your avatar images to 200x200px using css, like the following, this is where a performance loss comes in at:

    .avatar {
    width:200px;
    height:200px;
    }

    Alternately, sometimes people (or plugins) hard code image sizes in the HTML. This is usually seen in the following form:

    <img src="https://domain.tld/wp-content/uploads/avatar.jpg width=”200″ height=”200″ border=”0″ alt=”Avatar Image” />`

    Again, both scenarios force a hard set dimension that is not the natural dimension of the image. Thus, a performance hit. In those situations, you would want to upload a smaller image.

    That being said, Smush Pro does offer the ability to resize very large images down to a more reasonable size. 1024×1024 is a common setting. Alternately, you can also add different image size definitions into your theme’s functions.php which will instruct WordPress to create these different sizes. Smush Pro will also optimize them. You can learn more about defining your own custom image sizes at the following link: https://codex.wordpress.org/Post_Thumbnails

    I hope this clarifies a bit.

    Best regards,

    James Morris

  • Tuomo
    • Design Lord, Child of Thor

    Hello James!

    I think I know what you mean.

    If the plugin codes the image in HTML or CSS to different size

    then the best performance would be gained if the picture would

    already be of the same size while uploading it to WordPress

    as the plugin sets it to?

    I actually tested smus with different size pictures.

    The smus congifuration screen says:

    The following image sizes will be optimised by WP Smush:

    thumbnail (150×150)

    medium (300×300)

    large (1024×1024)

    gallery-thumb (600×600)

    sow-carousel-default (272×182)

    I am wondering what this means?

    I tested placing a 300×200 image and it is smushed well!

    It actually smushed them automatically.

    I didn’t press the smus it button.

    But when I opened the page the picture was smushed to 12kt

    from 150kt which is great!

    But I would like to make sure there will be no issues with performance etc.

    by using different size pictures than the smush actually says it optimizes.

    Any opinions?

    Thanks!

  • James Morris
    • WordPress Enthusiast

    Hello Tuomo,

    I apologize for the delay in replying to you.

    The sizes that are defined were either defined by your theme, the WordPress core, or another plugin. You can also define your own images sizes, which Smush will recognize and optimize as well. To add your own custom image sizes, you will need to add some add_image_size() definitions to your theme’s functions.php file. You can learn more about that in the following tech document. https://developer.wordpress.org/reference/functions/add_image_size/

    I hope this clarifies a bit. :slight_smile:

    Best regards,

    James Morris

  • Tuomo
    • Design Lord, Child of Thor

    Hello!

    I resized images on my computer to 320×240 pixels

    Then I Uploaded them to my WordPress

    and set the plugin to show them at 320×240 pixels

    Then I went to see my site and downloaded the picture.

    It was 12kt instead of 90kt which was the original size.

    So apparently Smush is working though I did not change

    anything to the functions-php file!

    Could I use this image size safely or could there be

    an issue later?

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.