Optimize your images with predefined image sizes [Mẹo WordPress] / WordPress

Optimizing images on a website is a difficult task. You can choose to use fewer images, compressed images, textures or svg; The list goes on and on. One place many WordPress sites triple is the image size determination, which is a Important aspects of optimizing content-heavy websites.

The image size is important because the image is automatically generated according to the size given when the image is uploaded. This ensures that even if you have the original image 3000px wide, it will never be used if the 600px image is enough. Ideally a 600px wide space should use a 600px wide image instead of scaling down to a larger one.

In this article I will guide you through What is the image size? and how to identify them.

How does WordPress handle images?

If you have ever inserted an image in a WordPress post, you should come by the image size selector. This allows you to insert small, medium, and large versions of the image. Actual size for these can be modified in WordPress settings.

Whenever you upload an image through WordPress, it creates versions of these images and stores them separately. For example, if you upload a 1200×800 image, WordPress can create 100×100, 600×400, and 900×600 versions. When you insert an image and select “average”, the actual average version will be used, as opposed to a scaled-down version of the original.

This is extremely beneficial because it conserving bandwidth on the server and processing time on the client. I think it’s no surprise that downloading a 600×400 image is faster than downloading a 1200×800 image.

If a larger image is used that needs to be scaled down, the browser needs to calculate to do this. While this won’t take many hours, it can be noticeable on image-heavy sites.

The right picture in the right place

The ultimate goal is always use the right image size. If you need a 440×380 image, then get an image with the correct dimensions from the server. There are two main places you’ll use uploaded images: featured images and post images – I would recommend focusing on featured images first.

In all posts except the most visual, it doesn’t really matter if an image in the post is 220px or 245px wide. Any version you have available is equally usable. Featured images however are often displayed at common sizes. For article listings you can use 178×178 thumbnails, for post titles you can use 1200×600 wide images.

In addition to these, you may also want to keep a separate thumbnail/medium/large size as defined in the settings to gives you easy access to specific dimensions when adding images to posts.

So all it boils down to is this: Wouldn’t it be great if we had two more image sizes that we could use for featured images? These image sizes will be created right next to the rest when the image is uploaded. The good news is that WordPress offers you a pretty simple functionality.

Create image size

Using add_image_size() function you can specify all the image sizes your website needs. Let’s create the two examples mentioned above. Place the code below in your theme’s.php file or in your plugin’s file.

 add_image_size ('đặc trưng_thumbnail', 178, 178, đúng); add_image_size ('nổi bật trên toàn thế giới', 1200, 600); 

As you can see, this function has four parameters. The first parameter allows you to name the size. Second parameter is max width, third, max height. The fourth parameter sets hard cropping. If set to true, the image will be generated at the exact size you specify.

Once this has been added to your theme or plugin, two new versions of each file you upload will be created by WordPress.

Use image size

These image sizes can be used in a number of functions related to media retrieval. Let’s first look at the featured images. the_post_thumbnail() Usually used to display the featured image of the article. The following code can be placed in a WordPress loop:

 the_post_thumbnail ('đặc trưng_thumbnail'); 

The first parameter of this function allows you to specify the image size to use. Since I specified “features_thumbnail”, the 178×178 version of this file will be used.

There are some other functions like wp_get_attachment_image()and wp_get_attachment_image_src() also use the image size parameter. Whenever you use such a function, you should always specify an appropriate image size.

Thumbnail reproduction

If you already have a website in place, you won’t be able to retroactively optimize your articles just by specifying image sizes. Image sizes are only taken into account when new images are uploaded, so they are not applied to images already in the system.

Fear not, the Regenerate Thumbnails plugin will make things better! This plugin can regenerate thumbnails for all your images, taking into account all defined image sizes. It’s also possible target a specific imageThis is useful if you only have a few or you are doing some testing.

Once your thumbnails are regenerated, you’ll see optimized versions loaded on your site. You can check this by looking at the source of the image. If you uploaded ‘example.jpeg’ and you see ‘example.jpeg’ as the source for your featured image, something is wrong. If you see “example-178 × 178.jpeg” then all is well; Optimized image is displayed.

Feedback image

One difficulty in maintaining an optimized website is responsiveness. When I view an article on the iPad, the image in the large post will be scaled down because the maximum width will be 786px or more.

The simplest solution is to use a plugin like Hammy. Hammy works based on your theme’s content width (as opposed to browser window width) and can serve optimized images based on that. This is especially useful for mobile users where processing power and bandwidth can be an issue.

Optimize images even more

As I mentioned in the introduction, there are countless ways to optimize images. From sprites to image compression, a variety of techniques can be used to reduce the load times that go hand in hand with images. Ashutosh KS wrote a great article introducing 9 WordPress Plugins to Improve Image Performance, I highly recommend reading it!

I also recommend checking out Hassle Free Responsive Images which shows you how to add support for the image element, something you’ll want to use if you want to write your own code.