How To Optimize Images For Your Website Online!

Have you started optimizing your images yet?

Resizing your images and optimizing them before uploading them to your blog is essential.

Images are great. They offer a better user experience for your readers and make the content more good-looking. But you should be sure that they don’t affect your site negatively.

So let me show you how to optimize images for your website!

Why Should You Resize Your Images?

No matter whether you find an image online or take one by yourself, you should be aware of the image size. Because if the images are too big, they can affect the site speed really badly.

When was it the last time you waited for a site for more than 10 seconds to load? I guess, not very often. Especially if you haven’t visited that site before and you found it through search engine results. You probably go back and choose the next one. As we all do.

That’s why you want your site to load quickly! A few “wrong” images can make the difference between people staying or leaving your blog before they have the chance to take a glance at it.

How To Resize Your Images

I usually use ResizeImage.net for resizing so I’ll show you how to do it there. There are a lot of tools to do it, though. Feel free to use the one you prefer. The process should be similar.

1. Upload An Image

First, you should upload the image you want to resize. Click the Upload an image button and choose your image on the window that pops.

2. Crop Your Image (Optional)

In case you want to crop the image, feel free to do so here. There’s no reason to waste your time using another tool for cropping.

After you upload the image, a preview of the image will appear. You can choose the part of the image you want to keep by clicking and dragging the mouse on the image or by clicking Select All and then adjusting the boundaries.

After deciding, click Crop to crop your image!

In case you made a mistake, you can start over by clicking Undo.

*If you don’t want to crop your image, just skip this step.

3. Resize Your Image

You can resize your image either by percentage or by using the exact number of pixels. So, to resize your image, you need to know the final dimensions.

But what if you don’t know how big you want your image to be? Then insert it on the article and change the size of the image displayed until you find out what’s the size you prefer.. This will not affect the size of your image but only the size that is displayed.

When you find out the size you want it to be, get the dimensions (while resizing the image they’re shown on the bottom left of the mouse) and use these dimensions to resize the image.

After deciding the final dimensions, delete the image from the article and your blog. You don’t want it to take up space.

*Have Keep Aspect Ratio checked while resizing. Otherwise, the image may get distorted if you change the dimensions disproportionately.

4. Select The Output Image Format

Usually, the images are either in JPG format or in PNG format.

Use JPG for images without a transparent background, for example, photos. Use PNG for graphics with transparent background.

For example, the image on the right is a PNG image but the image on the left is a JPG image.

You can choose to save the left image as a PNG, but it’s not recommended, because JPG files are usually smaller. You can’t have the right image as a JPG file, though, because the background won’t be transparent anymore. (If you’re ok with it, though, no problem in making it a JPG.)

5. Optimize Your Image

Choose how much you want to optimize your image. Just take care: By compressing it too much, you can reduce the image quality. You wouldn’t want that.

If it’s your first time, try more than one level of compression and see for yourself what you prefer.

In JPG images, I usually go for Progressive compression and usually less than 85%. In PNG, I go for Lossy compression.

6. Resize & View

And here is the time of truth. The time to see what you‘ve done.

Click Resize Image to apply your choices and View Image to see the final result. The image will open in a new tab. If the result isn’t what you want, you can go back and change the variables.

Don’t forget to click Resize Image again after changing the variables. Otherwise, the image result won’t be updated.

8. Download

If you’re satisfied with the result, click Download Image to save the result on your computer.

Don’t overwrite or delete or the original image unless you are 100% certain you won’t use it again.

Test Your Site Speed

If you want to check your site speed, you can use Google’s PageSpeed Insights. Just write the URL and start analysing it. You’ll see the results for the site speed on desktop and on mobile.

Another way to test your site speed on mobile is with Google’s online tool: Test My Site. Check out this video on how to do it. If it doesn’t work for you, try to open it in a new private window and then run the test.

Final Thoughts

Congrats! You just learned how to optimize images for your website! Don’t forget to practise today. It’s not easy to remember if you don’t do it immediately.

Let me know what you think about optimizing images and, if you have any questions, I’d be happy to answer! Any suggestions are always welcome, so tell me about topics you’d like me to write.

And if you liked this, check out more tips and tools for your blog.

See you next time!