After we finish and launch a website, we give the username and password along with some basic instructions over to our clients in case they would like to maintain their website themselves. Many people do a pretty good job, but one very important thing that many miss is optimizing images for their website before uploading them. If you’ve ever gone to a website and a page was very slow to load while either a background or other image was filtering itself in, then that means the image was not properly optimized.
This problem can be caused by both file dimensions and the weight of the image, so both should be examined before loading any images into your website. A very slow loading page turns visitors away from your website, particularly on mobile. First of all, use an image editing program such as Adobe Photoshop (or a comparable software that you have on your computer) to adjust and export the image to be what you need it to be in order to balance quality and file size. Images that are complex will be a larger file than simple images with less color gradient or intricate detail. Most stock or other good quality images are at a 300 dpi resolution, which is the standard for print. The printing of images requires a much higher resolution than for websites, which is only at about 72 dpi. So, make sure to adjust that setting as well. In Photoshop, that would be the Image menu >> Image Size >> and then the dialog box comes up where the resolution can be changed to 72 dpi.
In addition to weight, images may need to have their size adjusted. A full-screen background image does not need to be more than 2500 pixels wide in most cases. If you’re using an image for an even smaller space on your website, edit it down to the pixel dimensions that you need. You don’t want the image to be too big, but you don’t want it to be too small either, because then it will be blurry or pixelated and won’t look good on the site. (If an image is going to span the width of your iPad or tablet, that’s usually around 800 pixels wide.) Once you get it to a size that will work, export it for your website. Using Photoshop, go to the File menu >> then Export >> then Save for Web. We usually save images somewhere around a quality setting of around 70 – 80, which is fine for most purposes.
If you do not have a photo editing program, or access to one, there are plenty of free WordPress plugins that can be installed on your website which will optimize the image for you, right as you upload it to your site’s media gallery. One such program is called Smush, which has a free version of the plugin that works very well. Just go to the Plugins section of your site >> add new >> search for Smush and install it. They walk you through the rest right in your own dashboard.
