Optimizing Images & SEO
Table of Contents:
1. Why images need to be optimized for the Web?
What is image optimization?
Image optimization is about reducing the file size of your images as much as possible, without sacrificing quality, so your page load times remain low. It’s also about image SEO—that is, getting your banner and product images to rank highly on Google and other image search engines.
Image optimization means ensuring your images look flawless on desktop and mobile. And that they don’t hinder web performance.
The goal of image optimization is to create high-quality images with the lowest file size. Three main elements play a role here:
Image file size (JPEG vs. PNG vs. WEBP images)
Image compression level
Image height and width
By finding the balance between the three, you can reduce image size and improve website performance.
Why do we optimize images?
Images are the largest contributor to overall page size, which makes pages slower to load. Data from HTTP Archive reveals that unoptimized images make up 75% of a total webpage's weight , on average. This can have a negative impact on your website performance.
Image optimization helps lower your webpage’s weight and is a core tenet of good ecommerce web design , which results in the following benefits:
Improved website speed
Image optimization for web and mobile exists to make web pages load faster. They create a better browsing experience for shoppers. Should there be a mere two-second delay in your page speed, your bounce rate can increase by 103% .
Page speed is how fast content on your page loads. It’s often described as:
- Page load time, or the time it takes to display the content on your page.
- Time to first byte, the number of milliseconds it takes for your browser to receive the first byte of information from your webserver.
Google has suggested that site speed is one of the signals used by its algorithm to rank pages. Research from Moz shows that Google may specifically measure time to first byte when it considers page speed. A slow page means search engines crawl fewer pages with their crawl budget, which can negatively affect your indexing.
Better browsing experience
Page speed is important to a visitor’s experience. People can detect delays as short as 1/10th of a second. Anything longer than that doesn’t feel “instant.” Delays of one second are enough to interrupt a person’s thought process.
Pages with a longer load time tend to have higher bounce rates and lower average time on page. Reducing page load times by even one second will improve your user’s experience. Improved user experience and interactions with your site have a positive impact on search engine rankings, which can improve engagement, conversions, and customer retention.
Improved search performance
Optimized images help both readers and search engines understand your website better and get your content seen online. Recent data shows that images are returned for 32% of search queries on Google. Image optimization can help rank your images in Google’s Image Search, which can bring more traffic to your website and build your brand .
What’s more, visual search is becoming more important, as seen with Google introducing a new search function that combines images and text into one query . Some 62% of Gen Z and millennial consumers want visual search more than any other new technology.
2. IMG case study
Original Image
5472 x 3648px - 704kb
Google Speed Test Scoring- 1
Resized Image
900x350 - 61kb
Google Speed Test Scoring - 2
What can we do?
Ask developer / designer for the proper sizes for each image on the site.
Inspect the page code
Take a screenshot, crop the image
3. Image formats available
Save your images in the right file type
- WEBP (*)
Supports 24-bit RGB color with an 8-bit alpha channel. Transparency is allowed. This is the best image format if you want your site to load as fast as possible and it's actively promoted by Google.
- PNG-8 (8 bits) - 256 colorsPNG-8 will give you the smallest file size for graphics with limited colors.
- PNG-24 (24 bits) - 16 Millons colorsBetter quality images with all the colores. Transparency is allowed.
- JPEGJPEG is the file type for photos, as well as graphics that have many shadings of colors.Reduce the pixel size of your image so it’s no larger than it will display online.
(*) WebP is a modern image format that provides superior lossless and lossy compression for images on the web. Using WebP, webmasters and web developers can create smaller, richer images that make the web faster.
WebP is an image format developed by Google in 2010. It was created to be an alternative to formats like PNG and JPG, producing much smaller file sizes while maintaining similar image qualities.
WebP lossless images are 26% smaller in size compared to PNGs. WebP lossy images are 25-34% smaller than comparable JPEG images.
WebP Support
WebP is natively supported in Google Chrome, Safari, Firefox, Edge, the Opera browser, and by many other tools and software libraries. Developers have also added support to a variety of image editing tools.
4. Online tools
WebP Tools
We have many options too convert images to WebP, here is the one we choose.
AnyWebP
AnyWebP has two options: Online and Offline and it allows Batch Conversion.
Remember:
Before converting to WebP.
We need to modify the image size to the proper size for the sections of the page we are creating it for.
Online Version
Tutorial on how to use it:
Download AnyWebP for MAC and WINDOWS.
How to use the app:
Other options (Good for clients)
IMAGE RESIZE - Online Software
IMAGE INFO - Chrome Extension
5. Resizing images in Photoshop
5.1. Adobe Photoshop Convert (Single & Bulk)
Single JPG to WebP in Adobe Photoshop
Open JPG file in PS, head to File>Save as.
Select WebP as output format.
In the WebP options, select lossless or lossy compression, hit OK.Here we can download the quality to 70 or less and the image should still look fine.
5.2. Multiple JPG to WebP in Adobe Photoshop
Open a JPG file in Adobe Photoshop.
Head to Windows>Actions.
Create a new set and give a name to it.
Create a new action and give a name to it, hit Record, now it will record your actions and automate it later.
Back to the JPG file you opened in Photoshop, head to File>Save as. Select output as WebP and use the image options.
Once you have saved this JPG file to WebP Format, head to the Actions and stop the recording.
Head to File>Automate>Batch.
Select the JPG to WebP action you just set up, choose input folder and output folder to start the bulk conversion. Hit OK, all of your JPG images in the folder will be converted to WebP format.
5.3. Edit Aspect Ratio
Open the Image in Photoshop.
Decide On the New Aspect Ratio You Want.
Select the Crop Tool (C)
Choose the Aspect Ratio From the Drop-Down Menu.
Set a Custom Ratio.
Set the Width and Height Dimensions.
Use the Crop Box to Crop the Image.
Confirm the Crop.
After setting the right Aspect Ratio of your image, you should resize your image in the exact pixel size needed for each platform/usage. Also check and edit its resolution.
5.4. Edit image size (px) & resolution
Open the Image in Photoshop.
Go to Image > Image size
Check the proportion lock is on, and 1st set the resolution (it should be 72ppi for digital/web usage).
Then set the width and height. In this example, we previously setted the aspect ratio to 16:9, so an image size that uses this ratio could be 1920x1080px.
Click OK to confirm the edition.
Then Save/Export in the format needed.
Original image:
After setting new parameters:
5.5. Other way to edit image size
Sometimes we need a specific size for an image that doesn't correspond to an actual aspect ratio. How to get a new image size for an image:
Open the Image in Photoshop.
Create a new file with the parameters you need: File > New
Set width / height / resolution / Color mode / Background etc.
Click CREATE
Select, copy and paste the original image inside this new doc. and Edit > Transform > Scale to fit the new artboard.
6. Select object or remove background in Photoshop
Open the Image in Photoshop.
Select Magic wand tool
On the top bar click on Select subject
This automatically selects the main object on the image.
Edit > Cut, to get the selection removed from the rest of the image and paste ir on an empty layer, or over another image.
If you want to get the background selected: Select > Inverse. And you can easily erase the background.
Object selected:
Selection > Inverse and cleared background:
7. LAZY Loading
Lazy loading is a technique used by web pages to optimize load time. With lazy loading, a web page loads only required content at first, and waits to load any remaining page content until the user needs it. Lazy loading reduces the time it takes for a web page to open because the browser only loads a fraction of the content on the page at a time.
Lazy loading can occur on different moments in the application, but it typically happens on some user interactions such as scrolling and navigation.
Google Images Example
HUBSPOT
WORDPRESS
By Coding
<img src="image.jpg" alt="..." loading="lazy">
<iframe src="video-player.html" title="..." loading="lazy"></iframe>
By Plugin
8. SEO
Image Friendly Names
Same way as we think a good slug for a page we need to do this for the images.
Naming images for SEO will improve your search engine rankings and website traffic!
It literally will take just seconds.
This is something that we should be aware of all the time.
Images needs to have proper descriptive names to add value to the SEO
image 4582.jpg (don't use spaces)
happy-couple-painting-wall.jpg
how-to-paint-your-bedroom.jpg
ALT Text
Alt text, short for alternative text, is a small piece of text intended to describe an image, photograph, chart or any other picture on a website. The alt text only appears in the source code of your website, as a line of HTML code also known as the alt attribute.
As search engines can’t actually ‘see’ pictures, at least for now, they check your site’s code to find out what’s on your photos. Alt text allows search bots to understand your images and the context in which they are placed, and thus index them more accurately.
image 4582.jpg
Happy Couple Painting Bedroom Wall
How to Paint your Bedroom
Wordpress Image Alt Text
Hubspot Image Alt Text
