Images: a complete guide

Review of how images can supercharge the overall experience of you web pages. Learn about all the required assets of web pages and how to best create utilise your resources when preparing them.

How images are supercharged on the web

Images are first-class citizens of every website.

Images are one of the main types of elements builtin into web browsers. There are only a few ways to display web pages. You can use the HTML standard to create a canvas, which allows the developer complete control over all the pixels of the entire window. Another method is to use the traditional HTML standard to create your web pages. The HTML standard offers elements that mark up a website in a declarative manner. Additionally, HTML offers many common elements that have builtin interfaces across all browsers. That means it’s often best to use the HTML standard to build web pages, as re-creating builtin elements with bespoke replacements is practically impossible.

This means that images can be treated as first class citizens of the web browser, like hyperlinks, text, or the web page itself.

How do images offer something exciting and visual to see?

Images are important to the user. We abandoned using text interfaces in the early 1990s. Humans often respond to visual inputs, and this makes images a vital part of marketing. When someone looks at your pages, within one second, they are impressed. Images don’t need to be impressive to look professional; you can create a very nice-looking web page using only simple imagery.

Images are more than decorations. Along with some people preferring to learn visually, images can convey meaning that is much more impactful than a long description.

How do I add images to my site?

When adding an image to your site, each build solution has its own way. It is best to stick to the solution facilities when adding your images. However, when the images are displayed on the page, it is normal to use a simple <img (HTMLImageElement). This means that no matter the method, what the user sees on the page is often the same (if you don’t take into account compression).

How do the search engines see my images?

When search engines are crawling a website, they will often follow all the links they can find on the website. They often even ignore instructions to not follow the link. This is because the no follow option of HTMLImageElement(s) is not indented to stop a crawler from discovering them. While a crawler may discover links that are not intended to be on the website, that does not mean it will index them in their search results. There are many facilities available to instruct Google that a given link is intended to be consumed as part of the main body of a website. Some of the tools are as follows: Structured Content, Meta Information, Sitemap, and Image Sitemap.

An important one for images is the image sitemap. This is a file that describes all of the images within a section of a website. The typical format to serve a file in is xml. Each build solution has its own method of producing the XML file. However, it’s often just a simple list of images with some meta data describing them. Another important method is structured content. This, too, can add images to the search engine results. In recent years, there has been a push to provide more information about each image, and give search engines more information about the context of any image. One of the main bits of information is the copyright license. That is why structured data has become the go-to for getting your images into search results.

Are image listings required?

Many of the images displayed on the web are not the primary images. There are many variants of the image, one for each device. Sometimes there are different size images for better connections, and many other options are available. This means that if a search engine collects all the images, it will have many different versions of the same image. On top of that, lots of the images on the web use hashes as a means to bust cache. This means the number of variants of a single image will explode. Showing all of those to the user would be a bad experience. That is where structured content has become popular. It gives you a method to link all the associated images and data for any search engines while allowing you to keep the technical benefits of many different images.

The definitive web page image checklist

Auto-magic Image Generation

Leverage the power of cutting-edge generative AI software to effortlessly and expeditiously craft impeccable images that perfectly complement your digital assets. By harnessing the capabilities of AI technology, you can efficiently produce stunning visuals that align with your brand’s unique vision and resonate with your target audience. This innovative approach not only saves time and resources, but also ensures that your digital content stands out in today’s competitive landscape.

What images will I need to create?

One time assets (reused on multiple pages)

  • Favicon
  • Logo

One complicated part of making website comes in the form of there being no right answer. When designing an asset, the end results can look completly different. The only way to approach this problem is to add what you can view and test. This allows you to tailor the content for the domain context and the applications you are expecting them to be viewed on.

When consuming a text only article it can be hard to stay engaged. By simply providing topical images it will help to anchor readers into a subject. And to split the content into logical sections. Images also provide a snapshot of a subject that can have both direct and indirect value. So images are worth adding throught your website, wherever they provide something to the reader.

Each page is better with some of the following assets:

  • Featured cover image
  • Structured content image set
  • Open graph image (or video)

Additional assets can also offer visual flair:

  • Images
  • 360 Images
  • Timelapse
  • Infographics
  • Diagrams
  • Before/After
  • Coupons
  • Leaflets
  • Promotional material

Image creation software

  • A free open source desktop image editor is needed: GIMP
  • A web-to-local style SVG Editor.
  • Photoshop in the creative suite - expensive industry standard subscription based software, embroiled in legal controversy. That might be slightly too harsh, idc.
  • Affinity - The photo editing software you’ve been dreaming of
  • Abobe Illustrator - With powerful new features in Illustrator, you can create graphics that match your style, explore dozens of options and finish designs faster.