One of the biggest mistakes I see on websites that negatively impacts its search engine ranking and user accessibility is a lack of proper image optimization for the web. It’s no secret that we are a visually based society. Images play a significant role in engaging our audience and driving our message. Images serve as a refreshing break from the monotony of reading line after line of information and, when used properly, are adept at conveying a message instantly.
Image Optimization – What is it?
Image Optimization for the web is the practice of renaming, resizing, and compressing images for website use with the primary goal of improve your search engine ranking position (SERP). You could upload an image onto a website “as is”, but it doesn’t make much sense to do so. Taking a few minutes to resize, rename, and compress an image for web use is an important aspect of SEO.
How to Optimize an Image for the Web
Images that are optimized for a website are sized correctly, compressed, and named with a very brief description of what the image is. Ideally, the image filename should also include a related keyword or two.
Naming an image for a website or social media
The most common mistake I see on web images is that they aren’t renamed. Instead, many users leave the default image name, such as img_487.png. The search engines are built to search filenames as well as the content within.
A few things to note:
- Image names should describe what the image is.
- Image names should include the name of the business when possible.
- Image names should be lower case.
- Image names should use a hyphen (-) between each word rather than an underscore(_).
- Abbreviations should be avoided when possible, especially in regards to keywords. The exception is when the abbreviation is more likely to be searched for than the full text. For example, “iot” rather than “internet-of-things” or “ma” instead of “massachusetts”.
- Each image name should be unique.
Examples of good image names:
devadigm-cape-cod-web-developer-logo.jpg
yd-red-sox-2019-yearbook-cover.jpg
amperageapps-creates-iot-solutions.jpg
Sizing Images for the web
The next mistake I see often is images not being resized properly or compressed. The default settings on digital cameras and mobile phones are set to take large images. I’ve received images from clients that were over 5,000 pixels wide!
Why resize a web image?
Speed – When a web page loads, the browser is opening and loading several files. Each image displayed on a page is an individual file and the size of a file impacts loading time. Reducing an image size from its original large size to be only as wide as needed reduces the size of that file which in turn reduces the amount of time needed to load the file and therefore the page. Page load speed is an important component of search engine rankings and should always be considered throughout the design and development process.
Layout – Some images need to fit in certain places on a website based on the design. Knowing the dimensions that are needed and resizing your image accordingly will help maintain a clean, professional look within your design.
Cropping – Oftentimes images should be cropped so that only the important element is displayed more prominently. Additionally, cropping helps remove unwanted items from an image and puts the focus on the desired object(s).
Another reason I find myself cropping images often, especially logos, is to remove extra white space. When developing a website, it’s best to have as much design control as possible, including spacing. Having unnecessary extra space around an image can result in an undesirable look on the page. Compare the 2 versions of this logo below. Margins can be added with code if desired but cropping out the extra white space provides options.
Web Storage – Website files are stored on the servers on the domain hosting account. Servers have a finite amount of space and website owners pay for hosting plans that have a limited allowable amount of space. Reducing the file size of your images can help your website stay within your storage limits and avoid additional expenses.
What size should the image be?
The short answer is that an image should only be as big as will be needed. When considering image optimization for web design, I start with considering the image size on large desktop screens. How much space on the screen will the image fill? Is it a full-width image, like on our homepage slideshow? Or is it a smaller image like the logo in the header of this page? We size our slideshow images as 2048px wide. I have found very few use cases where an image needs to be wider than that. However, our logo doesn’t need to be very big, so it is sized at 240px wide.
An approach that helps me is to think about the image width as a percentage of the screen. Some websites, especially older ones, were developed with a fixed width, such as 1024px. This makes it easy to determine image sizes. If you want to have 3 columns of images, you know that they can’t be more than 341.333px (1024 / 3) wide. If you plan on having some margin space between the images, you could size them at 335px wide.
Another often overlooked aspect of resizing images is consistency. If you are optimizing images to go on the same page, such as a photo gallery, take into consideration how the design should look. Oftentimes the design called for a clean, uniform look where all the images in a row are the same height.
Other times it’s only important that the width of each image is the same to fit uniformly in columns.
And other times it’s important that both the width and height are consistent.
Should I use different image sizes on mobile screens?
Responsive design is an integral part of web development due to the sheer number of users who browse the web on mobile devices, tablets, and other various screen sizes. Trying to load a 2048px wide image on a phone that is 400px wide would be a significant waste of resources.
There are also WordPress plugins, such as Smush and SG Optimizer, that create multiple variations of an image with scaling sizes when an image is uploaded. Then when the browser reports the screen dimensions, the appropriately sized image is loaded.
Browsers also scale images to fit the space on the screen. If an image is 800x800px square and fills 50% of the screen width on desktop, when loaded on a screen that is 375px wide, the image will be displayed as approximately 187×187. This should be sufficient for your design, but this is an example of wasted resources that can cause a mobile site to load slowly.
There are cases where a different version of an image or different image altogether can be used on specific screen sizes. For example, I didn’t want the large images and the script code needed for the slideshow transitions on my home page to slow down the page load time on mobile devices. So after looking into a few options, I decided to keep it simple by replacing the slideshow with one static image on screen sizes that are less than 769px wide. This was done with a little CSS code.
Image Formats
According to Angela Rutzick from A-Type Marketing,
A jpeg file (Joint Photographic Experts Group) or commonly spelled “jpg” is best used for digital photography and online images because of its careful balance of file size and image quality. When you save an image as a Jpg, the file size is compressed at a 10:1 ratio which makes it a good choice to use for web images. One drawback of a jpg file is that each time you open and save a jpg it loses image quality.
A PNG (portable network graphic) is great for text and line drawings. The best feature about a png files is that it can have a transparent background making it easy to overlay images and colored backgrounds. The biggest advantage of PNG over JPG is that the compression is lossless, meaning there is no loss in quality each time it is opened and saved again.
So basically, neither format is better than the other. It’s simply a matter of which one is better suited for your needs. So when in doubt, use a jpg for great looking images and a png for crisper, readable text.
Image Compression
The last item in this article regarding how to optimize an image for the web is regarding Image Compression. According to Techopedia, “Image compression is the process of encoding or converting an image file in such a way that it consumes less space than the original file. It is a type of compression technique that reduces the size of an image file without affecting or degrading its quality to a greater extent.”
Compressing images is a great way to reduce the size of the file. Be cognizant of quality, as compressing an image too much can result in an obvious reduction in quality.
For a real-life example, we can look at a project I worked on recently. The home page of a website was loading slowly. I ran some tests and reviewed the site and located a few issues. As you’ll notice in the screenshot below, one of the issues was that “Optimize Images” had a grade of only 25%! I looked at the images and found that 3 of them were large files. I had my Graphic Designer resize the images to the correct size and then compress them. The second screenshot below is a test of the same page on the same day after replacing the 3 images with the compressed versions. What a difference! The score for image optimization increased to 80% and the page load time was reduced by a full 2 seconds!
If you look at the Total page size, we really didn’t reduce the size very much. This is proof that every kb counts!
Summary of Image Optimization
Images play an important role in search engine rankings. While working on a webpage, be sure to think about proper image optimization for web use.
- Use a proper naming convention and format
- Use a web friendly file format such as .jpg or .png
- Resize and Crop to fit in the desired space
- Consider Responsiveness
- Compress image files
If you’d like to see how your website is performing, request a page speed test report. We will run tests on your site and send you the results along with some recommendations for improvement.
If you’re ready to up your game and really improve your websites search engine optimization, purchase one of our SEO packages and let us drive more traffic to your site!
