The Ultimate Guide to Optimizing Images for Your Website

Understanding Image Optimization

Image optimization involves modifying images to reduce their file size without compromising quality, ensuring they load quickly and look great across all devices. It also includes making your images discoverable by search engines through proper naming and tagging. Optimizing your images can lead to faster page load times, improved user experience, and increased organic traffic.

Choosing the Right Aspect Ratio and Image Format

Aspect Ratio

The aspect ratio, the ratio of an image's width to its height, is pivotal in ensuring your images fit perfectly within your site's design without looking stretched or compressed. Choose an aspect ratio that complements the content and layout of your website, whether it's for product photos, banners, or blog post images.

The appropriate aspect ratio to use differs from purpose to device to platform, However, there are commonly utilized aspect ratios that are a constant standard web designers, photographers and developers.

Aspect ratios are written out as a formula of width to height, such as 4:3. Same aspect ratios for two images doesn't mean those images would be the same size. For example, a 1:1 ratio would mean the width and height of the image are the same. Image's dimensions can be 320x320 pixels or 1080x1080 pixels, but the aspect ratio will remain 1:1. As another example, an image could be 1920x1080 pixels or 1280x720 pixels, but noth have a widescreen 16:9 aspect ratio in common.

For website images the most common aspect ratios are 1:1, 4:3 and 16:9.

1:1 ratio

Images with this ratio have equal width and height and are squares. 1:1 aspect ratio is commonly used on social media sites, like Instagram photos. In terms of pixels, example dimensions would be 1080x10980.

4:3 ratio

A 4:3 ratio creates a rectangular shape that's common on some computer monitors and television displays. In terms of pixels, example dimensions would be 800x600.

16:9 ratio

This aspect ratio features panoramic size making it perfect for TV, cinema, and computer screens. You'll also spot its elongated rectangular shape in presentation slides, widescreen television, computer monitors. Most smartphones record video at 1920x1080 pixels, which is 16"9 aspect ratio. In terms of pixels, example dimensions would be 1920x1080.

In order to make content fit a variety of mediums, having an easy-to-use aspect ratio calculator on hand is important. These calculators can help you calculate aspect ratios and pixel dimensions when handing off content for your website:

• Wistia

• Toolstud.io

• Image Resizer

Image Formats and When to Use Them

• JPEG: Ideal for most websites content, such as photographs and images with gradients. JPEGs offer a good balance between quality and file size. They can be compressed by almost 80% when you use compression tools. Although JPEGs do not support transparency, so you'll need to pick PNG instead.

• PNG: Best for images requiring transparency or cut out figures, icons and profile images. PNGs provide high-quality images but can have larger file sizes. You can always use the PNG format for icons, but there's a better format as you want them to stay crisp at any size.

• WebP: A modern format that offers superior compression and quality characteristics compared to PNG and JPEG. WebP is suitable for all types of images and supports transparency.

• SVG: Use for logos, icons, and illustrations. SVG files are vector-based, so they can scale without losing quality and usually have smaller file sizes. With SVG, some amazing on-page animation using code can be done, and they are so light that there won't even be any changes towards your site performance.

Scaling and Compressing Images

Scaling Images to the Correct Resolution

Scaling images to the appropriate resolution is crucial. Use image dimensions based on the maximum display size on your site and consider different devices and screen sizes. Retina displays require images to be at least double the standard resolution for crisp display.

Compressing Images

Compressing images reduces file size, which in turn improves your website’s loading time. Use tools for PNG and JPEG files, which intelligently compress images without significant quality loss. Always aim to strike a balance between file size and image quality.

Among the image compression tools there are a few browser-based tools, like TinyPNG.

TinyPNG optimizes images reducing the file size by decreasing the number of colors used. But don’t worry, It will positively affect your website in a way that the human eye won’t notice. Consider using this free and quick tool for PNGs and JPEGs.

If you’re more into apps, there’s a selection of them for different operating systems.

ImageOptim for Mac compresses images by removing unnecessary embedded metadata. This data, often an artifact of an editing process, bloats the file’s size and slows down your site. Consider using this free app for JPEGs, SVGs and PNGs as well.

RIOT for Windows reduces image file size using multiple techniques. For example, it visually reduces the number of unique colors for PNG images, removes unsupported metadata and lets you decide whether you want to keep metadata in general or not. Automatic optimization comes in handy selecting the most suitable format and parameters for you, which is a great option for those who are only starting their optimization journey.

And last but not least, JPEGmini is a powerful paid option that helps you reduce file size by analyzing the input image with a quality detector which imitates the human visual system. You can choose between desktop app and plugins that can be integrated with Photoshop, Lightroom and Capture one. JPEGmini does not alter the quality of your images and they will look exactly the same after optimization.

Now, when it comes to WordPress sites there are plenty of image optimization plugins that will compress and resize your images when you upload to your WordPress site. This means the end-users and content creators would be able to keep speed and performance of the site skipping those manual optimization steps.

You should already be familiar with TinyPNG, but did you know it is a wordpress plugin too?

