Best Practices for Images on Websites

When it comes to optimizing images on websites, there are several best practices to keep in mind. In this post, we will cover important practices such as, chosing the right type, resizing images, optimizing images, renaming images and alt tags.

Image Types

JPEG files (also known as JPG ending in .jpg or .jpeg) is the default for most of your images. They are best used for photographic images with lots of colors and gradients. These are the best for keeping the website loading fast as they are easily compressed. When in doubt, use JPEG

PNG files (ending in .png) are to be used sparingly when transparancy is needed, such as logos or icons. They use a lossless compression algorithm which preserves the image quality but results in larger file sizes than JPEG files. PNG files also support alpha channels, which allow for partial transparency, making them a good choice for graphics with complex backgrounds. These files should only be used in these instances and not for general image use.

GIF files (ending in .gif) are best used for animated graphics. They use a lossless compression algorithm and support animation, making them a good choice for small, simple animations such as icons or loading indicators. However, they are not well-suited for photographic images or complex graphics as they have a limited color palette and may have visible artifacts.

These are the only image types to use for websites. Othere image types like .tiff or .eps should never be uploaded to websites as they will not render in many browsers.

Resizing Images

Resizing images is an important practice to optimize web performance and user experience. Camera devices such as your phone will take very large images, while the visitor of your website will be using a screen that is much smaller. So there is no reason to upload images that you will just be asking your user to resize on their computer. When images are too large, they can slow down page load times and negatively impact user experience. It is recommended to resize images to a maximum size of 1920px by 1080px if they fill the whole screen. However, if the image doesn't fill the entire screen, it should be resized to an appropriate size that fits well on the page. For example, an image on a page with a two-column layout may be resized to a width of 50% of the page width (960px). Similarly, an image on a mobile device may be resized to one quarter or one half of the screen, depending on the specific device and layout. By resizing images appropriately, website owners can create a better user experience for their visitors. Computers currently render all images at 72dpi (or pixels/inch), so if editing in a program like Photoshop or Gimp, start by changing the resolution, or use the "save for web" tool.

Optimizing Images

Optimizing images is crucial for website performance and user experience. Large images can slow down page load times and negatively impact search engine rankings. To optimize images, it is recommended to compress images to less than 1MB, and ideally between 50K and 500K. There are many resources available for resizing images, including online tools such as TinyPNG and Compressor.io. These tools can help website owners reduce the file size of their images without sacrificing quality. Please see the blog post "Image file size is very important to maintain website performance for more details"

Renaming Images

Renaming images is an important practice for search engine optimization and user experience. When images are uploaded with generic names, it can make it difficult for search engines to understand the content of the image. To improve search engine rankings and help visitors understand the context of the image, it is recommended to rename images with descriptive, keyword-rich names. For WordPress websites, managing photos in the Media Manager can be a great way to keep track of image files and easily rename them. Image names help you quickly find the right image for your post, especially as your website grows. By organizing and managing image files, website owners can create a more effective and user-friendly website.

Alt Text

Adding alt text to images on a website is important for several reasons. Alt text helps to describe the content of an image for people who cannot see it, improving website accessibility. It also helps search engines to understand the content of an image, improving SEO. Alt text can clarify the content of an image for all users and is sometimes a legal requirement in some countries. By providing alt text for images, website owners can ensure that their content is accessible to a wider audience, improve the user experience, and stay compliant with legal requirements.

Summary

Getting in the habit of using best practices for images on your website not only helps create a better experience for your sit visitors, but will also help you keep an organized site, and make it easier for any other contributors to your site.

Bonus video about image sizes: