Crop, Resize and Compress Online for Faster Images, Better SEO

If you want your WordPress (or other) website images to run their fastest and jump their highest … or at least load much more quickly, you’ll likely want to use PhotoShop or an alternative to PhotoShop to optimize images before uploading them to your WordPress image library. But what if you don’t have (or don’t want to take the time to learn) one of these image editing tools? Or perhaps you have a DIY client that uploads images to their own website and discovers they have been uploading –YIKES! – lots of huge multi-megapixel images that make their site run slower, make their backups needlessly larger and slower (perhaps requiring more expensive backup solutions), degrade page load speed, and therefore result in more “I’m outta here” frustrated site visitors (higher bounce rates, fewer page views, sessions, and shorter session durations a.k.a. bad SEO.

Digital cameras set to full pixel dimensions deliver excellent full-resolution quality which is great for fine art prints … but way too big for the vast majority of uses on the web! If you have a full-width image requirement, use that width in pixels to substitute for the 700 px content area example below. Resolutions of 72 dpi historically were fine, but retina displays from Apple and others have made 2x and 3x common on many devices, so more pixels are needed to keep the images looking sharp on these retina devices. For example, if the actual size used in the content area (e.g. 700px the content area of a page with a right sidebar) then images should be no more than about 1400 px wide BEFORE uploading to the website. These huge images are what cameras set to full resolution deliver, which is great for fine art prints, but way too big for the web!

Here is a simple 3 step online process to remedy image bloat and right-size those all-important photos and graphics before uploading them to your site. The benefits include:

faster editing while authoring a blog post
faster page loading for the site visitor
smaller backups
better search engine ranking
better use of server resources – ultimately lower costs to everyone involved

Here’s the 3-step process: CROP, RESIZE and COMPRESS

Optional: CROP the image. to the desired width and height (if needed)
RESIZE the image. (see suggested widths above)
COMPRESS the image.

… Or, do all 3 steps at once here: ResizeImage.net

Alternate options for cropping (and more) including an Adobe crop tool

Example results:

TEST 1

Just Compressing (without resizing) resulted in about a 90% reduction in file size.

In the test example from a client site, the original image in the WP library has excessive dimensions of 3396 x 4908 pixels. 1400 pixels wide should be plenty for a website that isn’t showing high-resolution fine art or full-width images. The original also had an excess resolution of 240 x 240; 72 dpi is plenty for the web.

So even without cropping (suggested for this image, especially vertically) or resizing to 1400px wide maximum, we’re able to shrink the image size from 11.4MB to 1.2MB. Much better!!!

TEST 2

Resizing to 1400px wide, then compressing, using the 2 online tools above resulted in a file about 2% of the original size!! Now we’re down (from 2.09MB to 231KB); WAY BETTER!!! The new file is now only about 2% of the size of the original!!!

231 / (11.4 x 1024) = 0.0198, or about 2% as big; a HUGE savings in file size.