How To Optimize an Image for a Website

Why This Matters

It’s a common mistake to upload an unedited/unoptimized picture to your website. Even though optimizing images may seem like a small task in comparison to coding a webpage, optimizing an image allows a page to render faster and your content to display in the proper way. That way, nothing gets jammed up because of too much information. 

 

Image Size Matters

Once you have your image ready and perfected, go to Image and select image size. This is important because some cameras, especially DSLRs, take huge pictures that are WAY too big for a webpage. 

Image

 

 

 

Under the image side box, change the pixel size to a smaller size that you would want on your webpage. Note: you can manipulate the size of the image rendered on code, but it’s also more efficient to size them down in Photoshop because that will change the file size which will affect rendering. 

Image

 

Make sure that the constrain proportions is also checked off, unless you want a distorted image. This is also shown by the link icons on the right side of the size boxes. Look at the size of the file and how it changes when you resize! Ideally, you want an image to be about 100k or less. If it’s not 100k by now, not to fear! There’s one more chance to reduce file size. 

 

Saving For Web

Image

 

Now go to File- Save for Web.

Image

This screen is incredibly important because it will allow to manipulate the size down even more. By changing the quality in the upper right hand corner, you can increase or decrease file size.

 

Hit “save” and you are done! Make sure to save to the images folder in your site so that it will be accessible via relative pathway!

Questions? Comments? Let me know!

 

-Cat  

 

~ by cs3309 on February 21, 2014.

6 Responses to “How To Optimize an Image for a Website”

  1. Hi Cat! I think that your blog post does a fantastic overall job of having the media/content/layout to be super consumable and easy to understand! Great job! 🙂 Specifically, I was really drawn to how you identified each section within the post with a unique font!

  2. Your post has the best procedural rhetoric, in large part due to there being emphatic, white-bolded text that delineate the different sections and steps for your post. It made it easy to read and understand.

  3. Best Voice:

    Combination of tech know-how, clarity/ability to put concepts in laymen’s terms make this an easy read that I’d like more of.

    • example: “Make sure that the constrain proportions is also checked off, unless you want a distorted image. “

  4. Best Overall Composition:

    The whole thing is clear in terms of narration and uses good images at the right times. A breezy read to; I did not get bogged down in the language.

    • example (image matched text well here):

      “This screen is incredibly important because it will allow to manipulate the size down even more. By changing the quality in the upper right hand corner, you can increase or decrease file size.”

Comments are closed.

 
%d bloggers like this: