When it comes to website speed, big images on a website might have a significant impact on loading time. Google gives more preference to pages with smaller images, i.e., for pages that you optimize for speed.
My go-to camera on my hiking trips is my old Sony A6000 mirrorless camera. It is lightweight, and easy to carry when I’m outdoors. But file sizes can be huge depending on settings and file format.
I usually snap hundreds of pictures on a hike, from which I end up to 10-20 great photos that I want to keep. But what about if I’m going to upload images to the web? How to optimize those huge files for online use? Let’s make a hands-on test.
More than 50 % of browsing online is mobile browsing, and you don’t want to wait for the site to load when you are on mobile.
So it is becoming more and more important to choose the right pixel dimensions for your images and to compress them.
Of course, there are many ways on how to optimize your site’s speed, but since images are one of the most critical factors, let’s concentrate on images now.
There is a dilemma: we want to have images on a webpage to make it more attractive, but at the same time those images make the users go to another site if the page loads too slowly.
Let’s take a look on some WordPress plugins, and let’s talk about what you can before you upload the image to your WordPress site.
Which Image Format Do I Choose?
If you take photos with your phone or with your digital camera, you have already come across the different digital file formats.
You will have to deal with formats to transfer images to your computer and to edit them, and to upload to your website.
But which image format is best for you? It all depends on the result that you want and how much control you want to have over editing your images.
Below are the most common image formats used by digital cameras.
1) JPEG/JPG
Jpg is the most popular image format used not only in digital photography but also in web design. You can get pretty small file sizes with Jpg because it compresses the image. You can determine the compression level when you save the file. And as it’s so common, you can open jpg-files with any computer and without the need for special software.
There is a downside, however, since Jpg is a lossy format, which means that details are lost if you continuously edit and save the image due to the Jpg-compression.
JPG and JPEG is the same thing. The extension just might be .jpeg or usually .jpg
Jpg-files are good for colorful photographs, but not that good for line art, like logos.
2) PNG
Png is a lossless format. The image files get smaller due to compression, but this time it is lossless, so you don’t lose any details of the image.
Png is ideal for detailed graphics, like logos. You can also use Png-format during editing, so you don’t lose any details.
For colorful photographic images, Png is not as good as Jpg. Files are much larger on that kind of pics. Png is good for screenshots because they usually are a mix of text and images.
And one important thing to note for web use – Png-format supports transparency. So you can have a logo with a transparent background sitting nicely on top of a websites colored top banner.
3) GIF
Gif-files are compressed with lossless compression. You can edit and save the file without losing details.
There are two use cases for Gif: 1) You can make animated images with Gif. 2) You can make tiny files if you have pictures with only a few colors
And the use of animated images is what Gif is known for nowadays.
4) WEBP
Webp (“Weppy”) is a new format developed by Google. It was designed specifically for the web. It can use both lossless and lossy compression. It has excellent image quality with minimal file size.
But as it is such a new format, you don’t have that much support for it. For example browser support is limited, as well as aid in image editing.
So webp is the file format that we use in the future, but don’t use it yet.
Other formats for offline editing
TIFF
Tiff-format can save more details with better image quality, but Tiff-files can be huge
RAW
Photographers use Raw-images. Files are unprocessed, and you convert them to your editing software with your computer. It gives photographers more control in editing them later on.
Optimize images
What do we mean when we talk about optimizing images? We usually mean decreasing image file size, which in turn speeds up the load time of the page. You can also think it as to make images look good, and to create images that search engines can find.
Here we concentrate on decreasing the size of the images. You need to find the best balance between the lowest file size and acceptable quality.
1) Optimize before uploading
The best option is to optimize your images for the web before you upload them to your website. This way you can crop and rotate and manipulate the image on every way you want.
There are a lot of programs to choose from. Some are paid, some are free. Some tools like Photoshop are huge programs to edit whatever you want in your photographs.
- Photoshop (monthly payment with Adobe Photography Plan, around USD10)
- Affinity Photo (one-time payment around USD50)
- Gimp (free)
- Paint.net (only Windows, free)
In Photoshop you can export individual files:
File > Export > Export As > Jpg (change the quality suitable for your needs, try for example 20 %)
or batch process:
File > Script > Image Processor (quality, enter a value between 1-12, 1 being the lowest)
Example of the file sizes:
- original file was from Unsplash.com 3870 x 2585 pixels, file size on disk 3.3 MB
- Cropped and exported from Photoshop to 800 x 450 pixels, with quality 20%, file size on disk 87 KB
File size is dependent on what kind of image you have – has it areas with solid colors and so on.
2) Optimize after uploading
WordPress plugins do a great job nowadays on image compression. It is entirely the easiest way to optimize your site speed. Of course, you don’t have that much manual control as you have with image editing software, but if you want an easy solution then use the plugin.
There are a lot of different WordPress-plugins, but my go-to tools are:
- ShortPixel Image Optimizer By ShortPixel
- Resize Image After Upload By ShortPixel
- Enable Media Replace By ShortPixel
You can compress images online and download them to your computer:
shortpixel.com/online-image-compression
For example, I had accidentally uploaded a file with big size to one of my websites (File size: 579 KB, dimensions: 1000 by 575 pixels). After installing and running Shortpixel, file size was reduced to 127 KB, and there was no noticeable difference in image quality.
Do you need to think about DPI?
For digital images that you use online, no. DPI is a physical aspect of a printer (it stands for Dots per Inch). When printing it is critical to make sure that the DPI is higher or equal to the number of pixels per inch in the source photo.
When you use images only on computer, and on a web page, the DPI doesn’t count. For digital images we need to talk only about image size, as how many pixels we have in our image. Example images on this article are 800 x 450 pixels. No need to mention DPI at all.
Do optimizing images really speed up your site?
I tested this with two pages — the first one with three images that were not optimized, and the other with optimized images. Both pages had about 1000 words of filler text.
Test results from gtmetrix:
The speed increase wasn’t as good as I was hoping for, but anyway, there is a difference.
The test pages were on this same site, and results are not that good. There is no need to look at the overall page speed, just the difference (I obviously need to tweak lots of other settings too to make pages load faster).
So if you are optimizing your site for speed, the most accessible place to start is optimizing images. Then you can concentrate on other factors.
