Unoptimized images can be incredible bottlenecks that turn an otherwise well-built web page into a slow loading, bloated one. With the ever-increasing percentage of users on mobile devices, properly sizing and optimizing images to provide a good mobile experience is even more important.
When working with content creators:
Train the content creator on what type of image files to use in different situations. For example, PNG files should not be used for still photos (JPGs are the better choice), but they should be used for web graphics with transparency. PNG-8 can be used for graphics like logos with simple colors, resulting in a smaller file size than PNG-24 (see this table in Lara Hogan's "Designing for Performance" book).
If using Photoshop, make sure to crop the image where possible, then use the "Save for Web" feature for saving all images that will be used on the site. Within the "Save for Web" options, make sure to specify an appropriate image size and choose the desired image quality (60% is generally a good bet).
Provide guidelines for the content creator on maximum file size and dimensions for images that will be uploaded to the site.
Run the image through an optimizer like ImageOptim (OSX and Linux, free) or Caesium Image Compressor (Windows, free), or TinyPNG (online).
When possible, use SVG instead of PNGs for web graphics because the file size tends to be much smaller and they look crisp on all sizes of screens and devices.
Animated GIFs, if used, should be optimized as well (see this article).
Tips for developers:
Build in an image optimization tool. For a CMS, this can be done with an add-on that optimizes all newly added images, such as the EWWW Image Optimizer for WordPress. For a static site, this can be built into the build tooling for the site, for example: gulp-imageoptim.
Programmatically set maximum file size and dimensions for images that can be uploaded to the site if possible. This is built into CMS systems like WordPress and Drupal.
Use responsive images. The most straightforward way is to add the image 'srcset' and 'sizes' attributes to all images. Responsive image functionality is already built into some CMS systems, for example, WordPress uses Picturefill to ensure support of older browsers. Another approach is to use the
<picture>element, for cases where you want to do art direction on a photo, with full control over what part of the image is shown at various screen sizes. Third-party tools like Cloudinary are another solution.Audit the site regularly to make sure image best practices are being followed.
With proper training for content creators and the proper planning and implementation techniques completed up front by developers, images can be an asset and point of differentiation for a website or web app, instead of a frustrating bottleneck.
 |
Sheelah Brennan, Web developer and owner of, Sheelahb.com |
I optimize images as a part of my Magento speed optimization service. eCommerce sites powered by Magento are the complex catalogs with thousands of images. It is impossible to manually optimize every JPEGs or PNGs so I utilize a couple of automatic size reducing techniques.
I use gifsicle for GIFs, jpegtran for JPEGs and optipng for PNGs - these are command line utilities used as prebuilt packages for your OS. I use the following bash script to find every image and optimize it on the fly:
#!/bin/bash
find ./media -iname '*.gif' -exec sh -c 'gifsicle -b -O3 -o "{}.out" "{}"; mv "{}.out" "{}"' \;
find ./media -iname '*.png' -exec optipng -o5 -keep -preserve '{}' \;
find ./media -type f -iname '*jpg' -exec sh -c 'jpegtran -outfile "{}.out" -optimize "{}"; mv "{}.out" "{}"' \;This script could be added to cron daemon to optimize the new images as they come in (see this post for more details).
The second technique I use is called the Google PageSpeed Module, a server extension which you can install either for Nginx or Apache. This tool optimizes images and caches them on the server. The configuration is simple:
The CoreFiters filter includes image optimization as well as many other useful speed optimization tools (see https://modpagespeed.com/doc/configuration).
The third method I sometimes use to polish images that are already optimized by the first two techniques is to run the page through Google PageSpeed Insights, and then download the optimized image pack (you can find the download link at the bottom of your pagespeed report, see https://developers.google.com/speed/docs/insights/OptimizeImages). But even with the PageSpeed module installed, Google Insights can still squeeze a few kilobytes here and there. The third method requires a lot of manual work and patience, but it will pay off.
Contributed by Konstantin Gerasimov, CEO, Goivvy
Amongst the many file formats out there, we're going to these three popular formats. It's might not be critical for a common user to know the exact difference between them, but it is more crucial when it comes to image optimization.
Here is our take on so-called optimized and progressive types of image files.
Optimized JPEG or optimized PNG (also called non-interlaced PNG) creates improved image files with smaller sizes. The browsers loads such files top-to-bottom while, and the image data arrives gradually. This provides the best compression for image files under 10K, which is usually preferable.
Progressive JPEG or progressive PNG (also called interlaced PNG) allows to display the low quality images before all the graphic info is loaded. The more information is loaded, the better the image quality. This format usually provides better compression for files over 10K.
After we have come to an understanding of which image format is better for different types of images on your eCommerce site, we'd like to touch on the way to compress all images on the site to reduce their size.
However, even if you choose the most appropriate format for your images, they still might be huge in size. The better quality an image has, the more it weighs. When you have thousands of pictures in your online store, even 10% image compression will substantially improve the page load speed.
Contributed by Kate Green, Promokit
Images are very important for web articles. For a great article, you need well optimized articles with proper keywords and attractive images. However, for a better user experience, images should be optimized. For example, if a visitor views your article and it's taking time to load the image, they might leave your site. Furthermore, search engines might rank you lower in search results.
You need to optimize your images. The thumb rule I follow is to use images that are less than 50kb in size, while maintaining the quality. Sometimes, I may go up to 60-70kb, but no more than that.
The tools which I like to use for image optimization are free and provide good results. After finding an image and editing it, I always compress it using compressor.io and then compress further using tinypng.com. I also use the Advanced Lazy Load WordPress plugin, which reduces the page load time and provides a great user experience.
For more details, see: Websites to Find Creative Commons Zero Images.
Contributed by Pawan Bahuguna, Owner, Tech2Blog
Image optimization may appear to be a bit complex, but with a few tricks, you'll master it in no time. When it comes to anything on the Internet, content may be king, but a picture is worth a thousand words. This is the reason why it is key that you optimize any images that you use on your website.
Image Quality: It's only logical that any image you choose to place on a website will be of the highest quality imaginable. But you'd be surprised at the amount of poor quality images you'll run across, on some of the most popular websites out there. The best way to approach this is to take an in-depth look at the image and check for clarity. After that you can check resolution vs. size to make sure the image quality is consistent for resizing.
Image Size: There are plenty of new plugins and tools that help automate image resizing. Where these tools are not employed, you can use Photoshop, Pixlr editor, or even basic paint to resize images. Be sure to always check constrain proportions so that your image quality stays intact.
Image Alignment: This is one of the most commonly overlooked of all image optimization elements. There are usually 3 main options to align images online: left, center, and right. You can align images this way and have them text-wrapped (left and right alignment is ideal for text wrapping). Center is typically used only to feature an image and have the text positioned above or below the image.
Image Title, Meta, and SEO: Recently, it has become mandatory for all images to be appropriately optimized for search engine ranking purposes. First, the title of your image should coincide with the page name, keyword, or post name that you are targeting. Additionally, you can caption the image with keywords or explain the picture in detail to the audience. It is a good idea to also incorporate subject and keyword phrases or terms in the alternate text option.
Search engines pick up images and rank them in their listings for those specific terms. This assists you in not only enhancing your content ranking in the serps, but it also boosts your ranking and traffic through those looking for particular images via keywords.
Contributed by Matt Hall, Owner, Scepter
One of the main reasons for increased page load times is images on the page!
How to do it right:
Progressive Image Loading: Your web page is not available for use until all the images (
<img>tags) are loaded with an image from their src. So, first replace all your img tags with placeholders. The placeholders will be a blank area on your web page which will be replaced by the high-resolution images. Doing so will allow your web page to continue execution without hindering the loading of page. For any image that you need to show you must have two versions of it, one is of high resolution and other is of low resolution (max 1kb in size).Host Images on a CDN: When the images are hosted on a CDN, it takes the load off our application. Also, when we make multiple requests, we get a cached copy, which is much faster.
Choose a Proper File Format: If the images are composed of simple geometric shapes, they are great candidates for the vector (SVG) format. Images with complex shapes, colors, and details ought to be saved in one of the raster formats (GIF, PNG or JPEG).
Use CSS Sprites: If there are many icon images on the page, combine them into one image and display them with plain CSS. This will eliminate the multiple requests for different icons as we are loading one single combined image.
How is it done wrong?
Most of the time, we need to use high resolution images to provide a good user experience. This results in slow page load on slow networks, which not only reduces user's interest but also affects the pagerank/crawling done by the search engines. We can reduce the quality of the images, but that doesn't solve it.
Here are some tips and tricks:
Most developers use a basic low-resolution placeholder, such as a loading icon, until the image gets loaded. This makes the UI dull and the user feels the site is slow.
Also, don't use only one master low-resolution image. Showing the same low-resolution image in 10 places until the page gets loaded makes for a bad user experience.
Create two separate versions (low and high resolution) of images and use a unique low-resolution version for each image.
Start the loading of the images after the page is fully loaded. This is relevant for blogging sites where user care more about content rather than the media attached to it.
Create multiple high-resolution versions of the image, such as one each for desktop, mobile, tablets, and render high-resolution images based on device.
Prefer vector formats: vector images are resolution and scale-independent, which makes them a perfect fit for the multi-device and high-resolution world.
Contributed by Ankur and his team at BoTree Technologies
Image optimization means making your images effective enough to be understood easily by search engines as well as users. Here, I'm not only talking about creating an attractive image that catches immediate user attention. Image optimization is more than that.
Let's say that you make an image compelling enough to catch a user's eye and understandable enough to deliver your message. But what about search engines? They are not humans like you and me. They are bots that won't see your image or its colors.
For example, I want to create an image of the sea under a blue sky during daytime. To make it readable for search engines, I'll use an Alt Tag with the name "Sea Under Blue Sky During Day Time":
Next, I'll give it a proper description to make it more recognizable:
<meta name="description" content="This photo is about blue sky, surface, horizon."/>
Plus, I'll take care of its uniqueness by adding the ".jpg" extension: seaunderbrightbluesky.jpg.
This is just a brief of how you can optimize your images to make them easily understandable by both search engines as well as users.
Contributed by Jimit Bagadiya, SocialPilot
When printing images in a book, there are a few specific requirements to consider for optimal results. First, while a minimum resolution of 150 ppi will most likely be satisfactory, 300 ppi is optimal. Images should also be saved in JPEG format with maximum quality settings. If you're able to apply a color-space, we recommend sRGB, as it most closely resembles the eventual print device.
Also, keep in mind that printed images usually print darker than they appear on a computer screen. For this reason, we recommend that you lighten each image and apply sharpening as a last step, prior to placing it into a book design. Following the information above will likely give you great print results, but if you need more information or are interested in soft-proofing your images, a good print provider will also have a color-management page on their website. Check out Blurb's color management resource center for more information.
Contributed by Estee Shechter, Blurb
An image is worth a thousand words, but it's also worth a boost in conversions. There is nothing worse than stretched, improperly sized, or inconsistent images. It's a dead giveaway to visitors that your site isn't professional and therefore not trustworthy.
When you visit a quality eCommerce site, their images and thumbnails always seem to line up in a nice grid, right? The trick is to maintain a consistent aspect ratio. That's the ratio of the width to the height of an image or screen. Maybe you're not up on your geometry, so I'll make it simple for you: you just need to make all of your product images square.
Maintaining the correct aspect ratio in Photoshop is surprisingly easy, just hold down the shift key down while cropping or making a selection to maintain an aspect ratio. The crop tool can also be set to to a square. Remember to keep your photo centered.
When saving images for the web, we need to strike a balance between file size and quality. For most images, the above settings when used in Adobe Photoshop CS5 will yield excellent quality within minimal file sizes. If you select "optimized" you may get a slightly smaller file size. Resist the temptation. We know that progressive JPEGs (while bigger) will appear to load faster to the user.
 |
Kurt Elster, MBA and owner of, Ethercycle |
Our company deals a lot with video files. Our video converter tool is capable of converting any resolution videos and preparing them for website integration. Some corporate website owners prefer to host videos on their own servers instead of uploading them to YouTube or other video platform. So they must have a fast CDN to provide sufficient video buffering speed and cross-platform accessibility. I think a good cloud-based system like Cloudinary can help optimize your 'cost-quality' ratio.
As for technologies, I'm after HTML5. It's a new standard of web markup which has been already adopted by major content providers. Our stats show that since 2016, the conversion to HTML5 outperforms the conversion to Flash formats, which means that users also opt for this new progressive technology.
Contributed by Emily Cooper, Marketing VP, Freemake
When developing web stores, image enhancement is key. According to HTTP Archive, the average page size today is 2.9MB, while images are taking up over half of this size. Image enhancement is a must-have to adhere for reducing page size as well as page load time. This also influences Google rankings while increasing customer loyalty.
One of the key approaches for enhancement is proper use of formats. For example, when saving images in JPG format, you increase its original size. Moreover, you complicate things for the user, because JPG implies image artifacts that are noticeable in the text. Therefore, the format should be chosen according to content:
SVG is considered to be ideal for vector graphic, diagrams and graphs.
PNG is useful for various clipart and images with open areas.
JPG is a perfect solution for photos.
GIF is suitable for animated images.
Nowadays there are so many ways to perform image enhancement including online tools, extensions for your website, and applications. In most programs and tools, proprietary algorithms as well as add-in programs are used, for example, pngcrush, optipng, jpegtran, jpegoptim, or gifsicle. Besides, you should remember that operations are executed without deteriorating image quality.
 |
Denis Guryanov, Frontend Developer at, BelVG |
Image optimization is a deceptively complicated area. Where is the sweet spot between a fast site but one that runs with images of a high enough quality to capture visitors' imagination? Here are a few of my favorite techniques that can reduce your image size without negatively impacting your visitor experience:
Resize them: I've seen so many sites loading massive images just to resize them on the page. Bloated 3000+ pixel image codes to appear as 250px wide, eating up bandwidth and slowing down the site. Figure out what the size of the image will display as on the page, and resize your images accordingly. This is by far the simplest and highest value of all image optimization to-dos.
Optimize Them: We're talking about optimizing the actual images to appear the same but be smaller in size. You can either use a tool such as TinyPNG, which strips out some of the image metadata and uses lossy compression to reduce the number of colors in the image. Nine times out of ten the resulting product looks exactly the same on a monitor or close enough. However, I tend to shy away from these tools as the one time in ten (more for some tools) is unacceptable and not worth the trade-off.
Use a Content Delivery Network (CDN): Your web server works hard for you every day processing all your pages, sending out emails (some anyway), hosting your cPanel and a ton more. Add serving all your images to the mix, and you'll be slowing down the entire system. A CDN hosts the images on servers dedicated to the single task of presenting them to the world. Most CDN providers also have multiple datacenters and serve the images from the one that is closest to your visitor.
SCRSET: A typical page would call an image with code similar to the following:
The problem with this is that the same image is being served for mobile devices and desktop. Basically, mobile devices are pulling in images that are generally larger than they need to be, thus slowing down the page load for the already slower device. A simple switch in the code to something like the following might help:
<img src="mobile-image.jpg" srcset="tablet-image.jpg 500w, desktop-image.jpg 1200w" alt="If you're using SRCSET this is probably done.">
In this case, the browser will make the calculations as to which image to use based on the resolution the device needs. Even if you had only two images, one for mobile and one for desktop, you'll be doing a great favor to your visitors.
Contributed by Dave Davies, CEO, Beanstalk Internet Marketing
To make GIF files smaller in size, there are two optimization methods:
Lossy compression: This removes some of the data from the original file. The result is a reduced file size, and reduced quality. The result image can become fuzzy and pixelated over time.
Lossless compression: This reserves all of the data from the original file. While the file size remains larger than than lossy compression, the image's quality does not degrade over time.
If those two methods aren't sufficient, GIF images can be converted to other file formats.
The easiest alternative for static GIF images is to convert them to PNGs. While the two formats are very similar in terms of choices for displaying simple graphics, PNG has the advantage for being able to compress to up to 25 percent smaller than an equivalent GIF file.
PNGs can be a great alternative for static GIFs while HTML5/MP4 that are considered more modern techniques, are more suited for alternatives to animated GIFs. Simple graphics such as lines or shapes can also be made using SVG or pure CSS. These are more robust and smaller in size.
Quoted from: https://www.eyerys.com/articles/how-optimize-gif-format-performance-and-knowing-alternatives
Contributed by Hafiz Rahman S., Eyerys
Image optimization is a crucial part of enhancing your web page's overall performance, but unfortunately, it is neglected by most web page owners. However difficult it may seem to a non-technical person, image optimization is quite easy to perform. Here are a few easy hacks to optimize the performance and quality of images on your website.
Image size and quality are two important factors in image optimization. Arriving at a point where you get the best image quality at the lowest possible file size is the key to image optimization. Images obtained from the web, or any other source, are often large in size and need to be compressed before uploading, to ensure the faster performance of your web page. It is important to choose the right file format and image compression tool to achieve this goal. The JPEG file format is the best for image compression as it uses both lossy and lossless optimization. GIFs are good for animated images. Everyday tools such as Adobe Photoshop or other freely available image editing tools can be used to compress the images.
Naming the image properly is a quick trick to optimize the performance of your image. Did you know that inserting a few keywords (separated by hyphens) into the image's file name can increase its visibility manifolds? However, refrain from adding too many keywords---three to five keywords in the image file name are adequate. Many people make the mistake of using abbreviations in the image name. Avoid this at all costs.
Make the alt text descriptive. It is a good idea to describe your image in the best possible manner (use 10 to 15 words), because Google considers alt text as a ranking factor. Also, alt text is identified by readers.
Image Captions cannot be ignored. Studies show that most people read the image captions first, and then decide whether they should read the rest of the content or not.
 |
Venkatesh C.R., CEO and Managing Director at, Dot Com Infoway |
One of Webflow's core values involves immersing the artist in the medium is an essential part of the design. With regard to responsive images, this means previewing the effects of srcset/sizes and intrinsic size in the designer, as you move nodes around and change styles. Intrinsic size can affect a layout in unexpected ways, so getting that feedback as soon as possible is important to the design process.
When it comes to finding the right balance to optimizing responsive variants, we apply lossless compression optimizations. We do breach into lossy optimizations but try to be careful about it by using perceptual image coders with high-quality settings. The variety of images we encounter is one reason, but ultimately we'd lean toward quality over reducing file size. We also rely on HTML5 standards to optimize page speed via prefetching.
By being wise about the gap between your breakpoints and responsive variant widths, you can also get a lot out of a simple browser cache for repeat visitors with differing window widths. I resize my browser window all the time, and wouldn't want variants so specific that I keep downloading slightly larger versions of the same image.
Quoted from: https://blog.ycombinator.com/how-to-use-responsive-images/
Contributed by Yoav Givati, Engineer, Webflow
Image Optimization Tips
Image optimization is a tricky business, and it can make the difference between a decent looking site and a truly beautiful one. Here are a few best practices for optimizing images for websites. These tips regard using Photoshop, ImageAlpha, and ImageOptim.
Photoshop allows you to "Save for Web" with the quality setting as low as possible (35-55%). This setting compresses your image, removing some of the image quality in the process. When saving for web, it's best to look at the preview window while adjusting the quality until you find a good balance between the image file size and quality. To smooth out and counteract the pixelation, you can add a bit of blur (0-.1), depending on the actual composition and detail of the photo.
Images with text require higher quality, because the text will appear pixilated before the rest of the image. I use 55% as my recommended starting point, and then you can try decreasing the quality until you have gone too far with the compression--then bump it back.
Images that have lots of solid colors (simple background gradients and graphics) can usually get away with a lower quality, as related to compression, because there is not a lot going on in the image. 35% is a good place to start.
Photographs of people and landscapes are somewhere in the middle, the key is to get the file size as small as possible without compromising image quality.
ImageAlpha is a free app that removes extra colors from your image. You simply drag your file into the app and reduce the number of colors (256, 128, 64, etc), which also reduces the file size. You can play with the settings and A/B test the image with various settings.
ImageOptim removes excess metadata from your file, sometimes reducing file size by as much as 15-20% without losing any image quality. I highly recommend this step as it is fast, easy, free, and does not compromise the image.
For full-screen images, you should shoot for less than 500k in file size. Ideally, a web page shouldn't be larger than 1-2MB to load quickly on mobile.
Dealing with Responsive Images
It's important that images are actually larger than the area they display in, because retina screens (such as in MacBooks, iMacs, iPads, and iPhones) contain twice the pixel information per inch. I develop for 2560px screens (27" iMac for example), so any image that should take up the entire screen should be at least 2560x1440 (16:9 ratio). Double that size if you want it to be retina-ready.
Any image that is inside of a column in the content area should be a standard ratio (3:2, 4:3, 1:1) and its size depends on the site width, for example, 1080px.
If you want an image to go "site width" it should be at least 1080px wide.
If you want the images to look stellar on retina screens you must double those sizes.
1/1 column is 1080px (2160px retina)
1/2 column is 540px (1080px retina)
1/3 column is 360px (720px retina)
1/4 column is 270px (540px retina)
1/5 column is 216px (432px retina)
1/6 column is 180px (360px retina)
A standard WordPress thumbnail is 150px (300px retina)
All of this is changeable and is dependent on the "site width" setting of your website.
Responsive Breakpoints
The size at which a website switches from a multiple column layout to a one-column layout is referred to as the column breakpoint. A standard column breakpoint is usually around 800px. Any image that you want to be the full width of the column breakpoint should be at least 800px wide.
Contributed by John F. Van Dinther, TwoHatsConsulting
When it comes to images, keep in mind that images dimensions are not the only thing that matters, but also the compression level. Two images with the same dimensions can have a very different weight, depending on how you compress them. I'll outline three compression methods:
Manual compression: If you aren't comfortable enough with Photoshop, ImageOptim can be used to compress a bunch of images on the fly. It will reduce the file size with lossless algorithms, so you won't lose in quality, and will also remove redundant image metadata. They also support the new Guetzli JPEG encoder, released in March 2017 by Google. If you want to integrate it with your website, there's also a web service available (but it isn't free). For Windows users, you can check out FileOptimizer.
Client-side compression:
ImageOptim, already mentioned for manual compression, can be used for client-side compression in the form of a Grunt plugin. After a quick setup, the plugin compresses all images located inside the images folders defined in your gruntfile. This solution is very efficient, but has one downside: if your platform frequently publishes content with images, you'll have to run Grunt at short intervals.
You can also leverage the Javascript Image Compression (JIC) library. By attaching this library to your images upload fields or WYSIWYG text area, your browser automatically compresses your 4MB image into a much smaller, web-friendly image. Combined with an image resizing library, we are getting closer to a fully automated image processing.
You can also combine both, by using Grunt for your general images, that are part of the look and feel, and JIC for user-uploaded content.
Server-side compression: The mod_pagespeed Apache module (also available for nginx and IIS) performs a bunch of server-side operations that serve your site's performance, such as minifying, compressing, concatenation of JavaScript and CSS files, better resource caching, deferred loading of assets, and of course image optimization and compression. Together with helping your PageSpeed Insights, you'll gain in page load time and automation. It won't replace all the optimization that you can do upfront, but it's a easy way to improve performance and reduce page size.
Contributed by Morgan Milet, Dropsolid
There are two main reasons that image optimization tools are so popular. The first is related to usability improvement: You'll experience improved page load time after images on your page are optimized. The second is the fact that optimized images equal saving disk space.
Image optimization serves usability because the smaller the image, the faster the page load time for the user. Load speed is a factor that has a great impact both on usability and website optimization. In addition, you can save disk space if you upload optimized images to your website.
Supsystic's free version of the Photo Gallery plugin solves these issues by allowing you to optimize thumbnails, save backups of source files, compare the appearance of compressed and optimized files, and more. See our documentation for more details.
Contributed by Supsystic
An active site includes a maximum of 5-7 images in each of its blog posts. Optimizing 5-7 images a day is not a big issue. Here are some image optimization tips and tricks:
Select only PNG/JPEG image formats for better optimization.
Always add an image title, a description and alt text while uploading an image in WordPress.
Use high-end hosting for better image load speed.
Mention image credits if required, to avoid copyright issues.
Here are few recommended image optimization tools and technologies:
Compress your images using selected WordPress plugins (see our post on the subject).
I recommend the following free tools for image compression: TinyPNG, Compressor.io, Kraken Image Optimizer.
You can also use CDNs such as Cloudinary, MaxCDN, Amazon's AWS, and more.
To avoid mistakes:
Never upload an uncompressed image.
Do not over-compress your image with multiple tools that might damage image quality.
Contributed by Alok Rana, LoudTechie
In these times of large screen resolutions and massive full-screen images, image optimization is more important than ever. As a WordPress theme development company, we often stumble upon websites where images are being heavily scaled instead of displaying images with the optimal size and image dimensions. When selecting a WordPress theme, it's highly recommended to choose one that's displaying thumbnails that are sized correctly, without wasting valuable page load time on image scaling.
Another important aspect is to optimize images before you even upload the images to your website. It usually is disadvantageous to upload a portrait image, if your website is optimized for landscape images. For example if you're running an online magazine or news website, it would be recommended to optimize the size and image ratio before uploading the image to your site. This not only saves server space, but also helps avoid other image-related issues.
In addition, always make sure that the images on your website are compressed. Serving optimized and compressed images with less file size can speed up your website, save bandwidth. You usually won't lose image quality, at least not in a way that it's noticeable by the human eye.
Contributed by Michael Hebenstreit, MH Themes
The best tip I can provide is: Automate your image optimizations. If your optimizations can be offloaded to a service or build/deploy process, your server or your framework/CMS can use that. Use tools. Don't get stuck following rules that may not suit your current project.
If you're not using a service, there are three tools you can put in your toolbox:
MozJPEG for all your basic JPEG optimization needs. Typically MozJPEG's default settings provide big wins in file size. The easiest way to install this across many operating systems is through NPM.
For PNG images, use PNGQuant and/or ZopfliPNG. If you don't want to lose any pixels (lossless compression), use only ZopfliPNG.
For Animated GIFs... well, don't use them. Use either a WebM or MP4 file converted with FFmpeg or an animated WebP image with mixed compression mode using Google's gif2webp. Additionally, you can use animated PNGs for compression on Safari and Firefox-based browsers.
Send or serve the appropriate image for each browser.
Animated images might be a pain point if you want good cross-browser support. Most Blink-based browsers support animated Webp images.
Firefox, Safari, and Chrome (as of version 59) can use Animated PNGs. However, if you're sending anything other than an animated WebP to Chrome, you're sending more data than you actually need to. The Picture Element or Content Negotiation for WebP images is your best bet (see our post).
To wrap all these tools into a nice package, MacOS users can use Imageoptim. Windows users can use the above Node/NPM tools, or install them through Bash on Ubuntu or Windows.
Contributed by Cory Dowdy
Image optimization is one of those things that will always be a huge performance killer when it comes to websites. Unfortunately, this is something that users will always ignore or put off to the last minute. As someone who works in the web performance industry, I see bad practices on a daily basis. For example, users uploading full resolution-images that are 5+ MB, not utilizing a CDN to speed up distribution, or not sizing images down beforehand, which in turn leaves CSS to rescale them.
Here are a few quick tips I give people whenever I see unoptimized images slowing down their site:
Images need to be compressed. Whether you go lossy or lossless, it's important to pick one and roll with it. I personally recommend lossy for most users, as they will see the greatest speed increases. A lot of times images can be compressed by up to 60%+.
Compressing images doesn't have to be complicated. If you're using a tool like Photoshop or Affinity Photo, simply utilize the "save for web" feature and quality indicator bars when you save out a file. If you are using a CMS like WordPress, there are dozens of WordPress image optimization plugins that can automate the compression upon uploading to the media library.
Look into other file types which can further reduce the size of your images. I highly recommend utilizing both SVGs and WebP if you can. SVGs work great for logos and icons. WebP images, Google's image format, have been shown to be drastically smaller than both JPG and PNG.
Resize your images in a photo editing tool before uploading to your site, or utilize a plugin. If your web page is 800px wide and you upload a photo that is 1400px wide, CSS is going to have to scale it down to fit the page. This adds to your load time. I suggest also doing some research into responsive images (retina) as you will want to also take this into account when making your image size calculations.
CDNs are here for a reason, and they can drastically increase the load time of your optimized images by distributing them from servers closer to your users (which reduces latency). They can also help the performance of your entire site by ensuring that not only your images, but also your other assets, as they are delivered via a fast HTTP/2 connection with multiplexing, server push, etc.
There are numerous other things that can be done, such as lazy loading your images or using web fonts like Font Awesome in place of images on your site. In 2017, there should there are no more excuses for sites running slow due to large, unoptimized images. There is plenty of free information out there on how to get started.
Contributed by Brian Jackson, Director of Inbound Marketing, Kinsta
I like solving tricky programming problems ( think of them as Sudoku puzzles or clever logic problems). So I probably enjoy complex algorithms more than most developers. However, even I find some image compression algorithms daunting. I could probably cobble together a simple one if I had to, but fortunately, I don't. I work mostly in C# and Visual Basic these days, and the .NET framework that they use provides a reasonably nice image compression tool.
The System.Drawing.Image class provides a Save method that saves an image into a file. Optional parameters let you specify the file type (.bmp, .jpg, .png, and so forth) and a compression level. To specify the file type, loop through the array of encoders returned by the ImageCodecInfo.GetImageEncoders method until you find one with the right Multipurpose Internet Mail Extensions (MIME) type.
The following code shows a simple GetEncoderInfo method that returns an encoder for a MIME type.
// Return an ImageCodecInfo object for this mime type.
private ImageCodecInfo GetEncoderInfo(string mimeType)
{
ImageCodecInfo[] encoders = ImageCodecInfo.GetImageEncoders();
for (int i = 0; i <= encoders.Length; i++)
{
if (encoders[i].MimeType == mimeType) return encoders[i];
}
return null;
}To set the compression level, create an EncoderParameters object. Give it a parameter of type System.Drawing.Imaging.Encoder.Quality with a value between 0 and 100. The value 0 provides high compression and low image quality. The value 100 provides high image quality and a large file (probably larger than the original file).
The following SaveJpg method uses the GetEncoderInfo method to save an image into a file with a specified compression level (I've skipped error handling to save space):
// Save the file with a specific compression level.
private void SaveJpg(Image image, string filename, long compression)
{
EncoderParameters encoderParams = new EncoderParameters();
encoderParams.Param[0] = new EncoderParameter(
System.Drawing.Imaging.Encoder.Quality, compression);
ImageCodecInfo codecInfo = GetEncoderInfo("image/jpeg");
File.Delete(filename);
image.Save(filename, codecInfo, encoderParams);
}Now you can use this method to write a program that adjusts image compression. It's pretty fast, so you can even use a slider to try out different compression levels. Whenever the slider moves, save the image at the selected level in a temporary file and then display it. With a little experimentation, you can decide exactly how much compression you can get away with and still get an acceptable result.
Contributed by Rod Stephens, C# Helper
As an internet marketer, I frequently come across client websites that have unoptimized images. I generally run into the following issues:
Using larger images and then resizing them using CSS or image (width/height) attributes.
Using print quality images that are unoptimized for the web.
Not lazy loading images on pages that have too many images.
Using the wrong format of image, such as using PNG when JPEG would have resulted in a lower file size.
Here are some image optimization tips and tools:
As far as PNG images go, one of best compression tools I have come across is PNGQuant, a lossy compressor. It also works well with images that have an alpha channel providing the smallest possible file size along with high-fidelity transparency.
If you want even more compression, you further compress the image with PNGOutwin, a lossless compression software. In other words, it does not reduce the image quality.
When it comes to the web, it's always best to save PNG images as PNG8, which is a lossy image format that supports only 256 colors.
For JPEG, save the image using a lower-quality setting, somewhere around 80%-85%, and you can always go lower if the image isn't too blurry.
Most JPEG images also carry EXIF data, which add a little bulk to the image. In addition to removing EXIF data, saving the image as a progressive JPEG (for images larger than 10kb) reduces the overall size, and also helps the image load faster when connections are slow. You can also try reducing the chroma information to reduce the image size further. Photoshop's 'Save for Web' option allows you to play around with these options.
An open source program that I love using to optimize JPEG images is RIOT, which has a range of minute settings for maximum compression for while maintaining overall quality.
There are also a few open source options, such as mozjpeg by Mozilla and Guetzli by Google, which can reduce JEPG size by around 10% to 20%. But these need to be used through the command line (a GUI version isn't currently available).
Contributed by Mukesh, OrbitingWeb
Too many small business owners waste good money when it comes to trying to improve site performance. Image optimization is one way for site owners to improve performance without breaking the bank.
Some people assume that just because they use WordPress, their website is automatically SEO-optimized, and their images are too. There are many image optimization plugins available for WordPress, and if you're not using any of these, you're probably missing out on SEO and user experience.
Among the WordPress plugins, I recommend trying EWWW and imagify.io. These plugins have a variety of features such as bulk image optimization, file type conversion, and automatic conversion of new uploads. Cloudinary's WordPress plugin is also great if you'd like to get optimized images hosted in the cloud for you. A lost second on the web can cost you big in the bottom line.
See our plugin comparison for more details.
Contributed by Pietro Saccomani, Founder, MobiLoud
Something that a lot of newcomers fail to understand when it comes to image optimization is the value of optimal resolution and quality. In a few image formats such as JPEG, which are lossy, some of the details are lost as a tradeoff for reduced size. In these cases, the lost details that are mostly irrelevant and would go unnoticed.
Another underestimated way to reduce size is picking the optimum resolution. Almost everyone knows that lowering the resolution reduces the size, but very few people understand how massive the difference in size is. This is because image size scales to the square of resolution dimensions.
All of these operations mentioned above can easily be achieved on the Unix command line using ImageMagick. To reduce the quality of an image (only for lossy image formats), run:
convert <input image location> -quality <quality desired (in precentage)> <output image location>
For example:
To change the resolution of the image (also works on lossless formats):
For example:
Mix and match quality reduction with resolution changes until you have an image with the detail you desire and the lowest possible size.
Contributed by Soham Kamani, Founder, sohamkamani.com
Traditionally, icons on a web page have been drawn using bitmaps, which are often stitched together to deliver faster over the wire. However, bitmaps do not scale well on different screen resolutions, and this is a problem for responsive web design.
Font icons have proved to be a great alternative. Another common alternative is to use SVG, which means drawing scalable vector graphics. While there has been a good amount of research about optimizing network performance of font icons or SVGs, I could not find data that talks about the performance of these icons after they have been sent and rendered on the browser.
I wanted to check which type of icon allows 60 frames per second. The test candidates are:
Font icons: A font file embedded in an HTML page using the
<link>tag, where the icon was usually created using a class.Inline SVG: SVG markup was used for the icon embedded into the web page.
Background SVG: The SVG was inserted as data:uri in a class that was applied to repeated elements on the web page.
The web page had each of these icons repeated multiple times, making the page long enough to scroll. Running each test multiple times, and watching trends for each of the 733+ icons should eliminate noise in the data. Basically, the performance order was, from best to worst: Font icons > background SVG > inline SVG.
From a pure performance perspective, font icons seem to perform the best. However, they cannot be manipulated like inline SVG icons, and are restricted to animating as a single unit. When using these recommendations on your site, they should be tested (using something like browser-perf).
Link to the full article: http://blog.nparashuram.com/2015/05/icons-font-inline-svg-or-background-svgs.html
Contributed by Parashum, Founder, blog.nparashuram.com
There are several ways to optimize images for online use:
First, creating multiple image sizes is highly recommended. Often you only need to display a thumbnail of an image, which would not require the full size. In such a case, creating a thumbnail copy of the original image save you load time, especially when creating a image gallery.
Take the time to decide which image format suits your need. You often won't need the maximum quality or any transparency options. When you do need transparency and high quality, go with PNG. If you need to display larger images without transparency, go with JPG.
When creating images, you can always try to play around with the quality settings, especially for JPG. Just try see how an image looks with a lower quality setting before choosing best quality. The differences are usually hardly visible, especially for images with less complexity and less colors.
Contributed by codester
Videos don't necessarily have to be an impediment to improved web page performance. Here are some of the ways to optimize video files:
File size: A video's file size depends on the bitrate and other metadata attached to it. Data compression is one of the techniques to reduce the video file size without losing quality. FFmpeg, HandBrake, MPEG Streamclip are some of the compression tools that can be used to restructure the way pixel data is stored to make the final video optimized and lighter.
File format: Different video file types store data in different ways, which is why a WebM video is lighter than an MP4 video. In addition, the browser may support only a few of the available formats, so ensure you aren't embedding videos that require extra plugins. Modern browsers support HTML5 formats like MP4, WebM and Ogg, which are is recommended.
CDNs: CDNs can be used to stream video content so that it is available to the user instantaneously. Online Video Platform (OVP) providers offer services that handles video optimization to provide the user with seamless video streaming.
Video streaming: Several new technologies make use of Adaptive Bitrate Streaming over HTTP to enable streaming; some of these include MPEG-DASH, HTTP Live Streaming (HLS), HTTP Dynamic Streaming (HDS), and so on. All these protocols are designed to stream videos from a regular HTTP server, making specialized media delivery servers redundant. The video stream is broken into smaller chunks of different bitrates that are ready for playback; a device trying to view the video file can pick the data stream as needed based on the bandwidth available.
Optimizing page design for video: In addition to the format and data delivery of the video content, it's also important to optimize the web page design so that it doesn't hinder the user experience. Here are some points to consider when designing your website:
Optimizing for mobile devices: The video must re-adjust along with the responsive design of the website; it should also detect the device orientation and display the video accordingly.
Video size and placement: Using HTML or CSS to specify the exact width and height of the embedded video allows the browser to allocate the required bandwidth and avoid unnecessary overhead.
Deferring videos: Embedded videos that are configured to auto-play requires the page to make additional requests for files and resources needed for video playback, which might slow down the page significantly. Deferring videos from loading till after the initial page load has completed frees up bandwidth.
Multimedia content has become a necessity in engaging users and can improve conversion rates on your website. So there are more reasons to embed videos on your web page than there are disadvantages. There is no cost to performance if we optimize the page design, pick the right video format and utilize media delivery providers to handle video processing efficiently.
Contributed by Kameerath Kareem, Writer, catchpoint
When compressing your images, it's very important to make a proper balance between the image size and image quality. The quality of the image will decrease as the size decreases.
Here are a few different methods of optimizing/compressing your image size:
Optimizing images before uploading to the site: Optimizing your images before uploading them to your website may be time consuming, but it's the most effective of all methods.
Offline tools for reducing image size: No matter on which platform or operating system your machine runs, you will easily find a free or paid tool according to your preference. Some recommended offline tools are: Photoshop, GIMP, Trimage, ImageOptim (MAC utility), PNGGauntlet and RIOT (Windows).In RIOT, you can preview and compare your final results with the original image, is very useful.
Online tools for reducing image size: If you don't want to go through the hassle of downloading and installing the offline software on your computer, you can opt for online tools. Some recommended tools are: JPEGMini, PunyPNG, TinyPNG, Kraken.io.
Optimizing images after uploading to WordPress: There are various WordPress plugins available, however, this method is not as efficient as optimizing images before uploading them to your blog. Some of the most popular plugins are: Smush.it, EWWW Image Optimizer, CW Image Optimizer, Imsanity, Hammy. In fact, WordPress has a default JPEG image compression setting for images uploaded to the WordPress media gallery, which compresses by 90% of the original quality. There is no way to change this setting from the admin panel. Read our post explaining how to configure this setting.
With regards to image dimensions, the larger the dimensions the larger the image, which leads to slower page load. Don't depend on resizing the height and width of the images in your post editor, because the browser will still load the image with original dimensions and then resize it.
Therefore, you need to resize the image dimensions before uploading to your website. Check the content area width of your blog and resize images according to it. There are various tools for this purpose, such as PicResize, IrfanView, PicMonkey.
Contributed by Pankaj Kumar, WPBlogCafe
Whenever I start optimizing any website for performance, the biggest bottlenecks are non-optimized images, so I tend to start here. Luckily, it's easy to fix if you approach it systematically.
Here are three steps you should follow when preparing images for the web:
Select the right image format: Broadly-supported image formats for the web are JPEG, PNG, and GIF. GIF is the only format that supports animations, but you should consider the
<video>HTML tag and the WebM format for optimal performance. If you're displaying a still picture, this leaves you with the JPEG and PNG. The general rule of thumb is: Use PNG for illustrations, graphics, logos and all the images with only a few colors. Use JPEG for everything else: Pictures, Illustrations with gradients, and so on.Downsize the images before uploading them to your server: Before your downsize your images, you need to know how your images will be displayed on your website in terms of pixel dimensions. If your content container is 1200 pixels wide, you should downsize your images to be 1200 px wide. If you want to provide the optimal experience for users with retina screens, consider providing 2x image resolution, in our case 2400px (in this case, you should use the srcset and sizes attributes of the
<img>HTML tag).Compress and optimize the images: The last step is to use an appropriate image compression algorithm to strip away as many bytes as possible. This one is the trickiest. It depends on your own preferences and it's the constant debate of what is more important to you: smaller file size or better quality?
Instead of leaving you here, I want to share a sweet spot that serves as a good starting point for JPEG images. When exporting the image from your desktop software (i.e. Photoshop), save the image at the quality set to 90/100. Then run it through one of the online image optimization tools.
If your CMS of choice is WordPress, you can rely on WordPress to handle at least steps 2 and 3. We've tested all leading solutions for WordPress in our 'Ultimate Guide to Image Optimization for WordPress' (more details).
Contributed by Primoz Cigler, ProteusThemes
I like my websites to be fast. Really fast. Websites are often slowed down by images that are included in it. Slideshows are often used these days and the designers may not pay attention to the size of images.
I follow some rules to keep my website fast:
- Resize Images: Use 400x400 image if you're using a container of size 400x400. Do not resize a huge image into smaller dimensions on the website. Instead, resize them using a photo editor like photoshop before including it on the website.
- Image Dimensions: Using height and width attributes facilitate the browser to display a page without any re-flow. If you do not specify a resolution, the browser will have no idea what size the image is until the image is completely downloaded. This causes a small delay. But, if you have a lot of images without specified dimensions, then the delay can be significant and affects page load time.
- JPEG, PNG or SVG: Use an appropriate image format based on the color distribution in the images. The rule of thumb is to use the PNG format if the image has fewer colors. JPEG if the image has too many colors, and use SVG if the image is a line drawing. Watch out for webp which is has higher compression and might replace JPEG.
JPG 10KB
PNG 6KB
SVG 4KB
- Image Compression: Even after resizing an image, there might be unwanted metadata present in the images that are not really required. You can use lossless compression tools available online to remove these metadata. There are task runners (such as gulp or grunt), which can use npm packages like imagemin for compression. Photoshop has "Save for Web" option, which might be useful to reduce the image dimensions, size, and format. If you are not good at Photoshop or do not own a copy, use Tinypng, which does the same job.
- Use a CDN: Content Delivery Networks provide the fastest means to serve images. A Hawaiian should get data from Hawaii, USA or Japan, not from India. CDN delivers images from the closest server and drastically improves the page speed.
Contributed by Sharath Kumar, WebJeda
Further Reading on Image Optimization
- Website image optimization and fast delivery with Cloudinary
- The complete guide to PHP image compression and optimization
- Vue.js Tutorial: Images Optimization for Web Apps
- Python Image Optimization and Manipulation
- Image Optimization in Ruby
- Image Optimization for WordPress
- Learn about the pros and cons of JPEG 2000
- Adopting the WebP Image Format for Android on Websites Or Native Apps
- 10 Website Image Mistakes that Slow Load Times
- Automatically Reduce Image Size Without Losing Quality
- Automate Placeholder Generation and Accelerate Page Loads
- 3 Ways to Do Progressive JPEG Encoding
