You may have a very resourceful and interesting website, but if your images and the overall picture can’t justify that, then you can forget about your visitors. The first impression is very important and before reading, what people see is the images, the colors of your website and the quality of the images. A website should make a good first impression to grasp their attention.
If you take a closer look at some of the famous sites like Instagram or Pinterest, you realize that they have set up some pretty high standards. Now, if you want to keep up with them, you need to invest some time in learning how to resize images without losing quality correctly. It’s not a difficult task though and we can show you the essentials right here.
Visual Connection
There must be a visual connection between your website and your readers. Therefore it’s important to choose the appropriate colors for the subject. A better appearance always encourages people to actually read your content and to stay for more. Even studies suggest that only 10% of the information is non-visual, and a lot of people respond better to the design and the visuals than the plain text.
Of course, the images you make with your camera are high resolution pictures, so they need a lot of space. A web page should be fast, which means that it requires as tiny files as possible. What we want to do is to reduce the size of the images, but we also want to keep them in high quality. I know it sounds pretty incredible, but trust me it’s just an easy optimization.
Another reason to resize your images (resize images without losing quality) is related to social media websites. You can’t just upload stuff there in any size, because they have strict limitations for that. It’s a must to modify the files before you put them up. Otherwise, the images will be updated in their original size without asking you to make it resize. Instead, you can find the specifications and resolution preferred by the site. Then after a little work, just upload the images in HD quality.
So, Why is it so Easy?
You can use any version of Photoshop you want, it doesn’t matter. Image resizing is a basic method and one of the most used ones. However, I’m going to talk about a few newer options later in this topic which can be accessed only in the more recent versions.
Not familiar with Photoshop?
No need to worry, there are lots of other programs on the Internet that can do the trick. They are absolutely free and suitable for a basic task like picture optimization. Most of them are probably even easier to use because they don’t have as many functions as Photoshop. But anyway, since you have a lot of choices, choose wisely.
Now we can start to talk about bitmap images.
Have you ever tried to zoom in a JPEG or a PNG?
Just try it, and you will see that the image is pieced together with thousands of separable pixels. Even the borders can be seen for each of them where the shades suddenly change on the picture. There are two different methods which can be executed on them: Resizing and Resampling.
Resizing is simply just changing the size of the picture. In Photoshop, you can resize in the two ways which we mentioned before. It’s important to know which one to use.
If you want to change the size and resolution without changing the data or number of pixels the picture contains, use Resizing. You can also call it scaling if you want. You can either change the resolution or modify the image size. If one of them is changed, the program changes the other one to compensate.
For instance, by increasing the picture size by half – it enlarges the pixels so they can fill the remaining space. So, if you want a bigger image, the resolution will drop, making the quality worse. On the other hand, by making the image smaller, it improves the resolution.
See? It’s as simple as that.
The fact is that the options offered by Resizing aren’t based on pixels, but rather on other units. Therefore it isn’t the ideal method for the Internet. You definitely need to measure in pixels somehow.
The best option for this purpose is Resampling. This is the best option and it’s used to modify the number of pixels in the image and by doing that, it can be readily uploaded to the web. Resampling uses a process called interpolation, which is available by selecting it in the Image Size Dialog Box. Be sure to check the “Resample” box, and Photoshop will cleverly add or remove pixels from the image. It’s called Upsampling and Downsampling.
If you check, it will Resample and otherwise it will Resize the image. Just as I have told you, it’s very simple. With that in mind, we shall continue with Resampling.
Are you Ready to Finally Master how to Optimize your Images?
First, do yourself a favor, duplicate the image and work with the copy. If it accidentally doesn’t fit in the desired website, you can always start over. Trust me it’s certainly worth those few seconds of effort. Done? Now we can go onto the next step.
How to use Downsampling Properly?
In the Image Dialog Box you can see Width, Height, Resolution and the Resample menu. All of them can be changed. The Resolution should be at 72, since that is optimal for Internet use. As you can see, most of the options are quite user-friendly and easy to understand. Take your time and play around with them to get used to them a little bit. If you want to understand them better, more information can be found on Adobe.
The drop-down menu next to Resampling is basically on Automatic, but you can choose it to be Bicubic Sharper for example. It removes certain pixels, which can greatly reduce the size of the picture. And that’s not all. We will discuss more options from the menu later on.
About the Automatic option: It’s sort of an all-in-one option, so if you want to involve the Reduce Noise setting, you have to choose another one for the job. All in all, if you want to keep control of the resizing, it’s better to use the more specific settings.
The results show that if you resize an image (resize images without losing quality), it always results in a great difference in its size. And you can be sure that the goal is achieved because the quality is maintained. Are you ready for the next part?
For more pixels, Unsample!
It’s hard to believe, but unsampling also results in a pretty good quality. It may be the case that you have a picture, but it’s just not big enough. Anyway, since you have to upload it, the image can be enlarged in no time. You should have a good quality image to begin with though, because increasing the image has its consequences.
It’s okay to unsample by double or by triple if you have a pretty good quality image. However, don’t go further because it may result in a huge decrease in quality. Try experimenting with a few pictures to fully understand how it works. If you do it right, the quality loss won’t be noticeable.
Try varying the Noise Reduction while you are using the upsampling options and check out the results. You will figure out the perfect way to vary the settings in a short period of time.
The Next Step: Save it for the Web
At this part, while saving the image, the size will be further adjusted. You can find it by clicking on the Export menu. Photoshop wants to remove this feature though, which means that it won’t be supported in future versions. It’s because you can do it anyway with the help of a WordPress plugin, so it doesn’t need to happen via Photoshop. There are quite a few of these plugins around the net.
Resizing Images for Retina Displays
Retina Display means that there are more pixels on the screen than usual. Now, the idea is to make your image look fine on retina and non-retina displays as well. The solution is simple: save your image, but the pixel dimensions need to be doubled. This makes them look great on every display.
It’s also worth to note that the resolution should stay at 72 DPI (which means “dots per inch”) because we only care about pixels. It’s only related to the size of the printed image. A web picture is pieced together in pixels, so more than 72 will make no difference at all.
Conclusion –
That is all you need to know about resize images without losing quality. If it’s done properly, the image will be maintained in high quality for sure. I tried not to be too technical about this topic by going with baby steps until you understand the whole subject. From now on, preparing those images will be child’s play for you.
More articles –