As everyday web browsing technology improves, it is possible, and sometimes expected, that websites contain graphically intensive content that attracts viewers with color and intensity. Graphic designers play a large part in the look and feel of a website, but their concern is usually only how the site looks, not how it performs in loading and search results.
There are some key elements of website images that should not be overlooked when creating and updating your web site.
Contents
Basics of Page Rendering
Different browsers render web pages using their own proprietary technology, but now that Microsoft’s Edge and other browsers are based on Google’s open-source Chromium, they are starting to work more like each other.
Regardless of how the back-end of Chrome, Firefox, Safari, or other browsers decide to render the data that they receive, they all follow a similar model.
When the request is made from a browser to a server, the information initially transmitted is sent in bytes, simple ones and zeros. These bytes are eventually converted into what you see in your browser starting with this basic process:
- Bytes are sent to the browser (ones and zeros)
- The browser converts the bytes to characters (letters, numbers, symbols, etc.)
- Characters are interpreted as tokens (HTML instances like <p> or <a>)
- Tokens are converted into nodes (main HTML container, images, text, links)
- Nodes are linked in a hierarchical tree called the DOM (final HTML element relationships)
From there, the browser combines the DOM with CSS, parses all scripting like JavaScript, and then displays the final result in your browser.
This is important for images because the more bytes that are requested from the server, the slower the page will load. A larger image size will slow down the entire process. Google values the speed in which a page renders as a ranking signal, and slower sites or pages have a strong possibility of ranking poorly.
Image Sizing
Reducing the overall file size of all elements that need to be loaded onto a page can be difficult, but image sizes are often far too large for a slow mobile connection to load quickly. Web sites that are designed with a large image that takes up an entire desktop screen may look pretty, but if the same size image were to be loaded onto a mobile browser, the viewer may exit out before the rest of the content loads.
Tips for image sizing:
- Suggested size of each image on a page is <100KB
- For pages with few images and a fast server, <200KB is possible, but not recommended
- If your server or CMS (Content Management System) is capable, it can be set up to display different images based on the viewing screen of the user. A large image that can be handled by a desktop browser over ethernet or Wi-Fi is given to that computer, while a smaller image designed to fit a mobile screen will be sent to a phone.
- Plugins and 3rd party server applications are available to optimize image sizes after they have been uploaded to your server. We use ShortPixel for many of the WordPress websites we maintain or consult on, but others like Imagify and WP Smush work quite well.
- Set up Lazy Loading if possible. This defers loading of the images below the fold, only loading them when the page is scrolled to that area of the page.
Website Image Technical Details
Once an image is loaded on a web page, it looks great, but there can be a bit of behind the scenes work that will improve the way users and search engines can understand them.
Image ALT Text
Images by themselves are visual, so it can be hard for a search engine, that only reads the rendered code, to know what is displayed in that image. Much the same, screen readers that are used for accessibility will not be able to interpret what is being shown. For these reasons it is important to use the “alt” attribute in your HTML.
Adding an alt attribute gives you the opportunity to textually define what is appearing in the picture, adding another data point for search engines to consider when ranking, and gives screen readers something to interpret through synthesized speech.
Image Naming
Images, especially photos from a camera or phone, often start with file names that do not mean anything in natural language. A file called DSC12345.jpg does not offer any information on what is included in that image.
Changing image file names to something that is closer to the content of the image, along with any key phrases that show relevance between the image and the page it is on, helps search engines understand the point of that image being there.
While taking this into consideration, also institute consistent naming conventions so that file maintenance is easier in the future.
Image Captions
A caption below or next to your image will be considered, along with any other text content surrounding it, as being applicable to that image. This data is then added to the search engine database when defining what is in the image.
Image SEO Opportunities
Google Image Search is a widely used feature that is more popular by itself that all other search engines other that regular Google. According to data in 2018 assembled by SparkToro, Google Images accounted for 22.6% of all internet searches.
In addition to Image Search, Google also has an area at the top of many results (especially product results) that will show images, called the Image Pack. When users have a visual representation of the specific item they are looking for, they are more likely to click on that instead of scrolling through the text results farther down the page.
Optimizing for Image Search and the Image Pack
Wrapping Up
Images are important to the visual attractiveness of a website, but learning how to use them to help your site can pay off in ranking both for the page that they are on, as well as the image in Image Search.
While Google’s Vision AI is getting better every day at understanding images through machine learning, it still needs help to quantify and organize the majority of images on the web.
Follow the naming conventions previously recommended, use alt text to explain what is going on in your images, and be sure that the images are relevant to the content that is surrounding them.
