If your website takes 20 years to load and you don’t know what image optimization is; you’re at the right place! Choosing the right image format can affect the speed of your website which means more angry people that leave your site. After reading and implementing the information here, your site should speed right up and you’ll have more happy visitors!
Speed and Appearance
The best image format really depends on what you’re trying to do with the image. Revamped Websites wants to get your website:
- Faster
- Looking Better
- Optimized for success
That’s why we’re focusing on the best image format for website speed and best image format for appearance.
(Anecdote – Skip if you don’t care. You won’t hurt my feelings)
A few years ago, I never really cared to see what image format I was using. I was only uploading my Facebook profile picture and it didn’t matter there. Sometimes I would notice the couple of random letters after the “.” under the image, but I didn’t know what they meant. I figured it was like bread companies; why not add another one to the hundreds we already have in the bread aisle…
Sometimes, there would be a website telling me that the image had to be a certain format in order to upload it. I would then google how to change the image from a .j-whatever to a .p-whoknows. This got me by for those situations.
Even when I began coding and building websites, I only looked at the .png and .jpg at the end of the image name when I had to make sure they matched across my site’s code.
This all changed when I made a website that was full of images. I added all of these awesome images to a single page to showcase a client’s artwork. When I went to look at the website for the first time, I think it took about 5 minutes to completely load and show all of the images.
This was when I realized that the image format mattered and I needed to find the best one to speed up this website.
Why .jpg (.jpeg) is usually the best image format for your website.
jpg (or jpeg) is one of the most used image file types around the internet. This is what is used most of the time due to the ability to compress its file size. This means that adding 20 images as a .jpg to one page shouldn’t slow down the loading speed drastically. There are multiple reasons why you want your website to load fast. We’ll go over those in a later post.
The smaller you’re able to get the file size of your image(s), the faster your site will be.
Think of your website as a person carrying a bag up a hill. The more full and heavier the bag, the slower the person is going to move up the hill.
When to use .png
The other type of image format you’ll often see is png. .png is used for images that need better quality. This is also great for when there is more text that needs to stay readable in the image. Plenty of images you get with the background removed will be png as well. Unless you have dozens of these on a page, it’s easier to just keep them as a png.
The downside to the .png is that having too many of them on a page will drastically slow down the loading time for the website. This leads to frustration and people leaving your site. This is what all of my images were when I realized the website I was building was slower than molasses at the North Pole.
Changing Your Image Format
So, what if you have 20 or 100 images to change from a .png to a .jpg? There is a way to do it if you open the image on your computer, go to file, export, change the format to jpg. Now you have to do that to everyone individually and that isn’t worth your time.
Instead, I use a free websites like png2jpg.com and cloudconvert.com/jpg-converter. These sites lets you take multiple .png or other formats and drag them into it’s converter. In a few seconds, all of the images are .jpg. Then you upload them and add them to your website.
There are plenty of other image converters online. Just search “image converter” or “to jpg (or other file format)”
** I also remove the original image files from my computer if I don’t need them. This just saves space on my computer.
Compressing Images
There is a final step you can and should take to make your images optimized and keep your site running fast. This is compressing your image files.
There are also free websites that help with this step. I have been using compressjpeg.com and tinypng.com. These allow you to drag a hand full of images into their converter and it returns your compressed images.
The changes in image quality are rarely noticeable after they’re compressed. If there is a noticeable change with the quality, just keep your original image. A few images that aren’t able to be compressed won’t slow down your site.
