How To Optimize Images: Saving For The Web

makeup flatlay

Optimizing your images for the web is such an important step in writing a blog post. This post is part of my Blogging for Beginners series, where I’ve been sharing tips and tricks I’ve learnt about starting a blog since I began writing Marble Beauty, almost a year ago now.

It took me months to realise what ‘saving images for the web’ even meant! I’m sure I’m not the only one who didn’t understand it. Previously, I was just taking photos, editing them ( by just boosting the brighteness!) and the uploading them onto my blog. This meant my images were never crystal clear and I couldn’t understand why.

 So I’ll explain it in a pretty simple way. When you take a photo on a good quality camera, it will be a really large file – which is what gives you the amazing quality! But, these huge files take a long time to appear on your blog. This just means your site will be really slow to load. Slow page load time? Readers are likely to get bored of waiting and head off to read another blog somewhere else!

Due to this, WordPress for example, sets its own size for images by default, to make your site load quickly. But, when your large images are compressed down by your platform (for me, this is WordPress) to fit these smaller sizes, you will lose the quality. Does this make sense so far?

For anyone wondering, pixels just make up a digital photo. So on my blog, the image sizes are set to 800 height and 533 width in pixels. So I know to save all my images to that size.

So, you want to compress your image before you upload it to your blog. This process is called saving for the web. This means getting the image to the correct size, with the best quality and then uploading to your blog, for maximum quality.

I use Photoshop for this, but there are lots of photo editing software that will allow you to do the same. You are looking for a ‘save for web’ icon on whichever software you are using. For Photoshop users, here is what you need to do.

Once you have finished editing, click ‘FILE’, then down to ‘EXPORT’. Next, click ‘SAVE FOR WEB’. This will open up the screen you need.

In the bottom left hand corner, you’ll see the width and height in pixels. Change these to fit the photo sizes on your blog. So for me, this is 800px for the width and 533px high. You’ll see that the image is now smaller, but the quality is still there. This the simplest way to save for the web – that’s all you need to do.

Simply save onto your PC or laptop. I keep a quick access folder called ‘Ready To Post’ for each month. It just means the finished, optimized images are easy to find.

Then you can upload them onto your blog media folder. When you place the images into a blog post, you should notice a great difference in page load time, and the quality of the folders.

For the best SEO practise, make sure you are always using alt-tags on your images. This ‘alternative text’ means readers will be provided with your alternative text, describing the image, for if any reason, your photos don’t load on the page. This is good SEO practice – I know it feels like an unnecessary step to take but it is a brilliant habit to get into the habit of.


A word of caution – don’t play around with the pre-set images sizes on WordPress once you’ve started posting on your blog! You need to set this at the beginning really. I noticed that my blog images were really blurry. I read on a website that you can remove the pre-set image sizes on WordPress/ set them to zero to fix the problem. Couldn’t have been more wrong! When I realised this was wrong, I changed the image preset sizes to what they SHOULD be. This meant not a single of my photos on my blog loads on any device. I had about 200 blog posts that needed the photos to be re-uploaded. I am still working through to fix them now! So I learnt my lesson that day – educate yourself before you start playing around with setting!


I hope this post proves helpful! Please let me know if there are any other posts in my Blogging Tips series that you’d like to see, it can be anything you like.

If you are starting out with blogging, my Beginners Guide To Starting A Blog might be helpful to you!

Do you optimize your images for the web?

10 Comments

    • marblebeauty
      August 12, 2017 / 4:33 pm

      You are welcome lovely! Xx

    • marblebeauty
      August 12, 2017 / 4:33 pm

      I think it’s one of those great habits to get into if you can! Xx

  1. luxblush
    August 11, 2017 / 1:39 pm

    I never knew about this! Thank you for sharing, I’m definitely going to have a look into my settings and see what I can find. Thank you for sharing xx

    Hannah | luxuryblush

    • marblebeauty
      August 12, 2017 / 4:34 pm

      Neither did I until about 5 months ago! You are very welcome Hannah! Xx

  2. August 11, 2017 / 5:47 pm

    I didnt even know about this but was so confused why some pictures didn’t look that great! I also always inputted info in the alt box but was never 100% sure why, but now I know!

    https://thedianaedition.com

    • marblebeauty
      August 12, 2017 / 4:34 pm

      I’m so glad you found it helpful! There is so much to learn when it comes to SEO haha! Xx

  3. August 12, 2017 / 8:49 am

    Wow, I found this ridiculously helpful, I read a lot of similar blog posts on this topic but this post was by far the easiest to follow and to understand- so thank you! I’m going to bookmark this so that I don’t forget the steps 🙂

    Julia // The Sunday Mode

    • marblebeauty
      August 12, 2017 / 4:35 pm

      Aw I’m so glad you found it helpful Julia! It’s made my day that you found this so useful ☺️ xx

Leave a Reply

Loading Facebook Comments ...
Loading Disqus Comments ...