How to Resize an Image in WordPress

Share

Preparing Images Before Uploading to WordPress

Before uploading an image to WordPress, it’s best to optimize it. Optimizing means reducing the resolution to 72ppi, resizing to be compatible with the maximum column widths on your website, and compressing the image by saving it as a JPG, PNG, or GIF. Your website will load faster with optimized images.

How do you figure out the maximum sizes? On most websites that I design, the maximum width of the site container is 1140 pixels. But there is always some left and right padding, so on a full width page, the maximum width is usually between 1080 and 1100 pixels. On pages with sidebars, the maximum width of the main content area is around 740 pixels. If you know how to use Firefox Firebug or Chrome Developer tools, you can figure out these widths. Otherwise, ask your web designer to give you the measurements.

I use Photoshop for optimizing. If you don’t have Photoshop, there are many free options that you can try, such as:

Preview: one of several free applications pre-installed on new Macs. Preview is often used as the default PDF viewer. But, it can also be used to resize your images. Go to the TOOLS menu > Adjust Size … You’ll still need to compress the image, though, with another tool.
Smushit: After resizing an image, compress it with this free, online application.
Image Optimizer: This free, online application can resize and compress files.
Photoresize Pro: A photographer client has used this for years. It’s not free, but very inexpensive.

You may notice that JPG files are smaller than PNGs. Both file formats are great for continuous tone images, but use PNGs only when you need transparency, like masking out the background. In Photoshop, the SAVE FOR WEB (File > Save For Web) option provides better compression than the standard SAVE AS… My favorite presets are:

  • JPEG High – High Quality 60, Optimized
    OR
  • PNG-24 – PNG-24, Transparency

Select Size When Inserting into Post or Page

Even after uploading an image to WordPress, there are several ways you can resize it. To insert an image into a post or page, click on the ADD MEDIA button. You’ll have the option of selecting a file from your media library or uploading a new file. In either case, look at the bottom of the right panel to see the attachment display settings. The default sizes are in a drop-down menu. Depending on your theme, “full size” could mean the width of the entire site container, the width of the main content area, or the size of the image itself. Scroll to the size you want and then click on the INSERT INTO POST button directly underneath the drop-down menu.

insert-media-wp

 

Change Size After Inserting into Post or Page

Click on the image and you’ll see 2 small buttons in the top left corner. The “X” will delete the image. The pencil icon will open a new window showing image details. On the left side of the window, select another of the default sizes. Click UPDATE.

Rather than selecting another default size, look on the right side of the window where you can edit the original. On the right side of another new window is where you can scale the image. There are other options as well, including flipping, rotating, and cropping.

insert-media-wp-scale

What tools do you use for image optimizing?

Do you have any favorite tools for image optimizing? What method do you prefer for resizing images in WordPress? Please share your thoughts and questions!

 

Related Posts

How to Resize an Image in Photoshop

How to Scan within Photoshop CS6, CS5, CS4

Effective Resolution: Key Factor of Image Scaling

Image File Formats: print vs. web

Comments

  1. Stacie says

    Pixlr is a great free online image editor. There is also an extension to add it to Chrome and one for Firefox. Check it out – https://pixlr.com/editor/.

    Thanks for the tips. I need to go back to my site and optimize the images. It’s too easy to just upload them and worry about it later. It’s better to get in the habit of doing it right the first time.

Leave a Reply

Your email address will not be published. Required fields are marked *

Please type the characters of this captcha image in the input box

Please type the characters of this captcha image in the input box.
Refresh your screen to get a new set of characters.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>