How to Optimize Images for Your Website

In this day and age, it is nearly impossible to imagine a successful website that contains nothing but text; and it is not without reason. After all, a picture is worth a thousand words, and here’s the proof of that. According to the research, the human brain processes visual information better and faster than text. Plus, the vast majority of people tend to remember what they saw instead of what they read.

how-to-optimize-images-for-website

Images, infographics, and other types of visual content make a website look more professional and appealing, no matter what niche it belongs to. It is a great place to showcase your works or demonstrate the goods that you are selling.

Not to mention that most people would simply be reluctant to buy online a product that doesn’t have any photos; even if you provide a beautiful and incredibly detailed description. It’s like buying a pig in a poke! Even blogs, which are supposed to be mainly focused on the text, perform a lot better when they include a fair share of visuals.

In other words, visual content has become an integral part of web design. If you’ve acquired a brand new website recently or you are currently redesigning your old one, chances are you’ll have to fill it up with some pictures.

The challenge here is that images of the wrong size might negatively affect the loading speed, which in turn leads to bad user experience, indexing issues, and low ranking in search engines.

The other unpleasant thing that is bound to happen is if you upload a large, high-resolution photo, it is going to get compressed and shrunk down automatically by the browser. This kind of compression and size reduction usually affects the image quality in a bad way: your stunning pictures are going to look blurry and pixelated. That doesn’t exactly scream professionalism, does it?

If you wish to avoid all of these things, it is not just important, but necessary to optimize your images before uploading them onto your website.

Use the correct format

The wide variety of different image formats that exist nowadays can be rather confusing. But there are only a few that you are most likely to use on your website: JPG, PNG, GIF, and SVG. That said, GIF and SVG are not as common as JPEG (JPG) and PNG.

JPEG is the most popular image format that supports both lossy and lossless compression, handles colors well, and, in most cases, produces files of a reasonable size. It is also possible to compress JPEGs without a significant loss of quality, which means your images will look great without taking too much memory space. If you need to upload photos to your website, it is better to save or convert them to JPG.

PNG images tend to have more details than JPEG, but they are also larger. This format is ideal for graphics, icons, infographics, pictures with a lot of text, since your letters, lines, or areas of flat color will look clean and sharp. Unlike JPG, PNG supports transparent backgrounds, which is why it is commonly used for logos. Please note that there are two types of PNG:

PNG-8 supports only 256 colors and offers limited transparency, but produces files of smaller size.

PNG-24 supports16 million colors and allows you to set the translucency of pixels; hence better transparency in comparison to PNG-8. However, the size of the files is going to be much larger.

It is better to save PNGs as “24 bit” format than “8 bit” because of better quality and a broader range of colors. But if your picture doesn’t require such a vast palette, you should go for PNG-8 and reserve some memory space.

Find the right size

Let’s move on to the most important aspects when it comes to optimizing images for the web: size and resolution.

High-resolution photos look amazing. You can zoom in and see a lot of tiny details. Everything is nice and crisp. But the file size of a high-resolution photo is always large; it can be even huge, depending on what camera was used to take them. Large-sized images are the worst enemy of your website’s loading speed since they are going to take forever to fully load; especially in the mobile version. Seeing that a lot of people tend to visit websites from their mobile devices, while they are commuting or having a break, that’s not exactly a good thing.

Figuring out the right size for your visual content is rather simple. All you need to do is find a good balance between the actual file size, pixel dimensions, and resolution.

File size is how many bytes a file takes up in the memory storage of your computer or phone. For web pages, an image of 13MB (megabyte) is huge. An image of 7 or 8 MB is also considered to be quite big; especially if you need to upload quite a few of them. But an image of 200 KB (kilobyte) is a lot more palatable.

Take a look at this comparison:

40 images of 8 MB each = 320 MB.

40 images of 200 KB each = 8 MB.

That’s quite a striking difference, isn’t it?

You need small files for your website to load properly and quickly. And to decrease file size, you need to reduce image dimensions and resolution.

Image dimensions are the height and the width of your digital image measured in pixels. For instance, a lot of Canon cameras produce photos that are around 6000x4000px, which means they are 6000 pixels on the longer dimension and 4000 pixels on the shorter dimension. If a photo is vertically oriented, then its height is going to be 6000 pixels. But if it is horizontally oriented, then it is the width that is going to be 6000 pixels. Nevertheless, these dimensions – 6000x4000px – are too big for use on the web.

Think where you want to place an image on your website. Is it going to be a large banner or a background? Or maybe you want to insert a portrait of yourself into the sidebar?

This is important because depending on the purpose, you can resize your images differently. For example, if you want to upload a horizontally-oriented photo as a background, you should resize its width to 2500 pixels. An image of this size is still relatively big and will look good in both the computer and mobile versions of your website, yet it won’t be “heavy” enough to slow down the loading speed.

However, if you want to upload several photos into a gallery in your portfolio, they don’t have to be as big as 2500 pixels on the longest dimension. In this case, 1500 pixels on the longest dimension will more than suffice. The optimal size for logos is around 400-500 pixels. The smaller the image is supposed to be on your website, the more you can reduce its dimensions.

You can resize your images with our online tool, Crop Photo as it allows you to enter the necessary pixel dimensions into the input bar. More to that, you can crop your photos, changing their aspect ratio. This might be useful, due to the fact that a lot of common website builders offer variously shaped templates for images to use on a website.

For example, your portrait might take a shape of a circle or a square on your “About” page. If you resize your photo but keep its original aspect ratio, it might look awkward once you upload it. With some website builders, you can adjust a photo to fit it into a template better, but even that may not give you the necessary results. By cropping your image beforehand, you will make sure that your portrait looks exactly how you want it.

Resolution is the quality of an image, measured in dots per inch (dpi). Since most computer screens display 72dpi or 92dpi, it is better to stay within this range when saving a photo that you are planning on uploading to the web.

Some editing software, like Photoshop, have the option to “save for web”, which will save your images at a lower resolution. But if you don’t have any programs for editing and you don’t know the exact resolution of the images that you want to use on your website, you can simply compress them with our Compress Photo tool. Since it works in your browser, you won’t need to download anything or install any plugins.

Our tool has three compression options: Better quality, Smaller size, and Specific file size. The first option will maintain the quality of your image as best as possible, but produce files of a bigger size. The second option is the exact opposite: your files will take up little memory storage, but their quality is going to be somewhat compromised. With the third option, you will be able to enter the “target” file size and the app will compress the image accordingly while trying to maintain decent quality.

Since Watermarkly never changes the original files, you can try compressing your images using each of three options and see which one produces the perfect result for you.

By reducing both pixel dimensions and resolution, you will get images that are ideally optimized for your website: they will look great, professional and of high quality without their file size affecting the loading speed.

Here’s a quick guide for you:

  • Large images for big banners or background should be no more than 1 MB and around 2500 pixels wide.
  • Regular images for your portfolio or product gallery can be around 600 – 500 KB or less and around 1500 pixels on the longer dimension.
  • 300 KB or less and 500 pixels are more than enough for small graphics.
  • To make the resolution of your image web-friendly, use the “Save for web” option if you have editing software or simply compress your images.

In the modern world, visual content is unbelievably important. But so is optimizing it before publishing on your website. Moreover, it is crucial, if you want to provide your potential customers or clients with a great user experience and rank higher in search engines. Our online tools will give you the opportunity to optimize your images easily, quickly, and right in your browser.