How to Optimize Images for Better Web Design, Social Media and SEO

  1. Making your images look good.
  2. Making your images load quickly.
  3. Making them easy for search engines to index.
  • Start with high-quality images
  • Take your own photos
  • Design custom graphics
  • Use the right file type
  • JPGs are usually the best format for photographs. This file type can handle all of the colors in a photograph in a small file size (important when loading photographs). By using JPG, you won’t end up with an enormous file like you might get with a PNG.
  • Graphics are usually best saved as a PNG. This is because a PNG is a higher quality that JPG. However, they are usually a larger file size, too. PNGs deal with areas of color and text with nice, crisp lines, so you won’t lose any quality. They also support transparent backgrounds, which is why most logos are saved in PNG format. I recommend you save your PNGs in 24 bit instead of 8 bit format because your graphic will have a better quality and support a richer array of colors.
  • Resize images to optimize page speed and appearance
  • File size
  • Image size
  • Resolution
  • How to find the file size, image size and resolution of an image
  • Here’s a simple cheat sheet for image size, file size and resolution
  • Large images or full-screen background images should be no larger than 1 MB
  • For a full-screen background, an image should be 2000 pixels wide
  • If you have the option, always “Save for web” to give your image a web-friendly resolution
  • You can make an image smaller, but it’s very hard to make an image larger and have it look OK. It’s better to download a larger image and resize it to be smaller.
  • What to do if your image is too large
  • Resize the image
  • Reduce the resolution
  • Use a free resizing program
  • Make images the same size and style
  • Optimize your images for search engines
  • Fill out the Alt Text and Description fields when uploading images
  • Use images that are relevant to the context of the content
  • Here’s a simple little checklist I use for making sure I follow the best protocol for optimizing images for web use.
  • Upload a photo from my phone or find a stock photo. (For example, the image I want to use I downloaded from Unsplash.)
  • Rename the image to something that makes sense. (The name of the file was originally photo-1425315283416–2acc50323ee6.jpg so I’m changing it to optimize-photos-for-web-use.)
  • Resize the photo. (The original photo is 1400 x 933.33 pixels.) I am going to crop and resize it according to the dimensions I need for the following:
  • Blog banner: 691 x 326 pixels saved at 100 dpi — PNG format
  • Social media (Facebook, Twitter and Google+): 1152 x 864 pixels saved at 100 dpi — PNG format
  • Instagram: 1037 x 1037 pixels saved at 100 dpi — PNG format
  • Pinterest: 707 x 1037 pixels saved at 100 dpi — PNG format
  • Make sure it’s the right file size. (Once I cropped my image down it shows as 224 KB which isn’t bad for a PNG. I like the quality, especially since I’m using it for social media graphics as well.)
  • Upload image to blog and fill out the Alt Text and Description.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Brendan Schneider

Brendan Schneider

Brendan is the Founder of SchneiderB Media, a digital marketing agency for schools, and the MarCom Society, a community for MarCom professionals at schools.