Sometimes when you choose the images to use in your website, you may miss a couple of very important details that would make your image look better in your site... To make sure you select the better images and optimize them well, keep this article handy.
Before we begin with the actual optimization process, you need to find good images to use in your website.
Optimizing the image
Now that you've got some insights on where to get images from and how to select them, it's time to optimize them.
Here at AgentFire we always use Adobe Photoshop to optimize the images, so in this article we will go over how to do it using Photoshop. You may think that it is ultra difficult, but no worries, here you will see how easy it is to optimize an image even if you are not the best at technology. Also, after explaining Photoshop, we will go over other tools that may be less scaring and be as useful as Photoshop.
Open Photoshop and open a file: On the top left, click "File" and then "Open". Browse for your image, select it and click "Open"
First thing you will want to do is to check the size and resolution. To do so, click "Image" and then "Image Size" on the top bar menu.
The images on your site shouldn't be more width than 2000px. So make sure you set at the maximum 2000px on width. The height doesn't matter if the image is for a slider or post. As you can see, there's a little lock that when you change the width it proportionally updates the height.
Set the resolution on 72 as it is the resolution that the web is built on.
To save it optimized, click "File"
> Save for web (Legacy)...
In that window you will see several options. The important ones you should pay attention to are:
- Format: Always choose JPEG unless it is a logo or graphical artwork (for those and all other images that require transparency, use PNG)
- Quality: This one may vary but keep it somewhere between 30 and 40. 40 is the optimal, go under 40 to the minimal of 30 if the image is bigger than 500kb.
- Info details box: Make sure it shows JPEG in the first row, and a number below 500K in the second one. If the second row shows a higher number, then lower a bit the Quality field until you get it.
- Zoom: When you just open this window, your image may look weird (really big, close, blurry, etc). To see how it actually looks like just zoom out or zoom in.
- Save: Finally just hit "Save" and choose a location for your image.
Note: We aim towards 200kb for all images, so that would be ideal, and we have to do our best to keep the quality but still make it near the 200kb border range of image size.
Area Pages Images
One of the frequent asked questions along the image optimization one, is: What is the perfect size for my Area pages images? - Easy:
The easiest way to do this, is by going to the image size first and set the width to 2000px.
Then, choose the cropping tool and drag the corner point until you reach the 500px height or something nearly above 500px.
Drag the image to a point where it looks good within that frame and click the sign on top to crop it.
Then just save it as explained earlier in this article.
In case you don't have Photoshop or don't feel comfortable working with it, there are other options to do the same optimization process. To name a couple:
- Tinypng: https://tinypng.com/ Here at AgentFire we also use this tool to optimize the images to use on the websites.
- GIMP: https://www.gimp.org/ It's an image manipulation program that you can download for free.
- Pixlr: https://pixlr.com/editor/ It's a popular browser-based free image editor with several useful tools.
And out there you can find more tools that can reach good optimized images.