If you’re a fan of the browser-based tool, streamline the process of optimizing JPEGs and PNGs on upload with this plugin. Being uploaded to TinyPNG or TinyJPG services, an optimal optimization strategy is chosen based on the content of your image. On average JPEGs are compressed by 40-60% and PNGs by 50-80% without visible loss of quality. 

It can happen that optimization should be performed on existing images too, and Kracken.io is the one capable of optimizing both new and existing images on your WordPress site.

Consider using Kracken.io for JPEGs and PNGs with file size not more than 32 MB. The plugin replaces the image files with the optimized ones, so they’re staying on your end even if the plugin was uninstalled. Along with existing and  newly uploaded images any generated thumbnails are optimized too.

Another plugin option would be Imagify. Images will be automatically optimized at the best compression level, leaving you the possibility to restore them to the original version. In case you have many images to optimize, you can resize them in bulk with async bulk optimization option. For high-quality images, Imagify has a setting that allows you to choose a maximum width for all of your images. With this setting applied, uploading images larger than that size won’t cause any issues since the plugin will do a resize during optimization.

Enhancing SEO with Proper Naming and Alt Tags

Naming your image files descriptively and using alt tags not only improves SEO but also accessibility. Include relevant keywords in both your file names and alt tags to make your images more discoverable by search engines and assistive technologies.

• File Names: Describe what the image is, using dashes to separate words (e.g., red-sports-car.jpg). Using a relevant filename, you’ll give your images a better chance to rank in Google Image Search because Google has extra content to describe the image.

• Alt Tags: Provide a concise description of the image for those who cannot see them and include relevant keywords (e.g., alt="Red sports car accelerating on track").

The right image name helps search engines understand the content and context of your visuals. There are things to aim and avoid in naming which are the following:

Avoid irrelevant filenames, help search engines and users make sense of your images.  Use descriptive and relevant names that accurately depict the content of the image, make sure it provides a clear idea of what the image is about.

Good examples of image file names:

• snowy-mountain.jpeg

• company-logo.svg

• strategy-whiteboard.jpg

• main-office.jpeg

Bad examples of image file names:

• DCS_0645.jpg

• photo0001.jpg

• Img_1542.jpg

• IMG_489E9666EAAB-1.jpeg

Carefully include targeted keywords in the image filename. Targeted keywords can further improve your SEO efforts. By incorporating keywords, you signal to search engines that your image is relevant to a particular topic or query.

Good examples of image filenames:

• seo-friendly-url-structure.jpg

• technical-seo-audit-process.jpg

• voice-search-seo-optimization.jpg

Bad examples of image filenames:

• url-url-url-structure.jpg

• technical-seo-seo-seo-process.jpg

• voice-search-seo-seo-seo.jpg

Avoid generic names and overloading with keywords. Generic names like image6.jpg or pic.svg don't provide useful information to search engines. For keywords stuffing, it can lead to a negative user experience and may potentially cause your site to be flagged as spam.

Good examples of image filenames:

• seo-content-writing-tips.jpg

• mobile-first-indexing-seo.jpg

• seo-keyword-research-tools.jpg

Bad examples of filenames:

• seo-content-seo-writing-seo-tips-seo.jpg

• mobile-first-seo-seo-seo-indexing.jpg

• Keyword-seo-research-seo-tools-seo.jpg

Alt text, also known as alternative text, is dedicated to users who may not be able to see the image. Search engines like Google also use alt text to understand the subject matter of an image, which can help improve your image's SEO ranking.

1. Follow this recommendations to achieve the best results:

2. Don't use phrases like 'picture of' or 'image of' in your alt text, as screen readers already announce the presence of an image

3. Aim for alt text of 125 characters or fewer. This ensures that screen readers can easily process the information and users get a clear understanding of the image's content.

4. Use the keywords in a natural and meaningful way to ensure that alt text makes sense to users and search engines.

5. Provide essential details describing the content of the images

Using Image Sitemaps

If your site uses image pop-ups, JavaScript galleries or other similar ways to improve overall user experience, Google can have trouble finding images not called out specifically on the webpage source code. Image sitemaps will help get your images noticed by search engines by listing their location.

Implementing Advanced Techniques

• Responsive Images: Use the srcset attribute to allow the browser to choose the most appropriate image size, improving loading times and conserving bandwidth.

• Lazy Loading: Implement lazy loading to defer the loading of images until they are in or near the viewport. This can significantly reduce initial load times and save bandwidth.

• Content Delivery Networks (CDNs): Use CDNs to host your images. CDNs can speed up image loading times by storing copies of your images on servers around the world, closer to where your visitors are.

Having one large image may sound like a good idea, a large image won't lose quality when shrunk. But it's not that simple when it comes to different viewports.

If your image is 800px wide it might look good on a 300px display. But all 800px still has to be processed which is a massive waste of bandwidth. In this case, srcset attribute may come in handy pointing the browser to different image version. From there, the browser decides which one to serve based on the device.

For CDN, the greatest advantage of using it is shortening the distance between your visitors and your website. The CDN stores cached versions of your website in different geographical locations. So when visitors from the USA come to your website, the data won't travel all the way from Europe and vice versa. It'll come from a location that's close to them.