When building a website, social accounts, or starting a blog it's important to consider how all the platforms flow together. Images and copy go hand-in-hand, if one part doesn’t work, the whole project can look a little off.
Ultimately, everything needs to be optimized for web or digital. Your website, social feeds, blogs and images. Here are some important tips on how to optimize images for web to keep your site running smooth and Google happy.
Load times should be the most important thing on your mind when creating anything for web.
- Canva is your best friend. An online platform that lets you build and save images to web sizing with ease.
- Photoshop is also another great program when saving an image always 'save for web' which will open a second window with web optimization options.
- Hi-Res Images: Be careful not to upload an image that’s set to large or hi-res, this will cause frustration with load times for the user.
- Web Page Size: Know your web page sizes. If your site has a page width of 800px and you want a full-width image, create an image with a width of 800px with the relative height. Keep in mind when your sizing images make sure your images are clear in mobile as well. That being said, creating images that stay around 150kb - 1mb is generally safe. If an image is too small it will become pixelated or blurry. Sometimes you'll find an image looks blurry even though you built it to the correct size. It's ok to size up, but don't go overboard, keep the image within the recommended image sizes.
- Chrome Dev Tools: Is an easy way to check if your site and images are mobile-friendly. To do this open Chrome and press (alt+command+i) or (control + shift + i) select mobile in the top dropdown menu.
- Finding the image size: If you save the file to a folder on your computer, right-click on the image and go to Get Info (mac) or Properties (PC) to see the size.
Formatting Your Image Files
The above images show the file size, the size of the image, color, and file name.
- First, it's important to make sure images are appropriately labelled. (hot night in the city-aug 2019_candace hansma.jpg)
- Second, there are three standard image file types that you’ll most likely be working with, each file type has qualities that make it appropriate for specific web applications.
- jpeg: For digital photography
- png: For vector drawings, logos and logos with a transparent background.
- gif: Animated imagery
- Third, make sure you convert images to RGB if not already in RGB mode.
Thumbnails are generally small to look at, but that doesn’t mean they are small in size. Best practice is to upload thumbnails at the smallest possible size while taking into account responsive (mobile) and retina (desktop) view. Images may look small, but they can be hiding very large image sizes. Make sure you create images that fit the specs you are using on web, social and blogs. For example, if the size you need is 310px x 217px; create an image in that size, don't scale a 144px x 126px up it will distort. Just remember creating images that stay around 150kb - 1mb is recommended.
Example: These image boxes are 310px x 271px.
The first image is a 28kb (144px x 126px) it was scaled up to fit the box.
The second image is actual size of the box at 106kb (310px x 271px) and much clearer.
The last image is hi-res at 1.7mb (2038px x 1784px) and not optimized for web.
Naming Your Images
Every image that goes on online needs a name. The main purpose for this is SEO (Search Engine Optimization). If you want your page to rank well on search engines like Google, you need to name your images with keywords users will be searching for. (ex. hot night in the city kamloops-aug 2019 - photographer credit)
Naming photos like the example above ensures the event or place is mentioned, the date and a photographer if applicable.