A quality website is a website with a fast page load. Readers don’t like to wait, and it’s also no secret that page loading time is playing a very important role in the way how Google is ranking websites. And when it comes to page loading time, image size and image optimization are very important factors.

Here’s a definitive guide on how to optimize images for the web as well as a few extra other techniques and guidelines.

Use The Right Image Format

The 3 most common image formats on the web are .jpg, .png and .gif. Here’s a brief summary of each image file format and when you should use it.

  • png: Use PNG images if the image has text in it, or if you need a transparent background.
  • gif: Use GIF for very small images such as a 5*5px background tile, or animated images.
  • jpg: Use JPG or JPEG images for displaying photos, illustration images, etc.

Use Thumbnails Instead of HTML Resizing

HTML and CSS offer you the possibility of resizing images by specifying the desired width and height. While this is a useful feature, the image isn’t actually resized, it’s only displayed at a smaller size. You want to display a 500px width image? Then, resize your original image to 500px and display the resized version instead of the original. This will result in a much faster page load and a better user experience.

If you’re using WordPress, the upload tool automatically resizes any uploaded image to various sizes (original, medium, thumb, etc) so you should always choose the appropriate size.

On php-based websites, there’s many different libraries that allow you to easily generate thumbnails on the fly. ImageMagick is one of the most popular.

Use CSS3 Effects Instead of Images

Need a gradient or a fancy text effect on your website? Don’t use images! The CSS3 specification allows you to add lots of visual effects. One of my rules of thumb when it comes to web design and development is to avoid using images as much as possible.

In other words, if you can do something using CSS, do it with CSS, not images. There’s tons of things that you can do with CSS3 instead of using images, and your website will be faster.

Use web fonts instead of encoding text in images

In late 2019, I still see lots of people encoding text in images. This is definitely bad. In 90% of the case, you can instead use a Webfont and CSS. Webfonts provide a faster page load than a whole bunch of encoded text images.

Using webfonts is super easy. In order to ensure a good cross-browser compatibility, you need to have the font you wish to use in the following formats: .ttf, .woff, .svg and .eot. If you only have one of those file formats, there’s a super useful online tool to help, the Fontsquirrel webfont generator.

Drop your fonts somewhere on your web server, then add the following on your .css file:

