How to Optimize Images on WordPress

The only WordPress newsletter you need Join 1000's of fans and customers just like you. Always awesome and never spam.

Email*

This field is for validation purposes and should be left unchanged.

Δdocument.getElementById( "ak_js_1" ).setAttribute( "value", ( new Date() ).getTime() );

gform.initializeOnLoaded( function() {gformInitSpinner( 2, 'https://slocumthemes.com/wp-content/plugins/gravityforms/images/spinner.svg', true );jQuery('#gform_ajax_frame_2').on('load',function(){var contents = jQuery(this).contents().find('*').html();var is_postback = contents.indexOf('GF_AJAX_POSTBACK') >= 0;if(!is_postback){return;}var form_content = jQuery(this).contents().find('#gform_wrapper_2');var is_confirmation = jQuery(this).contents().find('#gform_confirmation_wrapper_2').length > 0;var is_redirect = contents.indexOf('gformRedirect(){') >= 0;var is_form = form_content.length > 0 && ! is_redirect && ! is_confirmation;var mt = parseInt(jQuery('html').css('margin-top'), 10) + parseInt(jQuery('body').css('margin-top'), 10) + 100;if(is_form){jQuery('#gform_wrapper_2').html(form_content.html());if(form_content.hasClass('gform_validation_error')){jQuery('#gform_wrapper_2').addClass('gform_validation_error');} else {jQuery('#gform_wrapper_2').removeClass('gform_validation_error');}setTimeout( function() { /* delay the scroll by 50 milliseconds to fix a bug in chrome */ jQuery(document).scrollTop(jQuery('#gform_wrapper_2').offset().top - mt); }, 50 );if(window['gformInitDatepicker']) {gformInitDatepicker();}if(window['gformInitPriceFields']) {gformInitPriceFields();}var current_page = jQuery('#gform_source_page_number_2').val();gformInitSpinner( 2, 'https://slocumthemes.com/wp-content/plugins/gravityforms/images/spinner.svg', true );jQuery(document).trigger('gform_page_loaded', [2, current_page]);window['gf_submitting_2'] = false;}else if(!is_redirect){var confirmation_content = jQuery(this).contents().find('.GF_AJAX_POSTBACK').html();if(!confirmation_content){confirmation_content = contents;}jQuery('#gform_wrapper_2').replaceWith(confirmation_content);jQuery(document).scrollTop(jQuery('#gf_2').offset().top - mt);jQuery(document).trigger('gform_confirmation_loaded', [2]);window['gf_submitting_2'] = false;wp.a11y.speak(jQuery('#gform_confirmation_message_2').text());}else{jQuery('#gform_2').append(contents);if(window['gformRedirect']) {gformRedirect();}}jQuery(document).trigger("gform_pre_post_render", [{ formId: "2", currentPage: "current_page", abort: function() { this.preventDefault(); } }]); if (event && event.defaultPrevented) { return; } const gformWrapperDiv = document.getElementById( "gform_wrapper_2" ); if ( gformWrapperDiv ) { const visibilitySpan = document.createElement( "span" ); visibilitySpan.id = "gform_visibility_test_2"; gformWrapperDiv.insertAdjacentElement( "afterend", visibilitySpan ); } const visibilityTestDiv = document.getElementById( "gform_visibility_test_2" ); let postRenderFired = false; function triggerPostRender() { if ( postRenderFired ) { return; } postRenderFired = true; jQuery( document ).trigger( 'gform_post_render', [2, current_page] ); gform.utils.trigger( { event: 'gform/postRender', native: false, data: { formId: 2, currentPage: current_page } } ); if ( visibilityTestDiv ) { visibilityTestDiv.parentNode.removeChild( visibilityTestDiv ); } } function debounce( func, wait, immediate ) { var timeout; return function() { var context = this, args = arguments; var later = function() { timeout = null; if ( !immediate ) func.apply( context, args ); }; var callNow = immediate && !timeout; clearTimeout( timeout ); timeout = setTimeout( later, wait ); if ( callNow ) func.apply( context, args ); }; } const debouncedTriggerPostRender = debounce( function() { triggerPostRender(); }, 200 ); if ( visibilityTestDiv && visibilityTestDiv.offsetParent === null ) { const observer = new MutationObserver( ( mutations ) => { mutations.forEach( ( mutation ) => { if ( mutation.type === 'attributes' && visibilityTestDiv.offsetParent !== null ) { debouncedTriggerPostRender(); observer.disconnect(); } }); }); observer.observe( document.body, { attributes: true, childList: false, subtree: true, attributeFilter: [ 'style', 'class' ], }); } else { triggerPostRender(); } } );} );

