For better website performance it’s important to find ways to decrease page load time. Usually, nonoptimized images can be a big part of slow pages. And because images can be simply uploaded in their original form, many people forget to optimize them (or don’t know how to).
In this post, I will help you and explain basics how to optimize images for your website or blog! It’s an essential step to include in your content creation workflow, and one of the most actionable methods for adding instant improvements to your site across search rankings and user engagement.
First, some basic terms…
Raster and vector image
Raster images are made of pixels (points-smallest single element in a display device). Vector images are mathematical calculations from one point to another that form geometrical shapes. To test, if your image is raster or vector, you can simply enlarge it. if you see dots it is raster if the image does not change it is the vector.
File types:
Raster: .jpg, .gif, .png, .tif
Vector: .ai, .eps, .pdf, .svg (but e.g. *pdf can also be raster)
Pixel dimension vs resolution
“Pixel dimensions measure the total number of pixels along an image’s width and height. Resolution is the fineness of detail in a bitmap image and is measured in pixels per inch (ppi).” (source)
In short:
Dimension is a size of an image in e.g. pixels.
Resolution is image quality.
What will you need?
Dimension: read on.
Resolution: for web 72dpi, for print 300dpi (dpi=dots per inch).
And now process…
1. Edit image and reduce file size
The default images produced by even an iPhone are far larger than anything you need for your website. So you need to resize them to the suitable size. Before resizing your images you can also edit and crop them.
Dimension: Find out what is the size of biggest images on your website (pay attention to the popup windows)-shown not uploaded.
For resizing your images you can use:
In Photoshop click “File” >> “Save for web” and add image size, quality. Click “Save”.
2. Compressing Your Images
Now It’s time to compress your image. Compression is the process of algorithmically removing image information that the human eye can’t perceive and can decrease image sizes dramatically. But be careful with compression you can also sacrifice image quality. You’re aiming for a balance of the lowest file size with the highest possible image quality. For compressing images, there are a lot of tools. My favorite Image Compression Tool is ImageOptim.
More tools: “18 image file compression tools tested”.
3. SEO optimization
Now your image is prepared to be published. Before you do so, take some time and also optimize it for a search engine like Google.
Essential information to add to your image are:
Filenames: try to use keywords in your image file name. For more words, you can use _ or – (don’t merge more words into one). E.g. my-dog-floki.jpeg rather than XB817A.jpeg or mydogfloki.jpeg.
Alt tags: add descriptive text when the image for whatever reason can’t be displayed. E.g. alt=”This is my dog Floki”
Those are simple and the basics steps to optimize images for your website. Hope you have learned something new and that image optimization will improve your page load time.
Leave a Reply