WordPress’s automatic image scaling isn’t geared towards perfect images on a consistent basis. But what if you could get perfect images every single time and without any effort?
It’s possible to do that with a plugin, but we are going to show you how to do it without installing anything. By changing a few lines of code within your site’s design, you can get perfect images on your WordPress blog every time.
Step 1 – Have the Right Resources
Begin by gathering the right resources together. This will take no more than five minutes, yet it will make the process so much easier.
- The browser debugger/inspector. This depends on your browser. For Firefox, it’s called Firebug and for Chrome it’s called Inspector. You can use it to view web markups in your browser.
- Code editor. A good code editor is vital. Feel free to use a free or premium editor. One good option is Netbeans while another is Notepad++.
- FTP program. You’ll need this to upload and download files to the server. FileZilla and Cyberduck are two good options.
Step 2 – What’s Your Column Width?
If you want perfect images, you must know your column width. This is the key factor when it comes to images within posts. If the image goes over the prescribed width, it will overlap anything in the sidebar.
You can find out your column width in a number of ways:
- Look in the theme options. This will typically come in the form of a basic
- The theme editor. If you really want to waste your time, you can go through the actual theme file code.
- Use your browser debugger to go through the code of your website.
Step 3 – Decide on the Standard Image Size
If you have a standard size of image for your website, you’ll want to change it. Once you have the figure for how wide the box is, decide on the size you want. You need to modify the code to fit your content. But never do this from within the theme file as this can cause instability.
Edit the functions.php file in the theme directory. If you are using the Genesis or Thesis framework, this will be in the custom_functions file instead.
Add ‘add_image_size(‘full-width’, WIDTH, HEIGHT);’ to the functions.php file. 9999 can be added to provide for unlimited image sizes.
Step 4 – Add Custom Image Re-Scaling Functionality
Add in the code add_image_size(‘full-width-ratio’, 600, 9999);.
This will provide an image size that won’t crop anything you add. In plain English, WordPress will resize your image according to the original aspect ratio. So now you have scaling without total cropping, enabling perfect images on your WordPress blog.
Bear in Mind What Images You Use
Do remember that if you are playing around with images, the quality matters. Low-quality images, when resized, will lead to more loss of quality. This is why starting with large images and scaling/cropping them down is always the most desirable option.
Finally, reconsider using particularly large images. These can slow down websites. Google usually penalises sites that take longer than a couple of seconds to load, so you could harm your SEO efforts and lose rankings in the search engine.