When it comes to websites there is always a best practice for getting something done. For images, there is no exception. Acing your image content can help improve several aspects of your website such as speed, user experience, SEO ranking, and sales.
Speed
If your web page takes more than 5 seconds to load, there is a 90% chance that your visitor will leave your page. Resizing and reducing image sizes can help make your website pages load faster.
It is the first impression for digital interaction you don’t want to get wrong. It’s the hello and best smile of the digital world.
Internet users’ interaction with your website begins with a click. Ensuring that your website loads quickly will create a good first impression and lead to users further exploring your content.
Generally, keeping image sizes below the 800kb mark is considered the best practice for your website.
Feel free to edit large images you don’t want to remove by reducing the resolution and quality to the appropriate levels. For website header images the recommended image size is between 1600 – 1800 pixels.
User Experience
Using good quality images with matching sizes across your web pages creates a well-organized and professional look that offers a pleasant experience to your website visitors.
Ensure the images sitting next to each other on your web page have similar dimensions and orientations. Good quality images that add meaning to your content and are well organized will ensure a smooth experience for your visitors.
SEO Ranking
Again, the file size of your images and site loading speed are the key determiners here, along with the use of relevant keywords in naming your images.
Using small images that load quickly with Alt text keywords that are relevant to your content will improve your website’s chances of ranking high on search engine result pages (SERPs).
Sales
Fasting loading page equals better SEO which equals more traffic to your website and increased sales. But it all starts with using the best image sizes, quality, keywords, and formats for your website.
1. Best Image Sizes
When deciding what image to use, and how and where to use it on your website, it is critical to determine the image size as well.
The right image size not only ensures that your website loads quickly minimizing your bounce rate, but also influences your SEO ranking thereby increasing traffic to your website.
A. Full-Width Images
The recommended size for full-width images is 2400x1600px to ensure that your images look good on PC and mobile devices. Full-width images cover your screen from left to right and are used for hero images, full-screen slideshows, and banners.
B. Inside Content Images
Inside content images are images that sit with your written content in the text sections of your web page. They are not full-width images and may be vertical or horizontal depending on your chosen layout.
For horizontal images, the recommended size is 500px as the maximum width. While the vertical forms are restricted to 1000px maximum width. The height will be adjusted automatically based on your ratio once you save your image.
C. Slideshow Galleries
When reviewing images for your slideshow galleries, ensure they all have the same height whether they are vertical or horizontal images.
The approved height is 1500px.
D. Blog Post Images
Only upload images that are of the same width to your blog post regardless of their orientation. The recommended width is 1500px.
E. Featured Images
Featured images are of 3 types: portrait, landscape, and hero images. The recommended size for portrait and landscape images is the same as the one for Inside Content Images, while the recommendation for hero images is the same as Full-Width Images.
Portrait (vertical) images recommended size is 1000px maximum width.
Landscape (horizontal) images recommended size is 500px maximum width.
Hero images (full width) recommended size is 2400x1600px.
2. Best Image Quality
You don’t need to export your images with the quality set at 100% from your photo editor to have the best quality image for your website. Adjusting the image quality to 65% or 70% on the Quality Slider can produce a decent image quality with small file size.
Images with more color and details like trees and leaves usually have larger file sizes. Be careful not to over-compress them as this would distort the images. Feel free to experiment without various quality settings for different images to get the best results.
When comparing the quality of images, take into consideration their dimensions and the places on your website for which they are needed.
The goal is to ensure that any image going into your website does not exceed 500 KB in file size. The JPG image format with RGB color profile is supported by most browsers.
3. Best Image SEO Practice
When deciding what image to use, and how and where to use it on your website, it is critical to determine the image size as well.
The right image size not only ensures that your website loads quickly minimizing your bounce rate, but also influences your SEO ranking thereby increasing traffic to your website.
A. Using Relevant File Names
When creating file names for your images make sure to use titles that are relevant to the blog posts or content they are meant for. You can use only letters, numbers, underscores, and hyphens when naming an image. Ensure to use only English letters as characters from other languages may result in upload errors or failed images in your galleries or blog posts.
B. Selecting Appropriate Image Format
Choose your image format to suit the purpose for which you would like to use the image. JPG, PNG, and GIF are the most commonly used formats for saving website images because of their small file sizes and compatibility with the web.
C. Using Alt Text With Images
The final step in optimizing your images for the web is filling in your Alt text or Alternative text. This is the text that shows up explaining what the image is about when users are unable to view your image. You are required to provide the Alt text when you are uploading an image to your website. Ensure to incorporate elements of your chosen keywords into your Alt text for the best SEO results.
If you are using WordPress and have uploaded an image with an Alt text, you can access your media library and tag the image from there. A great plugin that can help you do this quickly is WP Meta SEO. After installing it, go to WP Meta SEO > Image Information and add Alt text to any images you missed before. Once you are done, you can deactivate the plugin.
4. Best Image Formats
The most web-friendly image format is JPEG. Before saving images from your photo editing software, make sure that the quality is not less than 65%, regardless of the size of the image. Ensure to use the JPEG image format for images with colored backgrounds and PNG for white backgrounds or vector images such as logos and icons.
Set your color profile to sRGB. This is the recommended color space for the web. Do not check the “Limit File Size to” box. Ticking this box off would reduce the quality of the file.
For graphics that contain areas of solid color, use the PNG or SVG format.
SVG stands for “Scalable Vector Graphics.” It is a text file that describes shapes, lines, curves, and colors in a language known as “XML”.SVG files can be scaled to any extent without loss in quality. They do not rely on a pixel grid and are text-based with small file sizes that can be controlled with CSS code
Always use PNG for your vector or design images with solid colors such as those created on photo editing apps. JPG does better for regular images or your typical camera-taken photographs. And finally, always ensure to save your images in small file sizes for your website to get the best results.