Ever used an SEO tool to track and see how you can improve your website? A commonly requested fix on many of these engines is to “optimize images” for the web. The team at Slocum Themes uses a few different tools to optimizes images on WordPress. Read below to find out what technology to use to optimize images before, during, and after a WordPress upload.

Optimize Images on WordPress while uploading

Let’s start with talking about optimizing images as they are uploading. A free plugin that can used to optimize the images is called WP Smush.it from WPMU dev. This plugin will automatically optimize images as they are uploaded to the media library.

Please be aware of one drawback to WP Smush.it. If your image is over 1mb in size, the Yahoo! tool used in conjunction with WP Smush.it will not work. Any images over 1mb in size will not be optimized.

Optimize Images Already on WordPress

This limit applies to optimizing images that have already been uploaded to your server from the past. We also recommend WP Smush.it for this purpose since it is also as simple as one button. With the plugin installed, highlight “Media” on the left sidebar and there will be a new subheading for Bulk Smush.it. All you need to do is process all of your images from this page and you are all set and optimized.

Notice on the below image that all images are reduced and tell you what percentage in reduction that they have!

Please note that this process may take a few minutes, so get up from your computer and stretch or do something else for a couple of minutes while all of your old images get processed.

WP Smush.it and other image optimization tools work proudly with our free Slocum WordPress Themes:

Check them out here!

ED (March 26, 2015): At this time Yahoo! may cease server use for WP Smush.it. Read this article to discover your alternatives, like EWWW Image Optimizer.

Watch this video from our popular PressThis series to learn how you can use WP Smush.it to optimize images on WordPress.

Optimize Images for web before uploading to WordPress

For crafty Mac users who want a great tool to optimize images before taking them into WordPress, the best free software to optimize images is ImageOptim. ImageOptim allows you to simply drag and drop photos or folders from your hard drive right into optimization software.

There are no settings to push or change on your end. ImageOptim does the work for you. It also replaces the original image with the optimized copy and places the original version of the image in the trash. VERY COOL!

Optimize your images!

With all of these tools at your disposal, you should have no trouble optimizing images for WordPress and for the web in general.

This resource is brought to you by our Slocum Themes, the best free and premium themes on the market!

Check them out here!

We hope that you enjoy our content. If you decide to make a purchase after clicking on one of our affiliate links, we’ll earn a small commission at no extra cost to you. Thanks for reading! View our Affiliate Disclosure

Share Tweet Share

The only WordPress newsletter you need Join 1000's of fans and customers just like you. Always awesome and never spam.

Email*

This field is for validation purposes and should be left unchanged.

Δdocument.getElementById( "ak_js_1" ).setAttribute( "value", ( new Date() ).getTime() );

Chad Warner

July 31, 2014 at 5:41 am

WP Smush.it and ImageOptim are nice lossless compressors, but they don’t reduce file size enough. Even though I’ve trained them not to, many clients upload 7 MB photos straight into WordPress. I needed something more aggressive, and I found the Imsanity plugin. It automatically resizes and compresses uploaded images, greatly reducing file size. I wrote a post about using it: Imsanity plugin automatically resizes, compresses images. You may find it helpful too.

lisa b. snyder

March 24, 2015 at 10:47 am

I saw this note and it seems related to the content of this article (published in July 2014)
Yahoo Discontinuing Smush.it (March 2015) http://www.riseforums.com/threads/yahoo-discontinuing-smush-it.1518/
===
While I don’t have direct experience using Smush.it -I do frequently send this article out to people who ask me about ways to manage images.
(I also suggest https://mattreport.com/optimize-blog-images/ as a resource.)

slocumstudio
March 24, 2015 at 11:28 am

Good find Lisa! We will have to keep a look out!

How to Optimize Images on WordPress

Optimize Images on WordPress while uploading

Optimize Images Already on WordPress

Optimize Images for web before uploading to WordPress

Optimize your images!

3 thoughts on “How to Optimize Images on WordPress”

Leave a Comment Cancel Reply