DevTips – How to Scale and Crop Images for WordPress

The loading speed of our website is a key factor when it comes to positioning well in search engines. Save a few tenths of a second when loading a website can be the difference between being on the first page of Google or falling into oblivion. And although you should not be too obsessed with the subject, it is important to cover some minimums.

As you can imagine, the speed at which the page is loaded is closely related to its weight. The bigger your website, the longer it will take to load. And the trend is clearly against us: websites are now bigger than ever before. We have gone from about 700kb in 2010 to more than 2.2Mb in 2016, tripling the size.

Obviously, this increase in weight on the webs has not been for nothing. Today we have much more interactive websites (thanks to JavaScript), visually more attractive (thanks to CSS), and much more striking audiovisual resources.

As with any optimization process, the most important thing is to apply the Pareto principle, or 80-20 rule, to determine what to fix first. That is to say, first thing is to identify what 20% of the resources of our website are those that end up using 80% of the website bandwith. And yes, among these resources we usually find images.

Today I tell you how I tweak the images that I upload to our blog to ensure that its dimensions and size are appropriate for our website.

Adapting an Image to Our Needs

Let’s see how to get the perfect images for our web.

Image Formats

The first thing you should know is that there are different types of image formats, each with its characteristics of compression and quality. I’m not going to dwell on this much, because there are a lot of articles on the web that explain this to you already. Just keep the following in mind:

• JPG is one of the most used formats with better compression rates, although this compression is achieved through reducing the quality of the image. It is ideal for photos without sharp edges or corners.
• PNG is a format that allows transparency and has a loosless compression that doesn’t reduce the final quality of the image. In real life pictures, its compression capacity is worst than JPG’s, but for screen captures of user interfaces it’s usually great.
• GIFs are very well known today, as they offer animated images. But you can also create an static GIF image with a high level of compression. This is achieved by using a limited color palette that might significantly reduce the final quality of the image.

If you need to upload an image to your website, make sue to use the format that best suits your needs.

Image Size and Dimensions

One of the most important factors when determining the size of an image is its dimensions. An image of 5,000×5,000px will be much larger than one with only 1,000×1,000px.

Before uploading an image to your website, think about where you are going to use it. If your goal is to use it as a featured image, you will probably need a larger image than if you are going to use it as a thumbnail in a post.

I know what you will say to me: “but WordPress already generates thumbnails of the images that I upload; Why do I have to worry?” Well, very simple: if you upload images with dimensions higher than what you need, you’ll use more disk space and you might need to get a more expensive hosting plan to store them all ?

Nelio A/B Testing

I was very impressed by the quality of this plugin, how easy it was to set up, and the outstanding support Nelio provides. I highly recommend Nelio A/B Testing.

Josette Millar

WordPress.org

View Plans

Script to Scale and Crop Images

Well, now that you know that manipulating images depends on determining their format, their dimensions, and their level of compression, it’s time to share with you the script that I use to create outstanding images.

Let’s remember first the characteristics of our blog :

• In a previous post, I told you that in Nelio we have limited the size of the images to 250kb.
• Most of the outstanding images that we use are from Unsplash, a website that has images of the highest quality.
• In addition, we have implemented our theme in such a way that the outstanding images that it uses are, at most, 1,200x800px.

Taking all this into account, I created the following script:

which is used as follows:

$ sacfi image1.jpg image2.jpg

We call the script with the image (or list of images) that we want to adapt to our needs. And what does the script do? For each image we have specified (line 3), we create a backup copy of that image (lines 7-11) and transform the image. Let’s see in more detail this transformation.

The script uses a software called ImageMagick that exposes a command called convert. Installing this program in Linux is as easy as this:

$ apt install imagemagick

With convert, you can easily transform an image from one format to another. For example, we can convert an image from PNG to JPG simply by changing the extension:

convert image.png image.jpg

convert image.png image.jpg

So here’s what my script does:

• The OUTFILE variable has the name of the output file. Notice that it will be of the JPG type, because it;s what I am specifying on line 8.
• I scale the image so that it measures exactly 1200x800px. To achieve this result, the resize parameter and the value 1200x800^. The symbol ^ at the end of the size tells convert that the resulting image has to be exactly 1200x800px, so convert will crop the image if necessary.
• In case the image has to be cropped, make the image is centered for cropping. That is, I want convert to remove the same amount of pixels in either side of the image. We do this with the gravity parameter and the center value.
• Finally, I make sure convert applies the compression level necessary to ensure that the image size is equal to or less than 250kb, using the parameter define with its value set to jpeg:extent=250kb.

With convert from ImageMagick, you can easily scale, crop, and compress the images to suit your needs.

Featured image by Siora Photography on Unsplash.