WordPress Image Optimization

https://www.pixelmattic.com/blog/image-optimization-for-wordpress-websites/

IMAGE OPTIMIZATION ON WORDPRESS WEBSITES

Step 1: Resize The Image

Great screenshots can add a lot of value to your content. If you take an image of your whole screen and then try to shrink it down to a third of its original size, it will distort the image. The text will look blurry and edges will begin to look fuzzy.

Here are two things you can do while taking a screenshot:

Resize the browser, not the image. Resizing an image from 800px to 640px is much easier and smoother than 2400px to 640px.
Instead of taking a screenshot of the full app or the full screen, just focus on the most important area of the screenshot.
Photoshop is the industry standard for resizing images, but use whatever software you’re comfortable with. There are free tools like Paint for Windows and Preview for Mac that can function as perfectly adequate image resizing tools in a pinch.

Gimp provides a free, cross-platform, open-source desktop solution. Online-only options such as Pixlr and Fotoflexer are also available.

As WPMUDev sums up in their blog post, “Regardless of the solution you end up going for, bear the following points in mind at all times when resizing your images:

Working on a copy of the image (rather than the original high-quality source file) gives you room to experiment and change your mind.
Always be sure to maintain the original image’s aspect ratio without introducing optical distortion when resizing.”
As a handy feature, WordPress automatically creates multiple versions of uploaded image files, with different dimensions to be used as thumbnails or inserted into posts.

Image optimization for wordpress websites
Step 2: Save your resized image as PNG or JPEG

When using Photoshop and other image editing software, you can specify the file type you want to save as. The overwhelming majority of online images fall under two file formats – JPEG and PNG.

So which one should you use? Well, that depends. Both options have advantages and disadvantages, and the choice largely depends on the scenario. Choosing the right file type can keep your image looking clear and crisp without sacrificing speed.

JPEG – Good for photos of people, places, or things, but bad for screenshots of apps and websites or text.

PNG – Good for screenshots of apps and websites with gradients. It keeps text looking clean as well, but can be problematic for file sizes.

GIF – Good for flat images with no gradients or a short animation. Watch out for small images inside a screenshot like a profile picture or a gradient like the top bar of a browser. These never look good in a GIF.

With your image cropped, resized and saved, you’re ready to compress.

Step 3: Reduce file size with modern image compression

The goal of image compression is to reduce the size of the image file without substantially altering its appearance. It does that by algorithmically removing image information that the human eye can’t perceive.

JPEG undergo lossy compression that can introduce visual artifacts but reduces file size more. On the other hand, PNGs undergo lossless compression that retains perfect visual quality.

Modern compression tools analyze an image to dramatically reduce the file size without noticeably altering its quality.

For Mac users, ImageAlpha and ImageOptim are free desktop applications that optimize PNGs, while JPEGmini handles JPEGs. Platform agnostic web services like TinyPNG and Kraken.io optimize your uploaded image file and provide a download link to the optimized version.

There are also a number of offline apps for both major platforms dedicated entirely to image compression. The leading options here are ImageOptim on the Mac or Trimage on both Mac and Windows.

Step 4: WordPress plugins for image optimization

By using WordPress plugins, you’ll have the ability to upload un-optimized JPEG and PNG files and have the plugin replace them with optimized versions. You do lose the ability to tweak each image and a paid service might be required to substantially reduce file size.

Here are some WordPress plugins that you can use for image optimization for WordPress websites to enhance the overall loading speed of your website.

1. EWWW Image Optimizer

2. WP Smush

3. Kraken Image Optimizer

4. Optimus