Optimize Images WordPress

How to Optimize Images For WordPress Website

by Sunny Staff

Posted in finely tuned expert, WordPress, WordPress plugins

Images are a important part of any website. Unfortunately, images also make your pages exponentially larger file size and slow page loading significantly.  This can frustrate visitors and have an adverse effect on search engine rankings. It is extremely important to optimize images WordPress.

Having a lot of images will also increase your bandwidth significantly and use up more storage on your server. This is unlikely to be a problem at the start of your website’s life, however it could increase your hosting costs over time, unless you are hosting with a company that does not charge for disks space or bandwidth like Sunny HQ.

In this article, we’ll show you how you can optimize your images WordPress website and provide a fast viewing experience for your visitors.

File Format JPEG or PNG for Optimize Images WordPress

Graphic applications allow you to save images in a number of different file formats. The best formats for websites are JPEG and PNG.

Use a JPEG for photographs as they have a high color count. This format uses special compression in order to reduce file size while not affecting the clarity of the image. Use PNGs for for screenshots, illustrations and website design images such as icons and buttons. It uses lossless compression techniques so quality is higher. Avoid using PNGs for photos as it will result in very large file sizes.

Optimize Images WordPress - cats in Photoshop

Optimize Images WordPress using Photoshop

The other format that you will see used frequently on the internet is GIF. GIFs are better suited for low quality images with just a few colors. Today, the GIF format is widely known on the internet as being the file format for animated files.

Size Your Images Correctly Before Uploading

Before we get to the optimization and no matter what option you choose, make sure you size your images before you upload.  With the proliferation of digital cameras and smart phones, photo sizes are pretty huge today.

Example: an iPhone 7 takes a 12 megapixel image, roughly 4,000 pixels by 3,000 pixels.  Most desktop displays are around 1,680 pixels by 1,050 pixels (yes there are bigger screens, but hold your horses.) Best practice for website design shows sites being design for optimal widths around 1,400 pixels.  So if you upload images that are 4,000 px wide, you are already starting with an image nearly 300% of what you need.

Optimize Images WordPress - cats in Photoshop

Optimize Images WordPress – Resize your images pixel resolution

 

Wanna geek out on image sizes and pixels? Read more here…

You can let WordPress do this as described below or use a application to do it before hand. To keep it simple, I resize nearly all images at the largest size the site needs.  You can do this by measuring the width of your site.  In the above example, I would resize and the images to 1,400px by 1,050px.  I have optimized thousands of websites by only resizing the images and resulted in an average reduction in size by 400%. This is an important step for optimize images WordPress.

JPEG or PNG What is Better?

There are two schools on optimizing, before you upload to WordPress or after.  Both are great options.  You can even choose a hybrid method if you already have a bunch of images on your site to optimize, then opting to the “before” method for all new images.  To optimize images before, you will need Adobe Photoshop or the like (discussed below.) If you plan to do all the optimization after uploading, there are some great plugins that will do this for you.

Optimizing Your Images Before Uploading To Your Website

Before you load images to your site,WordPress has a useful thumbnail feature that will automatically create three different sizes of any image you upload. Find this feature in the WordPress admin area under settings/media. Keep in mind that this does NOT optimize the image and only changes the pixel dimensions.

You can adjust the thumbnail sizes are you see fit. or example, you can configure WordPress to create a 150×150 pixel thumbnail image, a 300×200 pixel medium image and a 600×600 pixel large image. More than likely this was set correctly by your developer, but make sure you review.

Most graphical editing applications allow you to reduce the quality of an image for the internet. In Photoshop, this option is called “Save for Web and Devices”.

Photoshop allows you to choose the file type of the image and the quality of the image. The bottom left hand side of the interface also details what the image file size will be if you save the image using a particular setting.

There are some great graphic editing applications available for optimize images WordPress, such as GIMP. I recommend checking out one of the following applications:

  • ImageOptim (MAC) I Love this one!  Super simple to use and allows you to optimize tons of images all at once, including group renaming.
  • RIOT(Windows)
  • PNGGauntlet (Windows)
  • Trimage (Linux)
Optimize Images WordPress

ImageOptim (MAC) – See the huge savings in file size

 

All of the above applications are free to download. There are many premium applications available online too though I do not see any major benefits to using them over their free alternatives.

Optimizing Your Images After Uploading To Your Website

There are many plugins available that can optimize images WordPress after you have uploaded them to your website. I believe that it is better to optimize images before you upload them, however I do understand why many website owners optimize images after uploading as it can save time.

One of the most well known optimization plugins for WordPress is Yahoo’s WP Smush.it. Utilizing the Smush.it API, the plugin allows you to strip meta data from JPEGs (date, time, camera etc.), optimize JPEG compression, convert GIF files to PNG and remove unused images.

If you have not optimized your images in the past, Smush.it is a quick and effective way of reducing the file size of all of your uploaded images. Be warned that the plugin can be a CPU hog when it is optimizing images. It is best to run the application when your website traffic is low e.g. overnight. Alternatives to WP Smush.it include:

Many WordPress users prefer using these plugins as they do not rely on the server to process the  images. This just means that you are not taxing your server.

Final Thoughts on Optimizing Images

Optimize Images WordPress is extremely important. Optimizing your images will reduce your website’s page loading times, reduce bandwidth and improve the browsing experience for visitors. Your search engine ranking should also improve due to your pages loading quicker.

Please remember that compressing an image will reduce file size, quality can also be notably reduced if you compress an image too much. It is therefore important to get the balance between image quality and image file size right.

As always, I want to point out, the easiest way to do all of this is to choose Sunny HQ!  We will do all of this for you as part of our service.  We think your time is better spent focusing on your business.  Give us a call.

Tags: , , , ,

subscribe to our blog

MORE MUSINGS FROM SUNNY HQ