Optimizing Images & SEO
Affects loading speed, bounce rate, ranking, etc.
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
Image Types
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.
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:
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.
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.
Edit Aspect Ratio in Photoshop
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.
Edit image size (px) & resolution in Photoshop
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:
Other way to edit image size in Photoshop
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.
Easily select object or remove background from image 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:
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
SEO
ImageFriendly 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
SOFTWARE
Good for clients
IMAGE RESIZE - Online Software
IMAGE INFO - Chrome Extension
IMAGE SIZE EXAMPLES
Social Media - Featured Images
This are the images shown on social media when we share a page
1200x628px, jpg, saved for web, and optimized
Full Width Images
2400x1600px, jpg, saved for web, and optimized
Inside Content Images
Horizontal – max width 1500px, jpg, saved for web, and optimized
Vertical – max width 1000px, jpg, saved for web, and optimized
Slideshow Galleries
Important considerations:
- if you are preparing images for your slideshow galleries: make sure they are all the same height recommended 1500px, regardless if they are horizontal or vertical
Blog Post Images
- if you are preparing images to upload inside a blogpost, make sure they are all the same width, recommended 1500px, regardless if they are horizontal or vertical
