If you’ve picked up one of our themes and are ready to upload a logo, a banner, or perhaps a set of photographs to your site, then this is the post for you. We’ll discuss why you should be cropping and optimising your images before uploading them to WordPress, and the importance of saving your photos in a suitable file format.
Why should I crop and optimise my images?
Perhaps your images don’t look very good, or your photos are slow to load. Cropping, resizing, and optimising your images properly will fix both of these problems. Mastering — or, at least, learning — these techniques is an important step in building a successful WordPress site. You’ll create better visual content; speed-up the uploading process; reduce bandwidth usage, and shed inessential bytes from your graphic files. Not only that, your webpage will load more quickly — and readers love speedy sites.
Understanding common file formats
Your image files are influenced by two key factors — file size and quality. Therefore, optimising your graphics is a game of balance: file size affects how fast your images will load; quality determines how your photos will look to your readers.
To better understand this balance, let’s take a closer look at file formats. There’s a plethora of file formats out there, and each of these formats have their own unique characteristics. We’re going to focus on the two main contenders, PNG and JPG.
Compression: PNG is a lossless file format, whilst JPG is lossy. Therefore, PNG files have fantastic image quality, but they also have a larger file size. JPG files, on the other hand, may show signs of compression and look pixelated, but will usually have a considerably smaller file size.
Uses: This isn’t to say that all graphics should be saved as JPG files. Each format still has its own specific use cases. PNG files are perfect for logos and interface elements. Buttons and small background textures are also best saved as PNG. Stick to JPG files when saving large photographs and banners.
Transparency: If you want to get fancy, and your graphic is in need of a transparent background, save the image as a PNG file. The JPG format doesn’t support transparency.
Now that we’ve discussed common file formats, let’s walk through an example.
Before we start, it should be noted that all of our themes auto-crop and scale to fit your images to content areas such as the Featured Slider and Featured images. We also include important image dimensions within each of our theme tutorials to help you pre-crop your photos.
I’m using Sumo.fm (A free, online image editing tool) for this tutorial, but feel free to follow along with your favourite image editing application.
Let’s crop a photo to use as a Featured image in our Portfolio theme. First, I’ll check the theme tutorial for the correct dimensions. The documentation specifies a width of 860px and a recommended height of 450px. In this particular case, the height is only recommended, and can be adjusted to your liking.
Resizing: If you’re working with photographs from your camera, the chances are your images are going to have enormous dimensions. These large image dimensions are great for print, but in most cases, smaller dimensions are better for the web.
Let’s resize your image to your specific dimensions. Once you’ve opened your image and are ready to start editing, navigate to Image → Image Size, and check Constrain Proportions. Setting this option ensures your photo will be scaled proportionally. Then, input a width of 860px, and click OK. Don’t worry about the height — we’ll deal with that next.
Once you’ve resized your image’s width, select the Crop Tool from the Tools panel, and drag to crop the image to a height of 450px. While cropping your image, you can see the cropping dimensions under the Info/Zoom panel.
Saving: Now your image is resized, navigate to File → Save to My Computer. Save this image as a JPG file to your Desktop. I’ve chosen JPG, with a quality of 90%, because of the large dimensions of the image.
Uploading: Now it’s time to upload this image to WordPress. Within your WordPress dashboard, navigate to Pages → All Pages. Then, click to edit one of your pages. Under the Featured image panel, click Set featured image. Select and upload your image, then, under the Size option, select Full Size. Selecting this option displays your image at its maximum dimensions (860 × 450). Lastly, click Use as featured image.
Update or Publish your page, and view the results :)
You now have a resized image, which fits perfectly in your theme, and will load much more quickly than the original file.
Now it’s time to get busy resizing and showing off your images!
Additional resources for working with images:
- Photoshop Express Editor — Online photo enhancement tool.
- Sumo.fm — Online image editing tool.
- Gimp — Free image editing software.
- Image CSS — Image-related CSS tips.
Enjoy this post? Read more like it in Tutorials.