How to Add Images in WordPress (and Reduce File Size) in 2020

Right this moment, we’re breaking down how to add photos in WordPress and cut back their file measurement (to preserve your pages & posts loading as shortly as potential).

If you’re simply studying the basics of how to begin a weblog, there’s loads to work out, I get it. We’ve talked about how to change font measurement, altering font coloration, making a clickable hyperlink and a lot extra right here.

The excellent news is that in 2020, it’s now very simple to find out how to add photos in WordPress with the entire usability updates and enhancements they’ve seen over the previous decade.

On this fast tutorial, I’ll be displaying you the way to add photos in WordPress posts, each in the Basic Editor (which I favor utilizing) and thru their newer Gutenberg Editor.

Now, let’s dive into including photos to your WordPress posts—whereas additionally lowering their file measurement as a lot as potential, to keep in line with Search engine optimization finest practices and to preserve your pages loading as quick as potential.

How to Add Images WordPress (and Reduce File Measurement) in 2020

  • Adding Images to Posts in the Classic WordPress Editor
  • Adding Images to Posts in the Gutenberg WordPress Editor
  • Adding a Featured Image to a Post in WordPress
  • Now shortly, earlier than we dive into this tutorial on including photos to WordPress, I’ll present you the way to cut back a picture’s file measurement (serving to your posts load sooner) in 2 simple steps.


    Set up the (Free) Compress JPEG & PNG Images Plugin by Tiny PNG

    You possibly can obtain the free Compress JPEG & PNG Images Plugin for WordPress right here from the WordPress plugin library.

    Alternatively, it’s also possible to seek for the plugin and set up it from instantly inside your plugin menu, accessible on the left-hand aspect of your weblog admin part right here—or take a look at this fast tutorial on how to install a WordPress plugin:

    Add New Plugin Screenshot


    When you’ve put in the Compress JPEG & PNG Images Plugin, each new picture you add to your WordPress weblog will probably be routinely optimized and the file measurement diminished as a lot as potential with out compromising the standard of your picture.

    Observe: That is the very best picture compression plugin available on the market by far. It permits up to 500 free picture compressions per thirty days (which is way more than you’ll seemingly want) earlier than having to improve to a paid plan at $.009/picture past your first 500 every month. It’s a severe cut price and also you received’t discover a higher compression plugin that provides you extra free credit.

    Nevertheless, if you would like to do picture compression instantly by yourself laptop (limitless free of charge), then I like to recommend the ImageOptim application.

    Add Your Images

    That’s it! Significantly, it’s that simple.

    When you’ve put in the compression plugin in your weblog—or have compressed particular person photos in your laptop first—you’re prepared to add them to your posts or pages in WordPress.

    Now, let’s dig into precisely how to add photos to WordPress.

    1. Including Images to Posts in the Basic WordPress Editor

    If you happen to’re like me and nonetheless favor the Classic WordPress Editor format for including/modifying your posts, then observe alongside right here.

    Then again, should you’re utilizing the newer Gutenberg Editor to your put up content material, then bounce down to the following part for that walkthrough. If you happen to’re unsure which editor you’re utilizing, take a peek on the picture screenshots under right here and examine them to what your editor seems like. Need to use the Basic Editor, however unsure how to get it? Take 2 minutes to observe together with Yoast’s easy tutorial on installing the Classic Editor in your WordPress weblog.

    1. Open the Publish You’re Including Images to (and Discover the Proper Spot)

    First, you’ll want to ensure you’re contained in the Publish you need to add a picture to.

    You then’ll need to navigate your cursor to the precise place inside your put up that you really want to add the picture.

    2. Click on the “Add Media” Button on the High of Your Editor

    That button will seem like this proper right here:

    Screenshot of Add Media Button (Classic WordPress Editor)

    When you click on the “Add Media” button, you’ll be offered with the display the place you may add your picture file.

    3. Click on “Add Information”

    Click on on the tab for “Add Information” and also you’ll be taken to the display the place you should utilize the selector instrument to choose a picture file from the place it’s situated in your laptop.

    Upload New Image in WordPress (Classic Editor)

    Alternatively, should you’ll be dragging a picture file out of your desktop and importing it—you may skip the “Add Information” display and simply transfer straight to dragging the picture in and dropping it (there’s a demo of this in the following step).

    4. Add Your Picture File

    I favor dragging picture recordsdata from my desktop and dropping them into the file uploader (quite than utilizing the selector to find them on my laptop), because it’s a lot faster.

    Right here’s a fast video/GIF demonstration of how to add a picture out of your desktop into WordPress:

    How to Add a New Image to WordPress (Classic Editor) GIF

    When you’ve uploaded your picture, the compression plugin will work it’s magic to assist cut back the file measurement (behind the scenes).

    Observe: Earlier than ending up your picture choices and clicking “Insert into put up,” you’ll need to write out an Search engine optimization pleasant Alt Textual content to your picture—one thing that describes the character of what’s happening in your picture, and ideally weaving in one of many goal key phrases you’re hoping the article will ultimately rank for (in natural search outcomes).

    5. Choose Your Picture Choices and Click on “Insert into put up”

    Lastly, you’ll have just a few choices to outline to your picture. This contains:

    • Controlling the alignment of how your picture seems inside your put up (I all the time choose Heart alignment)
    • Making your picture hyperlink to one other web page or put up in your weblog (or an exterior hyperlink you need to direct readers to)
    • Show measurement (I all the time advocate importing as full measurement to keep away from a loss in picture high quality)

    Image Options in WordPress

    After choosing these choices, you’re prepared to click on “Insert into put up” and also you’re good to go!

    That button will probably be proper right here in the underside right-hand nook of your display:

    Insert Image Button in WordPress

    Now, you’ll be taken again to your editor window and also you’ll see the picture you simply added sitting proper there the place you uploaded it.

    Maintain in thoughts that you just nonetheless have some fast & simple modifying choices should you determine you need to change one thing with the show of your new picture:

    • You possibly can resize it manually by grabbing one of many corners and dragging it up or down in measurement
    • You possibly can click on down on the middle of the picture and drag it round inside your put up to reposition it
    • You possibly can all the time delete the picture by clicking “backspace” or “delete” in your keyboard and begin over

    And that’s it! You’ve discovered how to add a picture to WordPress with the Basic Editor.

    2. Including Images to Posts in the Gutenberg WordPress Editor

    Within the Gutenberg WordPress Editor, your put up modifying choices will look loads totally different than what you’ll see from the Basic Editor.

    Gutenberg takes an strategy of including/modifying content material by way of a system of “blocks” like textual content blocks, header blocks, picture blocks and so forth. So let’s dive into including photos in Gutenberg.

    1. Choose the “Add Picture” Icon

    After ensuring you’re including a picture in the correct location inside your put up, choose the “Add Picture” icon. It’ll seem like this proper right here:

    How to Add Images in Gutenberg WordPress Editor

    When you click on on the “Add picture” icon, you’ll have just a few choices for how one can add a picture to your put up.

    2. Select How You’ll Add the Picture

    In Gutenberg, you’ve received just a few fast choices for a way to add a picture in WordPress. That features:

    • Add (which is able to open a selector display that permits you to choose the picture file out of your laptop)
    • Media Library (which takes you to your current library of photos—from which it’s also possible to drag & drop in a picture)
    • Insert from URL (if there’s a picture situated someplace on-line that you just’d like to import, you may paste in that hyperlink right here)

    Right here’s a snapshot of these choices (personally, I simply click on “Add” and shortly seize the picture I need from my desktop):

    Gutenberg Add Image Options

    3. Add Your Picture

    When you’ve chosen the picture you need to add, simply click on the “Open” button and it’ll be added into your put up.

    Open Image Screenshot

    Now that you just’ve added the picture, a smaller thumbnail of it can seem as a brand new block inside your put up.

    Right here’s a screenshot of how that’ll look:

    Image Added Screenshot

    4. Picture Settings & Fast Modifying Choices

    Earlier than shifting on, you’ll need to get your picture settings dialed in (as per Search engine optimization finest practices).

    And similar to with the Basic Editor, you’ll find a way to outline a variety of totally different settings and properties for a picture. With Gutenberg, it’s simply performed a bit of in a different way. Your picture settings are as a substitute situated over on the correct sidebar (after first clicking as soon as on the picture).

    Right here’s what these settings seem like:

    Gutenberg Image Editing Options

    Make certain to outline your picture settings for at the least these two properties:

    • Writing Search engine optimization-friendly various textual content that describes the picture and weaves in a key phrase phrase
    • Picture measurement (I all the time show photos as full measurement to keep away from a loss in high quality)

    You may as well click on into the “Model” settings to add some extra nuanced styling & built-in cropping options with Gutenberg.

    5. Transferring Images Round Inside a Publish by way of Gutenberg

    One very cool aspect impact of the Gutenberg editor’s focus round utilizing “blocks” of content material, is how simply you may transfer your photos (or any content material blocks for that matter) round inside a put up.

    After clicking as soon as on the picture you need to rearrange inside your put up—you’ll see “up” and “down” arrows seem proper subsequent to the picture.

    Click on on these arrows to transfer your picture up or down within your put up, like so:

    How to Move Image Blocks in Gutenberg WordPress Editor (GIF)

    And that’s it! You’re good to go.

    You’ve now discovered how to add a picture to WordPress in the Gutenberg Editor as properly 🙂

    3. Including a Featured Picture to a Publish in WordPress

    Featured photos are important in a WordPress weblog—as a result of they’re the photographs that get displayed on the prime of your weblog posts (and in each search outcomes and on social media platforms when your content material will get shared).

    Final however not least, right here’s how to add a featured picture to a put up (or web page) in WordPress.

    Close to the underside proper of your WordPress Editor window, you’ll see a piece for including a featured picture. Click on on “Set featured picture” and also you’ll be taken to the usual picture add display the place you may add in the picture you need to be featured on the prime of your put up (additionally in search outcomes and on social platforms).

    How to Add a Featured Image in WordPress

    After you’ve uploaded the picture you need to use and clicked “Set featured picture,” you’ll be taken again to your editor display and also you’ll see a small thumbnail of the picture being displayed in the underside proper (to verify you added the correct picture) like so:

    Featured Image Screenshot Example

    Fairly easy, proper?

    If you happen to chosen the unsuitable picture (or need to make adjustments later), you may merely click on on the “Take away featured picture” textual content and also you’ll have the chance to choose or add a distinct picture to be featured in your put up.

    Closing Ideas on How to Add an Picture in WordPress

    Including photos to your posts in WordPress doesn’t want to be troublesome.

    Whether or not you’re utilizing the Basic Editor or Gutenberg to your weblog, the staff behind WordPress has labored arduous to make including photos an easy course of.

    If you happen to’re nonetheless having hassle, please drop me a remark on the backside of this put up and I’m pleased to assist you to troubleshoot any points you’re having.

    That’s all for right now!

    We simply coated how to add photos in WordPress 👏

    Like what you see? Join to get extra running a blog tutorials and recommendation.

    Need Extra Running a blog Tutorials Delivered Straight to Your Inbox?

    Join right now and also you’ll be a part of 122,843 different sensible bloggers getting my finest running a blog recommendation.



    Related Articles

    Leave a Reply

    Back to top button