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.
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.
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
Now go to File- Save for Web.
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!