How To Optimize Images For Your Blog or Website

Jan 12 2016

Are you using images for your website in the right way? Here are the different ways you can optimize your images for your website - these tips will help you speed up your site, improve your SEO and much more! Click here to read now..With visuals being such an important part of content marketing, we all go that extra mile to ensure that we use high quality graphics on our websites. But are we doing it the right way? If not, these visuals might be causing more harm to your website  than good. Let’s see how and what we can do to optimize images when using them on our websites:

Resize images:

Most of our images, fresh out from the camera, are very large files – much larger than what is required for a website. For example, an image taken using a DSLR is often between 3000 – 5000 pixel wide. Now let’s say you want to use one of these images for your blog posts and the width of your blog content is just 700 pixel. In this case, you need an image with a maximum width of  1000 pixel for your blog. So using the 5000 pixel wide image straight from the camera would be an overkill and would decrease the loading time of the page. Also, over time these large image files can add up and make your website incredibly slow to load. To avoid this, make sure to resize your images based on the requirement before uploading them to your website.

Add meta information:

When I started blogging, my image titles looked like this – ‘DSC0076.jpg’. I would upload images to my website, straight out of the camera, without adding any meta information to the image. Blunder! Before I go on to the benefits of meta information, let me talk about what is this meta information is?

Name of the image: The title of your image i.e ’My_Awesome_Blog_Post.jpg’ .

Alt Text: The alternate text that appears if the image cannot be loaded for some reason. This tells the readers the nature or content of the image in text format. For example, the alt text for this post’s title image would be something like this:

Are you using images for your website in the right way? Here are the different ways you can optimize your images for your website – these tips will help you speed up your site, improve your SEO and much more! Click here to read now..

Description: This is a description of the content of the image or a summary of the image. I usually keep this same as the alt text.

Here is a screenshot of my WordPress dashboard while uploading images, you can see the metadata to the right of the image.

Are you using images for your website in the right way? Here are the different ways you can optimize your images for your website - these tips will help you speed up your site, improve your SEO and much more! Click here to read now..

Now you may ask why it is necessary to add or modify the meta information at all. Here’s why:

SEO: You know that thing called Search engine optimization? It really helps to name your images aptly to be ranked higher in google searches. Google likes it and will think your content is valuable if you name your images in the right way. So next time instead of uploading an image called ‘DSC4567.jpg’, try naming it something more relevant like ‘Optimize_Images_for_Web.jpg’. I promise, over time Google will recognize your hard work and give you brownie page rank points.

Pinterest: No points for guessing my second favorite search engine – Pinterest. Whether you need a new recipe for your dinner or you need to plan your upcoming fall wedding, Pinterest is the place to go to. Now, with so many people searching on Pinterest, you want to maximize the chances of your image being found. Pinterest SEO works a lot based on the descriptions that you write for your pins. The more relevant and useful your description is, the more it is likely to attract visitors to your website. So make sure to fill in the alt text of your images as that is what Pinterest picks up as the description for your pins.

Are you using images for your website in the right way? Here are the different ways you can optimize your images for your website - these tips will help you speed up your site, improve your SEO and much more! Click here to read now..

Save images in the right format:

Have you ever noticed that your photos look awesome on your desktop and suddenly when you upload them to your website, they start looking a bit dull – the colors are not as bright and the contrast is off? This is probably because you are not saving your images in the format that is suitable for web. The color mode that is suited for the web is the sRGB mode, so while saving in Photoshop, make sure to save your images in sRGB. Here is a screenshot of my Photoshop workspace while exporting an image with the Save for Web option.

Are you using images for your website in the right way? Here are the different ways you can optimize your images for your website - these tips will help you speed up your site, improve your SEO and much more! Click here to read now..

Compress Images:

Images take up a lot of space and over time they can take up a significant slice of your website size. If your website is very visual and is image heavy, you might want to explore some image compressing apps to speed up your site. Image compression can compress your image files without losing quality, thereby reducing the size of the file. For WordPress users, I’d highly recommend using a plugin like WP Smush which will do the job for you. WP Smush strips hidden, unnecessary information like geo information, camera information etc. from your images thereby reducing the file size without losing quality. Image compression instantly speeds up your website. And guess what? The faster your site loads, the more Google, Yahoo and other search engines will like it 😉

Responsive Images:

From an iMac to a iPhone, people use different devices to browse your website. Are your images responsive? Do they adapt to all the different screen sizes? Let’s take the cover image of a twitter page for example. When you upload it on your laptop, everything looks great and high quality. But when you view the same page on an large screen iMac, if you haven’t used an image that is of sufficient resolution, it will appear pixelated and blurry on it. So before you upload your images, make sure they have the sufficient resolution to look great across all screen sizes.

Additionally, to make your website images responsive, you can set the image width to 100% in your CSS code. This will ensure that the image automatically resizes according to the device its being viewed on.

img {

width: 100%;
height: auto;
}

These tips may require a few extra minutes to implement, but they will go a long way in keeping your website fast, healthy and running smoothly!

What programs do your use to edit and save your photos?

