• Categories
    • Tutorials
    • Beginners Guide
    • WordPress News
    • WordPress Security
    • Best WordPress Plugins
    • WordPress Themes
    • Product Reviews
    • WP Tips & Tricks
  • Guides
    • Start a Blog
    • Make a Website
    • WordPress Hosting
  • WordPress Hosting
    • A2 Hosting
    • HostGator
    • Bluehost
    • Cloudways
  • Managed Hosting
    • WPEngine
    • Rocket.net
    • WPX
    • Kinsta
  • Coupons
    • WPEngine
    • Flywheel
    • Cloudways
    • A2 Hosting
    • WPX Hosting
Beginners Guide

Improve the Way You Work with Images in WordPress

Last Updated on: July 27, 2016 Joe Fylan 2 Comments

Improve the Way You Work with Images in WordPress

Recently we covered how to optimise your images for SEO purposes, in order to help increase the visibility of your site in search engines like Google. Today we are going to look at how to work with your images more effectively in WordPress. While it is easy enough to upload images into your site, ensuring they are optimized to reduce overheads and avoid negatively affecting page load times and site speed can take a bit more effort.

Thankfully WordPress now includes a few useful features for working with images more efficiently. There is also a great crop of plugins available to further increase its image handling capabilities. Read on to find out how to improve the way you work with images in WordPress.

Resizing Images

Due to the ease with which WordPress allows you to insert images into posts, it can be tempting to just drag and drop your images into the media library and then select a display size from the drop down menu. However, this doesn’t actually resize your images, as it simply sets the size at which they are displayed on the page.

Images Upload

To the end user the result might be the same, but by not resizing your images properly, you could be causing a few problems, such as:

  • Slowing down your site load times, due to using larger file sizes than necessary
  • Increasing your bandwidth usage, which is a finite resource

Thankfully WordPress now includes a few handy image editing options when inserting media into your posts.

Resizing an Image in WordPress

If you’ve uploaded an image that is too big for your post width, let’s say for example its 1024 pixels wide, and your post width is only 600 pixels, the best solution is to scale or resize it. While can simply edit the HTML that displays the image, but this doesn’t actually change the size of the file, it just shows it on a smaller scale.

To ensure we don’t unnecessarily decrease site speed and annoy our readers, it’s a good idea to permanently resize the image.

To do so, select or upload an image into the Media Library and click on the Edit link for that particular image.

Images Edit Library

From the Edit Image screen, click on the Scale Image metabox and simply enter a value to match the width of your posts.

Images Resize

WordPress helpfully constrains and maintains the proportions so you don’t end up with a distorted image. By entering either a new width or height, WordPress will keep the aspect ratio intact and auto fills the other box. Once you are done, click on the Scale button and then click on the Update button to commit the changes. Now you can safely insert your newly resized image into your post without slowing down your site.

If you would prefer not to shrink your image, but cut out a portion of it, then the next tip will help you do that.

Cropping Images in WordPress

If you don’t want to resize an image by shrinking it, you can still reduce its overall file size by cropping it. This will cut away part of the image, to leave just the detail you want to show. This can all be done in WordPress and doesn’t require a third party application.

To crop an image in WordPress, upload the image through the Insert Media screen. Once uploaded and selected, you can then alter an image by clicking on the Edit Image text link.

Images Edit

By clicking on the crop button from the icons above the image, you can then drag a selection box around the area of the image you want to keep. Anything outside the selection box will be deleted. If you hold down the shift key while dragging, the aspect ratio of the image will be preserved. This means you won’t end up with a stretched or squashed image.

Images Crop

Once you’ve highlighted the correct part of the image, you can apply the crop by clicking on the Save button and then the Update button.

Better WordPress Thumbnails

If you are using thumbnails – a smaller version of an image which links to the full sized version – in your posts, then you might have noticed that WordPress can sometimes render them in an unattractive manner. As WordPress simply uses the centre of an image for the thumbnail, it can cause problems when the centre of the image doesn’t contain anything interesting.

If you want to improve the way WordPress generates image thumbnails, the free Thumbnail Crop Position plugin will do the trick.

Images Thumbnail

When you upload an image, the plugin lets you easily set the focal point of the thumbnail image. It’s very easy to use and is a must for anyone who uses thumbnails in WordPress.

Lazy Load Images

Lazy loading is the method of only loading images or page elements that the user can see. By setting your images to lazy load, they are only displayed when the user scrolls down the page to where they are located.

The main benefit of this is that sites load quicker, as only the immediately visible page images are loaded. Your site also uses less server resources, such as bandwidth, as every page image isn’t loaded when a user visits a particular page.

Images Lazy Load

Personally I don’t like this feature is it creates a distracting and uncomfortable user experience. In practice, images often don’t load fast enough, causing page jump and blank image holders to be displayed.  However, it’s a popular way to speed up site load times so it definitely getting more popular.

If you want to implement lazy loading images on your site, these plugins can do the job for you:

  • Lazy Load (free)
  • BJ Lazy Load (free)
  • Lazyload WordPress (premium)

Plugins for Optimising Images for Faster Page Load