@font-face {
  font-family: 'Tagesschrift';
  src: url('tagesschrift.eot'); 
       url('tagesschrift.woff') format('woff'),   
       url('tagesschrift.ttf') format('truetype'),
       url('tagesschrift.svg#font') format('svg');

Once done, you assign the webfont to an element using the font-family property:

p {
    font-family: "Tagesschrift", Georgia, Serif;

Make Use of Photoshop’s “Save For Web” Tool

When it comes to web design, Photoshop is by far the most popular program, and most of you are probably using it. Despite its popularity, a lot of users never use the “Save for web” feature. It’s a shame because this function allows Photoshop to provide the user presets to save an image in order for it to be displayed on a web page.

Basically, if you’re intending to display an image on your website, use Photoshop’s “Save for web” function. Always.

Online Tools for Image Optimization

If you don’t have Photoshop, don’t worry. Optimizing images online has never been easier, thanks to many free websites that provide online image compression. Here are a few tools you can use:

  • Optimizilla: This online image optimizer uses a smart combination of the best optimization and lossy compression algorithms to shrink JPEG and PNG images to the minimum possible size while keeping the required level of quality.
  • Tiny PNG: TinyPNG uses image optimization and smart lossy compression techniques to reduce the file size of your PNG files. Althouth this handy tool focuses on PNG, it can as well work with other image formats.
  • Compressor is a very useful online tool for optimizing your images. It supports JPG, PNG, SVG and GIF, and offers both lossy and lossless image compression. can provide up to 90% file size reduction.

Using WordPress? Install an Image Optimization Plugin

If you’re using WordPress, you can save a lot of time by simply installing a plugin that will take care of optimizing your images. I’ve been using WP Smush. It works like a charm: install the plugin, then upload your images normally. WP Smush takes each file you’re uploading and perform an advance image compression technique that optimizes the image file size with no compromise on the image quality.

Results are impressive: file size can be reduced up to 80% in size. This will make your website load much faster while keeping good image quality.

Another interesting plugin is Optimole. It features most of the options offered by Smush and adds new functionalities: Images can be served from a global content delivery network, WebP images support, lazy-loading, etc.

Use Caching Techniques to Display Your Images Faster

Although this isn’t really an image optimization technique by itself, caching an image file will make your web page load faster to your returning visitors.

Here’s a ready-to-use code snippet that will cache various filetypes (gif, png and jpeg images, and also other kind of documents like pdf or flv).

This code has to be pasted in your website .htaccess file. Make sure you have a backup of it before applying this technique, just in case something goes wrong.

# 1 YEAR

Header set Cache-Control "max-age=29030400, public"

# 1 WEEK

Header set Cache-Control "max-age=604800, public"

# 2 DAYS

Header set Cache-Control "max-age=172800, proxy-revalidate"

# 1 MIN

Header set Cache-Control "max-age=60, private, proxy-revalidate"

Frequently Asked Questions

Why Is Image Optimization Important?

Image optimization makes your website lighter and therefore has as faster load time, resulting in better user experience.

How do I Optimize An Image For Web Without Losing Quality?

Both Photoshop’s “Save for Web” function and the online tools listed in this article allows you to optimize an image for web, without losing quality.

How Does Image Optimization Work?

Image optimization is a technique that removes all the unnecessary data that is saved within the image, in order to reduce the file size of the image. Optimized images are up to 80% lighter than uncompressed images, resulting in a much faster page load time.


What Is a Website Optimization and Where to Start? When you create a website or work on the optimization of an existing web platform, an opportunity to update information quickly, improve usability, and grow the conversion rate effectively makes your life much easier.

There are a variety of services that will help to improve SEO, and design, technical, and analytical aspects.

Weblium Team have decided to share some advice on choosing simple but powerful free tools that help to improve a website and lead to an increase in conversions, and also explain briefly how to use them.

Optimization Tools

17 Best Free Website Optimization Tools


Google has a lot of free tools that can help you to improve your website and increase its ranking position. If you want to make your website more effective do remember to use these tools, as Google itself uses them to define your place in search. Every website optimization tool by Google mentioned in the table below is a must-know for marketing and SEO specialists.


  • Monitor website traffic;
  • Tack the dynamics of website conversion and set up events.
  • Tee new website users, their age, location, and the time spent on a website.
  • Track user behavior and customer journey.
  • Define the most frequent requests used to find your site.


  1. Create an account.
  2. Create a resource for data collection.
  3. Setup reporting.
  4. Follow the directions and tips the system shows you, it is quite easy.


  • Make sure crawlers see and scan your site;
  • Detect indexing issues and request repeated indexing.
  • Analyze and estimate website traffic from Google Search.
  • Receive notifications on indexing problems, spam, etc.
  • Fix responsive design issues.
  • Manage website loading speed.


  1. Add a website to Search Console and confirm it.
  2. Set up the necessary reports.


  • Analyze the dynamics of page loading.
  • Detect current issues.
  • Get tips and recommendations on improvement.


  1. Open the page of the service.
  2. Enter the URL of a page you want to learn about.
  3. Click on “Analyze.”


  • Check if a page is properly displayed on different devices.
  • Learn about possible usability issues.
  • Get recommendations for enhancing user experience.


  1. Open the page of the tool.
  2. Type or paste the URL address you want to check.
  3. Click on a button to get the results.


  • Compare different versions of a landing page.
  • Hide, add, and change website elements.
  • Test different versions of web pages.
  • Find out whether their performance meets the set goal.
  • Choose a version with the best performance.


  1. Create a Google Optimize account.
  2. Choose an experiment type.
  3. Integrate the tool with Google analytics.
  4. Set up targeting and other conditions.
  5. Install Optimize code with Google Tag Manager.
  6. Add a script that hides replacement on the website.


  • Display your business on Search and Maps.
  • Get reports on how many users have called, opened a website, or clicked on “Get directions”.
  • Make fast updates when needed, provide only relevant contacts and data.
  • Communicate with customers and potential clients.
  • Extend your online presence.


  1. Open Google My Business page to log in or register.
  2. Register your company or business.
  3. Confirm the information.
  4. Optimize the information so clients can find you quickly.


  • Track the competitors and interesting subjects.
  • Set up email notifications in Gmail.
  • Get reports based on Google’s data.


  1. Open Google Alerts.
  2. Enter a topic/subject you want to track.
  3. Put the request in “quotes” to look for exact matches or add /- to add or avoid specific related criteria.
  4. Set up the parameters you want to learn about.


  • Find out the frequency of a request in relation to language and region.
  • Compare the popularity of several requests.
  • Find popular news and items people look for.
  • Track the behavior of your target audience.
  • Analyze the dynamics of search requests within a given time. 
  • Find new markets or niches.
  • Find content ideas.


  1. Open Google Trends page.
  2. Enter your request in a search row.
  3. View schemes and graphics.
  4. Set up filters that are more interesting for you.


Google services are the basic tools for conversion rate optimization. After you get a solid background, start discovering more specialized and advanced tools. You will need to create unique content, make it visually attractive, free of mistakes, and take care of UX/UI. There is a long list of things to keep in mind and an equally long list of services that can help to manage these aspects. Find some of them below. 



  • Analyze a text for plagiarism.
  • Get detailed reports with plagiarized parts highlighted and links to sources.


  1. Go to the website.
  2. Paste your text.
  3. Click on a button below to start the check.
  4. See plagiarized parts with percentage and list of websites that have an identical text.


  • Check a text for mistakes.
  • Find grammar, spelling, and punctuation mistakes.
  • View suggestions on each issue.
  • Set up text parameters before the check.
  • Check the text readability score.


  1. Open Grammarly and register/login.
  2. Click on “New” to paste a text or on “Upload” to choose a document.
  3. Indicate text features: choose style, emotional appeal, etc. from the offered options.
  4. Get a list of mistakes with suggested corrections.



  • Detect duplicate content.
  • Find broken links on a website.
  • Find out what pages are most prominent for crawlers.
  • Get reports on each page.


  1. Open the website.
  2. Paste a URL and click on “Go.”
  3. View the report.


  • Identifies broken links on a website.
  • Find out if there are external links to your site.
  • Collect data to set up a redirect to active pages.


  1. Go to the website.
  2. Check a necessary tab to check backlinks or find the broken ones.
  3. Deal with captcha.
  4. Click on “Perform check” to see the results.



  • Get detailed reports on WordPress website performance.
  • Analyze the response speed.
  • Create reports and recommendations for solving arising problems.
  • Increase the performance of a web platform. 


  1. Open the website.
  2. Paste a URL address.
  3. Click on “Analyze” to see the reports.
  4. Register and login to get access to more features.


  • Get insights on user behavior and user experience.
  • Find out whether your pages are performing effectively.
  • Optimize page size and UX/UI design based on real feedback.
  • Get ideas on how to improve website usability.


  1. Open the website.
  2. Sign up and follow the simple instructions.


  • Track website analytics and user behavior on heatmaps.
  • Get feedback to create a relevant FAQ section.
  • Find the optimal formats for lead generation and calls to action ideas.
  • Review content and design features.


  1. Open the website.
  2. Register and sign in.
  3. Follow the guidelines and tips.



  • Mashup different apps and services; 
  • Optimize data flow from different sources; 
  • Automatize actions based on the received data; 
  • Start a workflow from any app and set up automatic closing routine tasks; 
  • Set up newsletters and chatbots.


  1. Go to Zapier website.
  2. Register and sign in.
  3. Choose the apps you want to integrate.
  4. Set up the parameters and conditions.


  • Enhance usability and customer satisfaction rate; 
  • Boost conversion and qualify the leads; 
  • Save time and resources spent on routine answers; 
  • Automatize FAQ and terms of service sections.


  1. Open the site
  2. Register and sign in.
  3. Add different scenarios and responses.
  4. Integrate with a preferred platform.

Bottom line

Learning how to use these tools requires some initial time and effort but it won’t take long to see the results. The enhanced user experience, content of high quality, regular updates, and SEO optimization always lead to a significant conversion increase. 

If the task seems too complicated to handle, you may consider other options — to hire a specialist or use a website builder, where tools for increasing conversion are included in a package of services.

Image compression is found in every native media format. However, the difference between GIF, PNG, and JPEG is how the information is compressed and display on-screen.

There are so many tips for composing great image media published on the web, and yet many designers still do not understand some of the fundamentals.

In this guide I’d like to share a few ideas for proper JPEG compression. You want to optimize your images to decrease webpage load times while also holding a decent level of quality. It’s all about finding a balance between file sizes and screen depiction. There is no perfect solution for designers to follow.

It takes some initial practice, but once you understand JPEG compression it becomes much easier developing websites in the future.

Recommended Reading: Tips & Best Practices for Web Optimization

Avoid saving at 100%

You should almost never save your JPEG images at 100% quality. This will not produce the most possible “optimized” image. It actually calculates through an optimization limit formula which increases your file sizes exorbitantly.

Even compared to 90% or 95% quality you’ll see a significant drop in file size.

Most times you’ll be recommended to save images much lower than 90% quality. If you open the Save for Web dialog box in Photoshop you’ll notice they offer preset values you can choose from.

I added the possible JPEG values below – notice the inherent naming conventions.

  • Low – 10%
  • Medium – 30%
  • High – 60%
  • Very High – 80%
  • Maximum – 100%

Even in Adobe Photoshop 60% image quality is considered ‘high’. Many web developers will vouch between 50% – 70% is a safe range to stick with.

How low is too low?

The values you choose for optimization are completely dependent on the project at hand. You’ll have to consider which types of graphics will output the highest file sizes – these are the ones which really need compression.

I would argue that below 30% you’re really chopping off fundamental picture quality. Other designers will swear 50% as a “limit” to decreasing the optimal value.

But the best advice here is to just try out different settings and see what looks best! You can’t go wrong with a few test studies optimizing JPEG images for the web.

Compression options

We should first clarify the two terms ‘compression’ and ‘quality’ which are the inverse of each other.

This means if you save a JPEG at 40% compression you’ll get 60% quality (compared to a maximum of 100% quality with no compression).

These are the most basic options to utilize – and they should be enough when saving for the web. General users do not get into much deeper customizations.

Subsampling gets into more complicated matters where you’re converting RGB images into YCbCr (Luminance, Chroma Blue, Chroma Red).

color guide

The luminance or brightness setting is always held at the highest possible value in JPEG compression. With this brightness value on a separate channel it’s easier to optimize the individual color values of Red and Blue.

This is also known as chroma subsampling. Designers interested in getting their hands dirty will love to read a bit more about this compression algorithm.

Check out this great blog post on chroma sampling specifically focused on JPEG images.

chroma sampling

As an interesting side note Adobe Photoshop does not always utilize subsampling for compression. Any images saved via the “Save for Web” dialog will only use chroma subsampling below a 50% quality value.

Differing web media

The web is also full of different kinds of image media. You can have photographs, icons, buttons, badges, and tons of other graphics. But it’s notable that comparing quality between a button and a photograph just doesn’t make sense.

When using photographs or detailed images consider linking to a separate lesser-compressed JPEG file. Then you can setup thumbnails on your site with a higher compression ratio and much smaller file sizes.

The only downside is that you’ll need to provide two sets of images for a media gallery. Take notice of the many different graphics you have sewn throughout a website and consider optimization techniques for each one individually.

Using Compression Tool

You want may have organized the image files that’s easy to rummage through on your site. You may also host their photos on a Cloud service such as Amazon S3, Google Cloud Storage, or through a CDN that would make faster delivery for the image. Still, you’ll want to use some compression tool to reduce image sizes. Any extra bytes you can shave off each file’s size are crucial. And here are some of the tools you want to check out:


TinyJPG is a browser-based web app where you can upload an image and it all unnecessary extra bytes to optimize file size. It’s 100% lossless meaning the image quality will not degrade at all. You can upload upto 20 images with 5Mb all at once.

If you’re using WordPress for your site. You can use its official plugin, Compress JPEG & PNG images. This plugin also connects to its sister site TinyPNG that would allow you to optimize images with PNG format.


This free software for Windows allows you to view and optimize any set of large images. I especially like this software because it supports batch conversion from images in multiple directories. You can apply the same functions over hundreds of JPEG images automatically.

What’s even better is the plugin support from 3rd party developers. One such example is RIOT (Radical Image Optimization Tool). This plugin works for other similar open-source graphics editors such as GIMP.

It offers a dual-image view where you can manually adjust compression parameters for each of your images.

Screenshot of RIOT plugin

Software support is wonderful and the RIOT features are very easy to use. Along with image compression you also have access to removing additional metadata such as EXIF and Adobe XMP. These extra bits of data can only add onto your total filesize and they are rarely needed.

ImageOptim for Mac

If you are running OS X and need a powerful compression app then look no further. ImageOptim is a powerful tool to compress images for the web – at times even better than Photoshop.

The whole application supports drag-and-drop functionality so it’s easy to optimize large sets of images. You can similarly run commands right from within the Terminal and setup shell scripts.

ImageOptim App for Mac OS X


Even though our modern Internet connection speeds are increasing with 4G and the upcoming 5G, we’ll need to reduce the size of our webpages. Every byte will eventually cost some fortune to your users, and in some countries this cost may be quite significant.

In this article, we’ve seen how to to compress images to reduce image size on the webpage. Compressing image used to be tricky since you need to find the proper balance between quality and substance. There wasn’t also that many tools to choose from, but now the options are more advanced and easy to use.

If you have similar tricks or ideas on JPEG compression please share with us in the post discussion area below.