Hello everybody! (Hi Doctor Nick!)
The web is a scary place to work. One moment you are looking at your homepage—then you upload an office team photo and wonder why Toby from HR’s head is chopped off. You realize your boss Michael wanted it that way, and now you feel bad.
Today I’m gonna help relieve some of those fears by giving you some tips and tricks for working with images for the web.
Images Sizes and WordPress
WordPress is a fantastic CMS because it handles a lot of the stuff you wouldn’t think about, one of those is image crops. When we design a site we set up a bunch of image crop sizes for different areas of the site. Whether that is a huge homepage hero, or a blog listing. Because of that, it makes sense when choosing images to have the focal point as close to as center as possible. You can make this change via cropping image beforehand, or choosing a picture that is close enough. 99.9999% of the time when WordPress crops an image, it crops from the center out. So if you upload an image that is 1500 by 1500 pixels to an area that is set for 720 by 480 it take the ratio and resize and crop it from its center. Keep this in mind when choosing and/or creating images for a website.
However, there are times when you’ll need to adjust where you image’s focal point should be, for example, when text over the image.
On the Jackrabbit site we have text that is flush to the right—so we need to make sure our focal point is a bit more towards the left to create a nice flow.
Preparing images for the web… the right way.
For this next section, I recommend finding a photo-editing tool. I use Photoshop and Affinity Photo, but anything with an “Export as Web” option should do.
The first thing you should do is take a look at your image settings in WordPress and see what the crop size is. Nearly all crop features have the ability to input image sizes and ratios. Add in your desired specs, and make sure your focal point is where you want it to be. 99% of the time, it will be center.
From there, you can export your image for the web. The rule of thumb is if it’s not transparent, always make it a progressive JPG file. Progressive saves a bit of space and also loads better on the web because it progressively loads up vs. waiting. For quality, I would recommend either small or medium. There isn’t that much difference between all of them except for finer details, so use your best judgement.
You are good to upload to WordPress, but there is an optional step that I find extremely helpful—run your images through an image optimizer.
We use this free program for Mac called Image Optim, it’s very easy to use. Just drag and drop your images in—and you’re done!