Properly preparing your images prior to uploading them to your site can make all the difference between having a site that is sharp and professional, or one that is tacky and amateur. Just throwing an image on your site without any forethought on size or quality can cause all different kinds of problems, including increased load times and layout issues. It is so important that your images are not only high quality, but also the proper resolution. Today we’ll be covering the process of finding FREE, beautiful images online, learning how to size photos within a photo editor, and compressing photos for the web. We will also cover the process of uploading photos and optimizing your thumbnails. Let’s get started!
If you have already uploaded images and are looking for how to optimize skip down to the “On-Site Optimization” section.
Recommended Image Sizes
As a general rule, we recommend you upload images at least 1600px x 1600px, but not larger than 3000px x 3000px. The reason is that WordPress will output your images in a format that allows the browser to choose the correct size based on the space the image is taking on your page and the quality of the screen. So just because you are uploading an image at 2000px, for example, most viewers to your site will see it in smaller dimensions and not have to load that large of an image, but you will still be supporting higher quality screens and different layout options.
Uploading large dimensions, but compressed, will allow you have present high-quality professional looking images when needed without long load times.
If you need your image to be the full width of a screen, like in a fullwidth slider, for example, we suggest using 2400px as the width.
Find Images You Want to Use
If you’re not much of a photographer, believe it or not, you don’t need to pay for an expensive service to access beautiful, high-resolution images for your site. If you are not aware of Unsplash.com, then you’re in for a treat! This site is used by professional designers and photographers around the world who wish to share their work for the internet to use, completely free of charge. If you’re looking for any particular images, the site is easy to navigate, and you can even create an account to save any images for future use. For more free image resources, check out this post.
Crop the Image to Desired Ratio
If you are limited on tools, you can easily crop images in Mac Preview by clicking and dragging over the part of the image you’d like to crop, then clicking CMND> K, to crop the image. If you’re using a windows device, you can crop an image within Paint. Those of you who have access to more advanced photo editors, such as Photoshop, should easily be able to crop the image within the application.
Re-Sizing Images to Desired Pixel Dimensions
Again, if you do not have access to an advanced photo editor like photoshop, you can use Mac Preview or Windows Paint to change the pixel dimensions. Navigate to Tools >> Adjust and there you can select your pixel dimensions and save. *Remember that your image sizes should be around 1600x1600px, but not larger than 3000x3000px.
Compress Your Images
Now that your image is sized to your liking and the ratio is cropped if needed, the last step before uploading to your site is to compress images using a lossless compression service. Since large image files can slow down your site, image compression is vital for maintaining site speed. A free and easy online tool for this is compressjpg.org. Once the compression is complete, download your image.
Upload Your Images
After downloading your compressed image or images, upload images to your site in the desired area.
If you have already uploaded images without doing the above steps, this can make a huge difference to your site speed and will save you from having to re-upload all your images. However, even if you have compressed prior to uploading, it is still valuable to install and use one of these plugins because they can optimize every version of your image that WordPress creates. When you upload an image, WordPress creates smaller versions of that image, and while these are all small, they all don’t have lossless compression applied. Using one of these plugins will help to find the smallest versions of each image and compress them for the web.
We recommend using Imagify or ShortPixel Image Optimizer. Both plugins require that you create a profile and add an API to your site. Both have free features to a specific point, so for larger sites with a lot of images, you will have to assess if it is worth it to you to pay more. For this tutorial, we’ll outline Imagify.
Configuring each plugin is quite simple. The first step for properly configuring either plugin is to first visit their respective websites, and register with a new account.
Once registered, find the API-Integration area in the drop-down menu, and copy the API:
With the API key copied to your clipboard, return to your WordPress Admin, and place the API in Imagify:
Once you have input the API for the respective plugin, then you need to get your site defaults set up. Fortunately, each plugin has a wizard that will walk you through the process of properly configuring your image settings. Among other options, you’ll have the ability to control the amount of compression the plugin will do to your thumbnails.
Both plugins have a bulk optimizer that will automatically optimize all the images on your site. In Imagify, find the Bulk Optimizer by hovering over the Imagify menu in your admin topbar.
Once inside, set your Bulk Optimization settings, and click the “Imagif’em all” button. The Bulk Optimizer will do its work, and your images will be fully optimized!
And just like that, your images are optimized! If you haven’t already, go back to your Imagify settings and find “Auto-Optimize images on upload.” Turning this ON will ensure that all of your images are optimized upon being uploaded. Be aware, however, that with the free version of each plugin, the amount of optimization is limited. So depending on your needs, you may want to leave this off.
We hope this has been helpful! As always, please feel free to contact us with any further questions on this topic.