Resizing an image is one of those perplexing problems that a lot of people seem to have trouble with. I'm not sure why, because it should be a very easy task. You can do so on your desktop or by using an online image resizing app. When it comes to online photos, size matters a lot. Particularly for people who have poor internet connections and can't wait for a page with pictures to load. These people often become irritated and abandon the platform in search of another. Make sure you just upload appropriately sized images to the internet.
That wasn't so difficult to understand, was it? However, despite the fact that resizing is so easy, people continue to snap large-sized images with digital cameras, and then attempt to post them on the web. Often resulting in sluggish websites.
You can use a quick online image resizer tool such as pix.tools.
Why should you resize images? Website load time. That's a good place to start. You don't want your blog or website to take a long time to load. Some social media sites demand that you load photos of a certain scale, therefore, you should follow these requirements. And, if all of your photos are already reduced in size, you won't have any problems.
If photos are too big, blogs often become unresponsive. Your website themes, particularly those with sliders on the homepage, can go haywire.
Blogs with uniformly sized pictures are appealing and work like clockwork.
As camera megapixel sizes increase (the norm seems to be 8 megapixels and higher), document dimensions and image pixel sizes will also increase. When it comes to writing, emailing, or uploading pictures on a website, these sizes do make a difference.
A reminder: just because a camera has 8, 12, or 15 megapixels does not mean it can take better pictures. Nor, does it make it a professional camera. The maximum print size that you can produce, is based on the megapixel size of a sensor. For example, a 12MP-camera (4000 x 3000 megapixels), for example, will print a 16′′ x 20′′ picture at 240dpi. But that doesn't guarantee excellent photo quality. But, we'll talk more about megapixels another time.
Since most photos aren’t the actual size we need, it's essential to understand how to resize an image correctly. Basically, the pixels in an image are updated when it is resized. When making a photo smaller in size, the photo editing software will discard any unnecessary pixels. When a picture is enlarged, the photo editor must create and add new pixel details. It does this based on best estimates in order to achieve the desired size. This usually results in a pixelated or blurry image.
Hence, downsizing a picture is much safer than enlarging an image. Because of the complexity of enlarging, if an image is required for high-quality publishing or large format prints (e.g. posters), it is better to capture the original image with the highest quality and resolution possible.
I touch up the images in Photoshop as soon as they arrive on my PC. Then I resize them in one bulk batch with a resizer and place them into a folder named ‘small’ within the main folder. (Keeping my large and small versions in the same place helps with housekeeping.) I usually reduce them from 3456 x 2304 at 72 dpi to 800 x 533 at 30 dpi. I'm sure there are other ways to do it, but this is what works for me.
However, as a general rule of thumb, if you're going to reduce the size of a picture, make a duplicate so you don't lose the original.
When dealing with raster (pixel-based) images, it's important to remember that scaling an image (in programs like PowerPoint, Word, InDesign, or Dreamweaver) doesn't necessarily resize the image; instead, it simply stretches or scales it. This means the pixels are extended and can look pixelated or blurry because the resolution is not changed to better fit the new dimension.
Scaling images down from an original is not visually obvious, but its file size is still the same. For instance, if you upload a very huge picture to a website and scale it down to a smaller size, the webpage still must load the full-sized version of that image. As already discussed above, this can cause the web page to load more slowly.
Another important factor about image resizing is making sure your image can appear properly on smaller screens and tablets. This means fitting your image inside its ‘container’ well.
The first step is to ensure that your picture dimensions are proportional to the container it’s in. Rather than having them fixed. You can set the width property for img items in your stylesheets rather than fixed. You'll want to ensure it's set to 100 percent, which means the picture will fill the container it's in regardless of the container's size. This means that as the window gets larger or smaller, the picture will resize to match its container. Thereby avoiding the dreaded horizontal scroll on mobile devices. I'm not sure why we all despise horizontal scrolling so much, but it seems universal.
Now let's take it a step further! You want to also make sure your images don't scale up to larger than necessary unless you’re using massive screens. This is simply because they won't look as good. Instead, use the ‘max-width property to prevent photos from being too crowded.
Making your photos light and fast-loading takes a little more effort upfront. But it will become second nature once you incorporate it into your overall content processing. More importantly, it is the most effective way to boost your website page speed and overall performance.
