As a school marketer, I’m sure you already know how important it is to add relevant, quality images to your blog posts, website and social media updates. Photos, illustrations and other visuals help make your content more appealing. You should always use at least one image per post; some bloggers like to add multiple images if their posts are lengthy.
Not only are images and graphics visually appealing, they make your content more enjoyable to read. And, they can help you with search engine optimization (SEO).
When we discuss image optimization for the web, we can think about it in three ways.
- Making your images look good.
- Making your images load quickly.
- Making them easy for search engines to index.
Most posts on this subject focus on just one of these aspects or another, but in this post I’m going to cover all three. Even better is that you can optimize images with free, easy-to-use tools – Photoshop is not required! I basically use Canva but there are other great tools for basic photo editing, such as Pixlr, Picmonkey, or LunaPic.
Here’s what you need to know about optimizing images for use on the web.
-
Start with high-quality images
You don’t have to be a professional photographer to use on your blog or for your social media updates. Every day it seems like there are high-quality free stock photo sites where you can download beautiful images for free. Click here to view 40 free stunningly beautiful stock free image sites. My favorite site is Unsplash but I use Pixabay and Pexels often as well.
When you download an image from a free stock image site, make sure you resize it for whatever application you’ll be using. It’s best to start with a larger image and reduce the size; starting with a smaller image and enlarging it doesn’t usually work very well (it will pixelate).
-
Take your own photos
Of course, using photos that have been taken by a professional or even yourself (or your staff) is great. There are a few easy tricks you can use to make your photos look well-lit and professional if needed, such as using a reflector or diffuser like a softbox or umbrella (if practical). If not, photo editors can help tremendously.
-
Design custom graphics
There are many great tools out there to help you build your own infographics or photos with front overlays. I use Canva, but Piktochart is easy to use for infographics, presentations and printables.
-
Use the right file type
Most of the time, you will want to use either a JPG (JPEG) or PNG format. There are pros and cons of each, but as a rule-of-thumb, you can think about these different types in these ways:
- 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.
Most photo programs let you choose a PNG or JPG by going “Save As”, “Export” or “Save for Web” and then choosing the format you’d prefer. There are also free online tools like Zamzar that will convert file types for you. Just keep in mind that you can convert a PNG to a JPG, but you don’t improve the quality by converting a JPG to a PNG. You really can’t reverse-engineer a JPG into a PNG so, if you need to make that conversion, you will need to start over and create a PNG original.
-
Resize images to optimize page speed and appearance
When it comes to images on the web, you want to try to strike a balance between visual appearance (resolution) and size. This is because you not only want the image to look clear and crisp, but you need it to load quickly.
Site speed is a ranking factor for SEO. According to Think with Google research in 2017, as page load time goes from 1 to 10 seconds, the probability of bounce increases by 123%. A fast site is a good user experience, which leads to higher conversions. So when it comes to loading images, every second counts.
It’s important to understand three aspects of “size” as it relates to web images.
- File size
File size is the number of bytes the file takes up on your computer. This is the factor that can really slow your site speed down. A 15MB photo is too large; a 125KB photo is much more reasonable. If your file size is too big, it’s an indicator that either your image dimensions are too large or the resolution is too high.
- Image size
Image size relates to the actual dimensions of your picture. When it comes to web use, we measure size in pixels (as opposed to printed images, which are in inches). So for example, an image used for a brochure might be 4 x 6 but, if that same image is used for the web, it would be measured as 384 x 576 pixels.
- Resolution
Resolution is measured in dots per inch (DPI). Printed images need to be 300 dpi to look good, but most computer monitors display images at 72 dpi or 92 dpi so anything higher than that is overkill and will slow down your site speed.
-
How to find the file size, image size and resolution of an image
It’s easy to find the file size and image size of a picture. Just right-click on the image file, choose “Properties” and then the “Summary” tab. On a Mac, Ctrl+click on the image file and choose “Get Info.”
Finding the resolution requires a photo editing program, but most basic editing programs will let you save images at lower, web-friendly dpi. Canva lets you download using the “Save for Web” feature, which gives you a PNG at 92 dpi.
-
Here’s a simple cheat sheet for image size, file size and resolution
Now that you know the different aspects of image sizing, there are a few rules to keep in mind.
- 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
If your photograph is too large (which is the case if you are using a digital camera), here is what to do:
- Resize the image
Let’s say your image is 5000 pixels wide. You can easily resize it to 2000 pixels wide using a photo editor. Just make sure to keep the image at the same proportions, so you don’t distort your image.
- Reduce the resolution
Photo programs like Canva or Pixlr will automatically reduce your image to a web-friendly size or, if your program is more sophisticated, you can choose the dpi you want to save the image in.
- Use a free resizing program
You can use a free image resizer like TinyPNG, TinyJPG or ResizeImage.net to reduce your file size without interfering with the quality.
-
Make images the same size and style
Images on the web will look better if you use a consistent size and proportion. Consistency is important. Take the time to resize and crop your images so they are all uniform in size and resolution.
-
Optimize your images for search engines
Most people don’t think much about their file names. However, renaming your photos to include keywords will give your SEO a boost.
When Google scans your website, it can read your text but not your images. It relies on the name of the image to interpret it correctly. The file name also becomes part of the image’s URL, so naming your file something in plain English will make your URLs easier for the search engines to navigate and interpret. Once you upload an image to your site, the file name is public (so don’t name them anything secret or embarrassing.)
-
Fill out the Alt Text and Description fields when uploading images
Fill out the Alt Text and Description fields that open when you upload your photo. You can fill out your captions too, if you don’t mind them displaying in your post. Alternative text (Alt text) won’t be visible to your average visitor, but will be read by visually impaired readers and search engines. Just remember that filling out Alt text, descriptions and captions are good for SEO, but don’t try to keyword stuff. Just be descriptive using regular English and don’t get crazy with repetitive keywords so you aren’t penalized by the search engine deities.
-
Use images that are relevant to the context of the content
Choose images that relate to the message of your post, rather than something completely random. An image that is relevant to the content will rank better – and be more relevant to your audience. This tip also helps you avoid stock photo clichés. Your posts will do better if they show images that relate to the content – like teachers, students and classrooms – rather than a photo of an apple.
-
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.
It’s really a simple process to optimize your photos once you get the hang of it. Following these steps will help your image look better, your website/blog load faster, and improve your SEO.
What photo editing tools do you use? Do you have anything to add to this post that you’d like to share with the rest of the school marketing community? We’d love to hear from you!