When we talk about optimizing images for the web, we mainly refer to:
- Making images visually appealing;
- Ensuring images load quickly;
- Making images easy for search engines to index.
High-Quality Images
You don't necessarily need to be a photographer to use beautiful images on your website. Nowadays, there are plenty of reputable sites where you can download high-quality free images.
The images you download are usually large jpg files. You must reduce their size and weight without losing quality to optimize them.
Using the Right Format (jpg or png)
The two most common and widely used website formats are jpg and png.
Each format has its pros and cons, but here's what you should consider:
- Photographs should be saved and uploaded in jpg format. This file type can handle all the colours in a photo in a relatively small and efficient file size.
- Graphics, especially those with large areas of flat colour and transparency, should be uploaded in PNG format. This includes most infographics, images with text, and logos. PNG files are of higher quality than JPG and are generally larger. PNG files, like SVG, treat areas of colour and text with sharp lines, allowing them to be enlarged without losing quality.
Resizing Images to Optimize Page Speed
Regarding web images, it's about finding the right balance between size and resolution. The higher the resolution, the larger the file size. In print, using large images is beneficial, but high-resolution and heavy photos can slow down page loading times for the web. This damages the user experience and search engine ranking, especially on mobile sites.
What do you do if an image is too large for your website?
Photos taken with a camera can be several MB, much larger than what is needed for the web. Even stock photos tend to be large files. If the image you want to upload is larger than 1MB, here's what you can do to reduce its size:
- Resize the image: If the image is about 5000px, you can safely reduce it to 2000/1200px without losing quality on the website.
- Reduce the resolution: Most software automatically compresses the image resolution to a "web-friendly" size (72dpi and 92dpi).
Rename Images Properly to Help with Indexing
Most people who upload images to the web don't think much about file names. You may come across images on websites with names like "Photo1.jpg" or "Screen Shot 06-02-2021 at 15:41.15".
However, it's very important to rename images before uploading them, as this makes the images easier to manage and more relevant to the theme of the site or page, helping with SEO. It's best to use only lowercase letters and numbers separated by hyphens rather than underscores and avoid using punctuation.
Fill in Captions and Alt Text
Once images are uploaded to websites, people often forget to add additional information. However, just like the file name, this information can boost SEO. Alt tags (or alternative text) won't be visible to the average visitor, but they give search engines a basic idea of what each image is about. The alt text should be a sentence that describes what the image shows, preferably using a targeted keyword.
By considering these factors for your website's images, you'll improve their appearance, help with faster page loading, and ultimately benefit your website's SEO.