If you are interested in learning more about the course, enter your email address to join the waitlist and be notified when it launches! :)
  • Cathy

    Thank you for this helpful information. Is a 1000 pixel wide image good enough to be viewed well on the large iMac screen?

    • Hi Cathy! glad to hear that! So it depends how much of space you are using your photo to fill up! For a blog post graphic, 1000px will most definitely work , but if you are using a 1000px image to cover the entire header area, let’s say on an iMac – it will look blurry! I hope this was useful. Please feel free to get back to me with your thoughts/ questions!

      • Susanne G

        But then how do you know what size to make it to make sure everybody – also an iMac – will have it clear and sharp…?

  • This is super helpful!

    Jenna x | Beauty And The Style

    • Thanks so much Jenna 🙂

  • I’m a stickler for making all my photos the same size via Photoshop but I know most people won’t be able to use this. Getting the right coding to make all photos the same size is one of the best things you can do imho. And you just cannot go wrong with VSCO and Aviary for your phone!

    Saoirse Sterling at XLeptodactylous

  • This post was so helpful, thanks! Quick question for you: is it possible to retroactively optimize photos for SEO on your blog? The idea of re-saving photos with different names and re-uploading seems like a huge undertaking. Would it make more sense to adjust the Alt. Descriptions, Captions, etc.?
    Halee | http://www.2BlueEyes.com

    • Yes, you can do that, but changing the name also helps. 🙂

    • Hi Halee! Yes just add ALT tags and descriptions , and that should do the trick 🙂 Thank you for reading!

  • I found this so helpful! Question, I understand how to get pinterest to automatically have a description/caption, but how did you get it to automatically have a title? In the photo above your pin shows a description, plus a bolded title that says “1 Photoshop Trick for Bright Blog Photos”. Did you save the image another way? Thanks!!

  • ↠ ᴊᴇɴɴɪғᴇʀ ↞

    This is such great info. I definitely was ignoring Alt Text, Desc & Title, but I won’t be anymore!

    • Glad to hear that Jennifer! 🙂

  • I’m definitely saving this post for the future! Thanks!

    • Awesome, thanks Heather! 🙂

  • I came across your blog from Bloglovin’ and must say your content is fabulous and has been extremely helpful in getting my site up and running. Thank you so much!

    • Wohoo 🙂 I love Bloglovin’ Thanks so much Tina! 🙂

  • Hi! Chiatra!! Once again thank you for these tips! I hope you can also do a tutorial on how to make photos look dreamy just like the picture above!

    Miriam ♥ A whole lot of serendipity

    • Hi Miriam! I ll surely be doing that, thanks so much for your feedback! 🙂

  • I was hoping to find an answer here to the problem that I posted on my blog, but alas. Maybe you can check it out and see what you think? It concern color settings and accurate color display…

    • Hi Melissa! I will, heading over to your blog now xx

  • I feel like it’s very important to know why you have to do some steps other than just telling you have to in prol of getting more views or more recognition! Thanks for sharing your knowledge it really helps 🙂

    Sara | http://www.marybloomy.com

    • I completely agree, Thanks Mary! 🙂

  • Karishma Karim

    Definitely need to start using meta tags and alternative text. Didn’t realise the alternative text could get picked up by Google!

    So helpful 🙂

    Karishma | http://www.beneaththebrush.com

    • Oh yes! It is super important to fill the alt text! 🙂 Thanks for reading Karishma!

  • Adaleta Avdic

    Ooooh lots of excellent tips here! I’m definitely a fan of these so thanks for sharing! xx adaatude.com

    • Hey Adaleta! Glad to hear that 🙂

  • This is so helpful! Thank you Chaitra for sharing xx

  • This is so helpful! Thank you Chaitra for sharing xx

    http://www.petalsofbeauty.com

    • So welcome Priyanka 🙂 x

  • These tips are spot-on! I never knew about WP Smush. Sounds like it would come in handy!

  • Great tips! Don’t forget about retina images, too. Images actually need to be double the width of the content area so they look crisp on @2x screens (iPhones, MacBooks, etc). As long as you have the max-width as 100% and the height as auto, it will resize to the proper size. Also, when doing this, save for web as JPEG Medium in Photoshop.

  • These sound like really useful tips!! I’ve never really bothered with the title and alt description, purely because (as far as I’m aware) you have to do it manually on blogger. I never realised how key it is for Pinterest, but I think I might start doing it now! Thanks for sharing!!

    Katie // http://www.zzandh.com

  • Image optimization is one of my favorite things to talk about. Not all search engines treat underscores as spaces, so I would suggest using a hyphen inbetween words instead. To my knowledge, all search engines recognize that as a space.

    • That’s a very good point, thanks for sharing Kristie 🙂

  • Elyse Love

    This is super useful information! I’d read from a few photographers that you should always shoot in RAW format, but it sounds like those larger files are actually harmful to the website! Do you always shoot in JPEG and how do you know the minimum # of pixels your photos need to be for your website?

    Elyse Love
    http://www.loveandthesky.com
    Career, personal finance, and lifestyle advice for the millennial professional and professional student.

  • Susanne G

    You mentioned in a comment that 1000 px would not be enough for a header. How do you know what size to make it to make sure everybody – also an iMac – will have it clear and sharp…?

    • Hi Susanne! If you are using an image for a fixed width like blog post area then its okay to use an image of same width across all devices. However when it comes to full width images like twitter cover image for eg., these pictures are set to width = 100%. And they automatically resize based on the device they are in. So for full width images, make sure to use high resolution images of about 2560px which will suffice for all devices.

  • Pingback: Saturday Sharing - No Shopping Bans, and more - The Geeky Shopaholic()

  • Hi Chaitra, thanks a million for your tips! As a beginner blogger, I learn a lot from your tips and this time you helped me understand even better how necessary alt text and the image descriptions are especially for Pinterest! Thanks for that! Btw I used Zoner Photo Studio for the image editting, Photo Paint for group compression and now I am transfering to Lightroom… 🙂

    • Hi Michaela 🙂 You are so welcome, thanks so much for your kind words! Wow Lightroom is awesome isnt it?

  • Chelsea

    HI! Do I past the code in the custom css portion on the appearance>customize page? I am so new to this blog work and I so appreciate your helpful blog!

    Chelsea
    chelseamorgandesigns.com

  • Linda Williams

    Hi Chaitra, great tips on image optimization. For batch editing operations like converting or resizing I use BatchPhoto. I like it because it’s a simple and easy to use tool.
    http://www.batchphoto.com/

  • Hi Chaitra! Great tips for optimizing your images! I totally love them <3 Thank you so much for sharing <3

    Lots of love,

    Chelsea | http://www.jointhecreativeside.com

JOIN ME ON PERISCOPE

@PinkPot7