While the above tips can ensure your site loads faster when handling images, there are a few image optimization plugins for WordPress that can help you go even further to improve your use of images.  Here is a quick rundown of the free options available:

  • WP Smush.it: images you upload will be run through Smush.it to reduce their file size and therefore improve loading times.
  • PB Responsive Images: reformats all post images, and then displays the best choice of size to suit the browser window that is being used by the reader.
  • EWWW Image Optimizer: uses a lossless technique to optimize your existing images and those you upload to deliver them in the smallest possible file size.
  • Imsanity: automatically resizes large photos as they are uploaded. Ideal for preventing site contributors from uploading massive files that slow down the site and take up valuable bandwidth.

Conclusion

Working with images in WordPress has never been so easy. With a few powerful image editing features included by default, and numerous useful free plugins available, there is now no excuse for letting unoptimized images slowdown your site and frustrate your readers.

Image Credit: beach

+ Share
Disclosure

Joe Fylan

Joe Fylan loves using WordPress to create websites and enjoys writing about this topic for a number of blogs. If you'd like to work with Joe, visit his website today.

Related Posts

Back to all articles
  • Managed WordPress Hosting Options 2016

    8 Best Managed WordPress Hosting Providers for 2023 Compared

  • 10 Best WordPress Hosting Options for 2023 (Pros & Cons)

  • Best Cheap WordPress Hosting

    8 Best Cheap WordPress Hosting Providers in 2023 (From $1.99)

Coupons

View more deals
  • Recipe Card Blocks Coupon
    15% OFF

    Recipe Card Blocks Coupon

    Running a cooking or food website can be fun (and tasty) – but
    Get This Deal
  • WP 2FA Coupon
    20% OFF

    WP 2FA Coupon

    Security should be at the forefront of all site owner’s min
    Get This Deal
  • Themskingdom Coupon
    20% OFF

    ThemesKingdom Coupon

    First impressions count. As such, you’ll want a WordPress t
    Get This Deal
2 Comments Leave a Reply
  1. Tom Jamieson says

    December 2, 2013 at 5:18 pm

    Great article here on WP image sizing. It is a very relevant and timely topic. I personally like using Pixlr if I am online and PowerPoint if I am offline to crop and resize images. Thanks for letting me know about this method as well.

    Reply
  2. Emily says

    June 17, 2014 at 12:51 am

    Thanks for these tips. Do you happen to know where to reset the article image size? Every time I upload an image for a post that’s bigger than about 420 pixels, wordpress auto shrinks the image so that it’s about 10 pixels smaller than the post column on either side.

    Reply

Leave a Reply Cancel reply

Full Disclosure This post may contain affiliate links, meaning that if you click on one of the links and purchase an item, we may receive a commission (at no additional cost to you). All opinions are our own and we do not accept payments for positive reviews.

THE BEST OF WPKUBE

Some of the best content we have published so far.

BEGINNER GUIDES & REVIEWS

18 Best Cheap WordPress Hosting Providers in 2023 (From $1.99)
210 Best WordPress Hosting Options for 2023 (Pros & Cons)
38 Best Managed WordPress Hosting Providers for 2023 Compared
45 Best WooCommerce Hosting Providers Compared in 2023 (All Budgets)
5Top 9 Landing Page Plugins for WordPress (2023)
69 Best List Building Plugins for WordPress In 2023
7How to Fix the 500 Internal Server Error on Your WordPress Website
8Thrive Themes Review: A Look At The Full Membership
9Beaver Builder Review: Is it The Best Page Builder Plugin for WordPress (2023)?
10OptimizePress Review: Create Landing Pages with Ease
11How to Make a Website: Complete Beginner’s Guide
12Top 22 Best Free Stock Photo Resources For Your Site
1317 of the Best Google Fonts for 2023 (And How to Use Them in WordPress)
14How to Start a Blog in 2022 (Step by Step Guide)
15How To Fix ‘503 Service Unavailable’ WordPress Error
1611 Best Contact Form Plugins for WordPress in 2023
17How to Add a Custom Logo to Your WordPress Site
18How to Fix Error Establishing a Database Connection in WordPress

WPX Hosting: 50% OFF

Save 50% on WPX Hosting using our exclusive coupon code.

Get this Deal

Flywheel(our review)

Our Newsletter

Get awesome content delivered straight to your inbox.

Thank you!

You have successfully joined our subscriber list.

.
Featured In Forbes Huffpost Entrepreneur SEJ

About WPKube

WPKube is an online WordPress resource which focuses on WordPress tutorials, How-to’s, guides, plugins, news, and more. We aim to provide the most comprehensive beginner’s guides to anything about WordPress — from installing plugins, themes, automated installs and setups, to creating and setting up pages for your website.

We have over 500+ tutorials, guides, product reviews, tips, and tricks about WordPress. Founded by Devesh Sharma, the main goal of this site is to provide useful information on anything and everything WordPress.

Twitter Facebook

Useful Links

  • Behind the Scenes
  • Beginner Guides
  • WordPress Hosting
  • WooCommerce Themes
  • MeridianThemes
  • Exclusive WordPress Deals
View All Guides »

Reviews

  • WPEngine 33% OFF
  • Thrive Leads
  • Flywheel 33% OFF
  • Divi Theme 20% OFF
  • Thrive Architect
  • Elegant Themes
Reviews »

Deals

  • InMotion Hosting
  • LifterLMS Coupon
  • LiquidWeb Coupon
  • WPEngine Coupon
  • A2 Hosting
  • FloThemes
More Deals »
© Copyright 2023 WPKube ® All Rights Reserved.
  • Contact
  • Site Terms
  • Disclosure
  • Privacy Policy