Probably, most beginners don’t know how important it is to keep images size as small as it possible. Although pictures may be the main content of the site, they take much place on the server and thus they make your site load more slowly. It doesn’t mean that all images must be less than 50KB. Sure, your content must be delicious, but if there are some methods to make your site load faster you must use it, why not?
Use your images efficiently
There’s no need to use large files for small locations. For example, it is not rationally to place picture with width about “1500px” into small block with “50px” wide: it doesn’t make design of your site more beautiful, but makes your site more slowly.
Change format of your picture
One of the simple tricks to make your image lighter is to change its format. In the case you have pictures in PNG or even RAW format, you can change an image format to JPEG. JPEG has less quality, that’s why PNG picture takes more memory than JPEG picture with the same resolution. JPEG format doesn’t support opacity, so it has to be a bad choice for GIFs, animation, logo, background, different graphics, but it’s good for photography.
You may find many online services that can change format of your picture very fast and easy, you just need to select its format and resolution.
You may reduce images size by compression without any loss of quality, Bertram Spence mentioned this method in one of his latest posts. He proposed to make this using one of the WordPress plugins, but you also may compress images by simple Paint, one of the standard Windows OS adds. Compression just cuts unfilled pixels in the image and other needless information about picture.
WordPress does some work for you
As you may see, WordPress themes crop and resize images due to the image location. Thus, featured images or images in the post have their own size to display your articles in the most beautiful way.
WordPress has a few templates of picture sizes:
- “Thumbnail” (default 150px x 150px max)
- “Medium” resolution (default 300px x 300px max)
- “Large” resolution (default 640px x 640px max)
- “Original” image resolution (saves original image size)
You may choose each of these defaults and apply it to the images in different locations. For example, if you have picture 500px wide you can’t apply “large” resolution, only “medium”, otherwise your picture will be “blurry”.
But be careful, when you use WordPress theme without auto-resize feature: you can load images of any size without restriction, so you may load 10MB sized logo to the header or to the footer, and it will be really awful. And notice, in the case you add pictures not in the “Add Media” feature, notably if you paste code directly into PHP file, WordPress theme can’t crop it or resize, so you have to make it manually. Besides, if you want to make image size different from the WP defaults, you have to resize your pictures manually too.
In the case you need to change or add default image size pattern on the whole site you have 2 ways:
- You may change defaults in the WP admin area (Settings -> Media)
- Or add to the
functions.phpnew function that defines your image sizes. This function is very short and you can easily add it to your PHP code
As you see, it’s very easy to optimize the size of your images using these simple methods. To reduce image you may compress the picture, decrease its resolution, crop it. Maybe you know any other tricks?