How Important Is Image Optimization for Your Photography Business’s Website and Your Digital Blueprint? with Myrna Daramy
In today’s world, visual content and visual information play a role in practically every aspect of our lives. According to Dr. Lynell Burmack, an educational consultant who studies visual literacy, here are some interesting facts:
- We can get a sense of a visual scene in less than one-tenth of a second
- Visuals are processed 60,000 times faster in the brain than text is.
As the increasing dominance of visual content continues to expand on the web, it creates new opportunities for increasing your site’s traffic and overall digital blueprint. Just as I tell all of my photography clients, you are the gatekeeper to this valuable content, and you have a slight advantage, because you are the creator of visual imagery. So it only makes sense that you should optimize the images you take and place on your website in order to not only attract your target audience but make it easier for Google to connect you to them by optimization.
Because Google understands how important visual content is, the search engine giant invested a ton of time and energy into image search. You may have even found yourself using the Images tab in order to search for information.
Basic Optimization Tips
In order to optimize your images for your website, you need to first understand what search engines can read:
- The text surrounding the image and on the web page (copy on the page, title text, alt text)
- The image’s filename
- The location of the image file (above the fold line, toward the bottom of the page, etc.)
- The image’s dimensions
- The image’s file size, which impacts your webpage speed
Unfortunately, search engines can’t interpret your pretty images and can only use text in order to gain context of any visual imagery. I also can’t share my insight about image optimization without mentioning the impact of mobile and the need for speed. I often tell my clients that, more than likely, their prospective clients will encounter their businesses on their mobile devices before they engage with the desktop version of their websites. As a result, the amount of time it takes for your website pages to load will directly impact how Google will rank your site in search results. Here are some basic image optimization tips that you should apply to the visual content that you upload to your website on a consistent basis in order to increase visibility, provide better search ranking results, and leverage your digital blueprint.
1.Choose the Right Type of Image
Without getting too technical, there are two types of images—raster images and vector images. Vector images are images that are simple in nature, created by lines, shapes, or polygons, and are best used for basic shapes, logos, icons, graphics and flat images. If you zoom into a vector image, it will always look the same. Raster images, on the other hand, are made of pixels within rectangular grids. A pixel is a single point or the smallest single element in a display device. If you zoom in to a raster image, you may start to see a lot of little tiny squares, and the image will look blurry. Most likely, a majority of the images you use on your website are raster images, since the images are photographs.
My advice for the best results on your website is to use a combination of both types of images. Use the vector format for your logo and simple images (if applicable) and raster for the remaining.
2.Select the Best Image Format
There are several image formats you can choose to use for your images—SVG, PNG, JPG, GIF, or recently introduced next-generation formats (JPEG 2000, JPEG XR, and WebP).
The best vector format to use is SVG, and the best raster image formats to use are PNG, JPG, and GIF.
SVG formats produce flat, two-dimensional graphics.
PNG formats produce higher quality/resolution images and are known to handle transparency. Typically, this image file format is often used for logo image assets where you need the background to show through or for times when you want to save every detail of the image. PNGs can be saved as a PNG-8 bit, PNG-24 bit, or PNG-32 bit. The PNG-8 file type is limited to a pallet of 256 colors, whereas the PNG-24 and PNG-32 will deliver a much higher-quality display, but result in a larger file size, which could disrupt your webpage’s speed performance.
JPG formats produce great-quality images that work with many colors, shadows, and patterns to display in high-resolution. They aren’t heavy in terms of file size, which is really good for website page speed, and they are my preferred image format for your website for several reasons. In fact, they are the most widely used and the most suggested format due to their hassle-free nature. However, one downside to this format is that it uses lossy compression, which means that the image quality can suffer depending on your settings and how much you compress the file.
GIF formats produce animated images, and like PNG formats, this file type is limited to 256 colors. It also shares something with JPG formats, as it uses lossy compression as well. It isn’t as widely used, but if you are looking for animation, it is the ideal choice.
Recently, in the SEO world, there has been a lot of conversation about next-generation image formats like JPEG 2000, JPEG XR, and WebP. In fact, Google has been suggesting that sites use these formats, because they load much faster than their predecessors. There are several free tools that can convert images to these formats, but please be mindful that they’re not universally supported by all browsers yet. Ideally, you should still keep using JPG for images with lots of color and PNG for simple images that need transparency.
3.Name Your Images Properly and Include Attributes (if applicable)
One of the biggest missed opportunities I witness with my clients is how they name their images. The name of your image file can allow search engines to discover your visual content in context. For example, a business owner may be searching for pictures of amazing backdrops for a headshot, and you are a master at taking headshot photos. If the images you have in your portfolio for headshots have file names like 24579-cdg.jpg, Google would have no way of making the connection in a search result. Instead, the file should be named stunning-headshot-for-business-owners.jpg. One of the biggest mistakes I see here is that people use underscores (_) and not dashes (-) to separate the words in the file name. Name your images in all small letters with hyphens in between, and leave no spaces. Incorporating keywords that meet the prospective client where they are in their consumer journey is the best method of file naming. I suggest that the file names be short and limited to no more than four keywords that are specifically related to the image, so that Google does not ding your images for keyword-stuffing, which may negatively impact your rankings.
In addition to the image file name, some website content management systems (CMS’s) allow for you to add additional attributes to image file names such as a title text, alternative text, and captions. Depending on what platform you have, a simple guideline to use for attributes is to be succinct, using around 80-150 characters that can get details about the image content across.
I also want you to be mindful of the written content that is surrounding the image files, as this copy is important for search engine optimization (SEO). The most important copy is the text that immediately surrounds the image, like a caption.
4.Resize Your Images
Although this optimization tip is really important, it is one of the most confusing, because there is no exact formula that I can give you in terms of knowing what the proper size of your images should be. It must be reviewed on a case-by-case basis which will vary with practically every image. People also often confuse image size and image file size and assume that they are the same thing. Your website is multi-dimensional, meaning that there are many different variables to take into account in order for website visitors to see what you are expecting them to see. Image size refers to the dimensions of the image, whereas image file size refers to the byte size or the weight of the file.
Image size can get a bit complicated, because there are several factors that you have to account for, such as the many different screen sizes or devices where your images may be displayed. For that reason, I am going to keep it simple—try making your images one of the following sizes:
- 1080 x 1080 pixels or
- 1500 x 2500 pixels
5.Compress Your Image File Size
Compressing a file is possibly the simplest yet most crucial part of image optimization, as it directly relates to the website’s loading time. As I mentioned above, image file size has to do with the “weight” of the content. The higher the resolution and dimensions of your image, the larger its file size, the “heavier” it is, because it takes a lot more dots (or pixels) to make the image appear very crisp.
I totally get it—the visuals on your website need to look great and be of high quality. If it were up to Google, websites wouldn’t have any images and only a ton of copy, so that their scanning robots could interpret what your content is about a lot faster. But as stated above, we live in a visual world, and I would hate to have you compromise on the quality of your photos. Here is a simple guideline to follow when compressing images:
- Try keeping your images as close to 300 KB as possible for large images and 70 KB for smaller, less important photos
One of my favorite tools to use for compressing images is TinyPNG, which can compress up to 20 images at a time.
Closing Notes and Overview
In summary, visual content is extremely powerful for your digital brand. In order to leverage your brand’s online presence and increase your exposure, you need to optimize your images. Here are five tips that you can incorporate into your digital marketing strategy in order to rank higher in search results and attract more visitors to view your content:
- Choose the right type of image.
- Select the best image format.
- Name your images properly and include attributes (if applicable).
- Resize your images.
- Compress your images’ file size.
