Optimizing your images for use on your website can improve your website’s loading time, enhance the visitor experience and increase your SEO.
More and more, websites are using large, beautiful images to catch a visitors attention. We are visual creatures after all. Rich and engaging images help you present products and in telling your story. They help to add interest to a blog and create an emotional feel to your website. As the old saw goes, a picture is worth a thousand words.
Adding images to your website may seem straight forward. Take an awesome pic with your phone/camera, upload it to your website and then place it as your blogs featured image. Easy peasy, lemon squeazy.
Man, does it look great! Nice and sharp and it just works with this new blog!
One problem, that image you uploaded will slow down your website, hurt your SEO and could cause your server provider to up your bill.
Steps on how to do it right.
Optimizing your images is a balance between image quality and its actual file weight. You want that image to look nice and sharp on your page, but you also want it to load as fast as possible.
There are four image attributes that determine how well your image is optimized for web use.
- Image dimensions in pixels – Sizing the image to fit the space it will be used for.
- Image file type. – Gif, JPEG and PNG
- Image file weight. – As a rule, you want to keep your image file size weight under 120 kb for large images (1920px & up) and even lighter for smaller images. For most images, around 50 kb is best.
- Image quality – Images need to look as sharp as possible while being balanced by the previous three attributes.
Step 1: Use the correct file type.
For the web, there are generally 3 types of image file options. Gif, JPEG and PNG. And believe it or not, choosing the correct one can make a huge difference. As a simple guide:
Use JPEG when:
The image has a lot of color, color gradient and shading. Like a photo of a person, place or thing.
Use PNG when:
The image is of a logo, or has a lot of solid color. This image file type also supports transparent pixels.
Use GIF when:
The image is of a logo, or has a lot of solid color. This image file type supports transparent pixels as well as animation.
Step 2: Sizing your image for the space it will fill.
A standard iPhone 6 photo is captured at 3264×2448 pixels, and its file size weighs in at around 2.7mb. DSLRs and other phone cameras can be even larger!
Considering most people will be viewing the image on a screen that is 1920×1080 pixels or smaller, uploading it at its original size is overkill.
You want to know the size of the image you actually need. Are you using it for the blog featured image? For the Main page Slider/Hero image? Or as just an additional image in a blog. Each of these elements will require a different image size. This can be different from one website to another. Take the time to learn what image sizes you need for each element of your website that uses them.
We have a prepared list of free photo resizing and optimization tools at the end of this blog.
Step 3: Optimizing your images file weight.
Optimizing an image for the web is essentially reducing the file weight while keeping the image quality. Reducing the image size in pixels and choosing the correct image file type helps quite a bit.
You can reduce file size even further by reducing its file weight.
This step can have dramatic results. Images can include information other than just the pixel information. It often includes metadata about the camera used, lens, model, color settings..etc. This is all bloat and not necessary to a good looking image on your website. Example:
Rubber Ducky - 96 kb
This 400x400 pixel image was saved directly as a jpeg, with no file weight optimization applied. And at 96kb, is pretty heavy considering its pixel size.
Rubber Ducky - 20 kb
After web compression, this 400x400 pixel image is 75% smaller in file weight with no obvious decrease in image quality. This file will load much faster.
Saving an image for web in order to reduce the file weight depends on the application used. Adobe Photoshop, GIMP and Affinity Photo all have built in ‘Save for Web’ options.
Save for Web Photoshop – View Tutorial Here.
Save for Web GIMP – View Tutorial Here.
Save for Web Affinity Photo – View Tutorial Here.
If you want a simple & free option, you may try Compressor.io here.
Step 4: Using the image File Name, Title & Alt Text for SEO success.
Optimizing your image for size and file weight both help you SEO. Google, for instance, will list a page with optimized and properly sized images that load fast OVER a similar page with unoptimized images that loads slow.
You can improve your SEO even more by taking a little bit of extra time in creating descriptive, keyword-rich file names. In addition, using Wordpress’s Title text and alt text fields for your images to add additional keywords and descriptions is very useful. Search engines not only crawl the text on your website, they also search for keywords within your image file names.
Descriptive File Name
You could use the generic name that your camera gave to the image such as DCMIMAGE1005662.jpg. However, it would be much more effective to name the file: 2009-Ford-Mustang-Custom-Red.jpg.
Using WordPress Title & Alt Text
Title & Alt tags are a text alternative to images when a browser can't properly render them. Adding appropriate alt tags to the images can help your website achieve better rankings in the search engines by adding keywords with the images.
Free Tools for Resizing and Optimizing Images:
Resizing an image can be easy, and there are many tools to help you with it. Importantly, you don’t need to purchase a license for Photoshop.
1) MAC – iPhoto – A simple basic photo editor that comes already installed on your Mac.
2) Windows/Mac – GIMP – This has been a long time free alternative to Photoshop. It takes a little time to learn, but it gives you a lot of control in editing your images for the web. You can use GIMP to optimize your image as well.
3) Windows – Riot – This program allows you to resize and optimize your image.
4) Compressor.io – This is a web-based uploader that allows you to upload an image, optimize it and then download it. Supports jpeg, png and Gif. It includes a before/after image view so you can see how the image quality is affected.
Professional, and cheaper, alternative to Photoshop.
Affinity Photo – (Mac only for now) If your wanting a more professional photo editor but don’t want to shell out $20 a month to use photoshop, there is a new alternative. Affinity Photo sports a modern interface and tools to really work your website photos. Its a one time payment. Currently its Mac only, but they do have a Windows version in Beta.
So, you’ve been convinced and starting today your going to optimize like a boss. BUT what about all of the images you’ve already uploaded? What can you do about those? There is a solution at hand in the form of ‘TINYPNG’ a WordPress plugin. Read more about it here.