Compress and Optimise your images with Zara 4

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Compress and Optimise your images with Zara 4 | Zara 4</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="author" content="Zara 4"> <meta name="content-language" content="EN" /> <meta name="copyright" content="Copyright 2015-2024 Zara 4. All rights reserved." /> <meta property="og:title" content="Compress and Optimise your images with Zara 4 | Zara 4" /> <meta property="og:description" content="Make your website load faster and reduce your site bandwidth. Zara 4 compresses and optimises your photos so they take far less storage space whilst maintaining great quality. Improve your user experience by making your photos load from blurry to sharp." /> <meta property="og:type" content="website" /> <meta property="og:url" content="https://zara4.com" /> <meta property="og:site_name" content="Zara 4" /> <meta property="og:image" content="/img/logo.png"/> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="description" content="Make your website load faster and reduce your site bandwidth. Zara 4 compresses and optimises your photos so they take far less storage space whilst maintaining great quality. Improve your user experience by making your photos load from blurry to sharp."> <meta name="keywords" content="Image Optimisation, Optimise Images, Image Compression, Compress Images, Make your images load faster"> <link rel="apple-touch-icon" sizes="180x180" href="/img/icon/apple-touch-icon.png"> <link rel="icon" type="image/png" href="/img/icon/favicon-32x32.png" sizes="32x32"> <link rel="icon" type="image/png" href="/img/icon/favicon-16x16.png" sizes="16x16"> <link rel="manifest" href="/img/icon/manifest.json"> <link rel="mask-icon" href="/img/icon/safari-pinned-tab.svg" color="#d70017"> <meta name="theme-color" content="#ffffff"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" lazyload="1"> <link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700' rel='stylesheet' type='text/css' lazyload="1"> <link rel="stylesheet" href="/css/bootstrap-theme.min.css" lazyload="1"> <script src="https://asset.zara4.com/js/jquery-1.11.1.min.js"></script> </head> <body data-spy="scroll" data-target="#sub-navigation" role="document"> <div id="document-content"> <nav class="navbar navbar-default"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="/" title="Zara 4"> <img src="/img/logo.png" alt="Zara 4" /> </a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li><a href="https://zara4.com/account">My Account</a></li> <li><a href="https://blog.zara4.com">Blog</a></li> <li><a href="https://zara4.com/pricing">Pricing</a></li> <li><a href="https://zara4.com/docs">Docs</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="https://zara4.com/auth/login">Login</a></li> <li><a href="https://zara4.com/auth/register">Sign up</a></li> </ul> </div> </div> </nav> <div class="shadow-curve-top-15 shadow-curve-top-weak after-nav-spacer"></div> <div class="bg-gradient-1 pt-40 pb-40 mt-m30"> <div class="container"> <div class="panel panel-default panel-square mt-20 mb-20 web-compress"> <div class="panel-body"> <div class="text-center"> <h1 class="mt-5"><b style="font-weight: 600">Zara 4</b> Image Compression</h1> <h2 class="h4 text-muted">Compress and optimize your images online</h2> </div> <hr/> <div class="row"> <div class="col-sm-2"> <p class="lead mb-xs-10 mb-sm-0">1. Compress</p> </div> <div class="col-sm-10"> <div class="row md-gutter"> <div class="col-md-4 col-sm-5 col-rs-6 col-xs-12 mb-xs-10 mb-rs-0"> <div class="input-group"> <span class="input-group-addon cursor-pointer" data-toggle="modal" data-target="#optimisation-mode-modal"> Mode  <i class="fa fa-info-circle"></i> </span> <select class="form-control" id="optimisation-mode"> <option value="highest">Fastest Loading</option> <option value="compromise" selected>Compromise</option> <option value="lowest">Best Quality</option> </select> </div> </div> <div class="col-sm-4 col-md-3 col-rs-6 col-xs-12"> <div class="input-group"> <span class="input-group-addon">Maintain EXIF</span> <select class="form-control" id="maintain-exif"> <option value="yes">Yes</option> <option value="no" selected>No</option> </select> </div> </div> </div> </div> </div> </div> <hr class="dashed"/>  <div class="panel-body"> <div class="row"> <div class="col-sm-2"> <p class="lead mb-xs-10 mb-sm-0">2. Resize</p> </div> <div class="col-sm-10"> <div class="row lg-gutter"> <div class="col-sm-4 col-rs-4 mb-xs-10 mb-rs-0"> <div class="input-group"> <span class="input-group-addon cursor-pointer" data-toggle="modal" data-target="#resize-mode-modal"> Mode  <i class="fa fa-info-circle"></i> </span> <select class="form-control" id="resize-mode"> <option value="none">None</option> <option value="bundle">Web Bundle</option> <option value="stretch">Stretch</option> <option value="crop">Crop</option> </select> </div> </div> <div class="col-sm-8 col-md-6 col-rs-8"> <div class="row sm-gutter"> <div class="col-sm-6 col-xs-6"> <div class="input-group"> <span class="input-group-addon pl-xs-10 pr-xs-10">Width</span> <input class="form-control pl-xs-5 pr-xs-5 pl-sm-10 pr-sm-10" id="resize-width" type="number" min="0" value="640"/> <span class="input-group-addon pl-xs-5 pr-xs-5 pl-sm-10 pr-sm-10">px</span> </div> </div> <div class="col-sm-6 col-xs-6"> <div class="input-group"> <span class="input-group-addon pl-xs-10 pr-xs-10">Height</span> <input class="form-control pl-xs-5 pr-xs-5 pl-sm-10 pr-sm-10" id="resize-height" type="number" min="0" value="480"/> <span class="input-group-addon pl-xs-5 pr-xs-5 pl-sm-10 pr-sm-10">px</span> </div> </div> </div> </div> </div> </div> </div> </div> <hr class="dashed"/>  <div class="panel-body"> <div class="row"> <div class="col-sm-2"> <p class="lead mb-xs-10 mb-sm-0">3. Colour</p> </div> <div class="col-sm-10"> <div class="row lg-gutter"> <div class="col-lg-4 col-md-5 col-sm-6 col-rs-6 mb-xs-10 mb-rs-0"> <div class="input-group"> <span class="input-group-addon"> Enhancement </span> <select class="form-control" id="colour-enhancement"> <option value="none">None</option> <option value="improve-colour">Improve Colour</option> <option value="dingy-room">Dingy Room</option> </select> </div> </div> </div> </div> </div> </div> <div class="bg-grey-2 border-top-1"> <div class="panel-body mt-10"> <div id="file-wrapper"> <form method="POST" action="https://zara4.com/optimise-photo" accept-charset="UTF-8" class="dropzone" id="dropzone"><input name="_token" type="hidden" value="Lfi3cWqisvCOWuR3JANEJToKdCUd5N65BpYutaSC"> <div class="dz-default dz-message"> <div><i class="fa fa-download"></i></div> <div class="text">Drop images here to optimize</div> <div class="sub-text">(Or click to browse)</div> </div> </form> </div> <div class="text-right mt-20 mb-5 pr-15"> <span id="import-from-dropbox-button" class="mb-xs-10 mb-sm-0 btn btn-primary btn-inverse btn-xs btn-square btn-squared">Import from Dropbox</span> <span id="import-from-google-drive-button" class="mb-xs-10 mb-sm-0 btn btn-primary btn-inverse btn-xs btn-square btn-squared">Import from Google Drive</span> </div> </div> </div> <div id="file-table-wrapper" class="panel-body display-none border-top-1"> <form method="POST" action="https://zara4.com/download-all" accept-charset="UTF-8" id="download-all-form" enctype="multipart/form-data"><input name="_token" type="hidden" value="Lfi3cWqisvCOWuR3JANEJToKdCUd5N65BpYutaSC"> <table id="file-table" class="table table-striped table-bordered table-sm"> <thead> <tr> <th class="col-md-4">File Name</th> <th class="col-md-1">Original</th> <th class="col-md-1">Compressed</th> <th class="col-md-1">Saved</th> <th class="col-md-1"></th> <th class="col-md-2"></th> </tr> </thead> </table> <div class="text-center mt-25"> <button type="submit" class="btn btn-inverse btn-success" id="download-all-btn">Download all</button> <span class="btn btn-sm btn-inverse btn-danger" id="cancel-all-btn">Cancel all</span> </div> </form></div> <div class="text-center p-15 bg-grey-2 border-top-1"> <div><b class="light">The Free web interface has a file size limit of 1 MB</b></div> <div><a href="https://zara4.com/auth/register">Register</a> to increase the limit to 32 MB</div> </div> </div> </div></div> <div class="bg-white-1"> <div class="container"> <div class="text-center mt-30 mb-30 pl-10 pr-10"> <h2 class="h1">Zara 4 <b>Compresses</b> and <b>Optimizes</b> your images</h2> </div> </div></div> <div class="shadow-curve-top-15 shadow-curve-top-medium"> <div class="container"> <div class="mt-50 mb-50"> <div class="text-center"> <h2 class="h1 mt-0">Spot the difference?</h2> <p class="lead">Move the slider to compare the images and see how Zara 4 image compression performs</p> </div> <div class="shadow-stage shadow-stage-lg image-comparison-slider"> <div class="panel mb-0"> <div class="owl-carousel owl-theme"> <div> <figure class="cd-image-container"> <img src="/img/comparison-slider/derwent-water-lake/compressed.jpg" alt="Zara 4 Compressed Image"> <span class="cd-image-label text-right" data-type="modified"><b>Zara 4 Compressed</b><br/>128.6 kB</span> <div class="cd-resize-img"> <img src="/img/comparison-slider/derwent-water-lake/original.jpg" alt="Original Image"> <span class="cd-image-label text-left" data-type="original"><b>Original Image</b><br>656.0 kB</span> </div> <div class="cd-image-label" style="text-align: center; left: 0; right: 0; margin-left: auto; margin-right: auto; width: 180px"> <b>Percentage Saving</b><br/> 80.4% </div> <span class="cd-handle"></span> </figure> </div> <div> <figure class="cd-image-container"> <img src="/img/comparison-slider/golf/compressed.jpg" alt="Zara 4 Compressed Image"> <span class="cd-image-label text-right" data-type="modified"><b>Zara 4 Compressed</b><br/>172.1 kB</span> <div class="cd-resize-img"> <img src="/img/comparison-slider/golf/original.jpg" alt="Original Image"> <span class="cd-image-label text-left" data-type="original"><b>Original Image</b><br>995.0 kB</span> </div> <div class="cd-image-label" style="text-align: center; left: 0; right: 0; margin-left: auto; margin-right: auto; width: 180px"> <b>Percentage Saving</b><br/> 82.6% </div> <span class="cd-handle"></span> </figure> </div> <div> <figure class="cd-image-container"> <img src="/img/comparison-slider/urban/compressed.jpg" alt="Zara 4 Compressed Image"> <span class="cd-image-label text-right" data-type="modified"><b>Zara 4 Compressed</b><br/>72.3 kB</span> <div class="cd-resize-img"> <img src="/img/comparison-slider/urban/original.jpg" alt="Original Image"> <span class="cd-image-label text-left" data-type="original"><b>Original Image</b><br>149.2 kB</span> </div> <div class="cd-image-label" style="text-align: center; left: 0; right: 0; margin-left: auto; margin-right: auto; width: 180px"> <b>Percentage Saving</b><br/> 62.7% </div> <span class="cd-handle"></span> </figure> </div> <div> <figure class="cd-image-container"> <img src="/img/comparison-slider/cornwall-beach/compressed.jpg" alt="Zara 4 Compressed Image"> <span class="cd-image-label text-right" data-type="modified"><b>Zara 4 Compressed</b><br/>71.1 kB</span> <div class="cd-resize-img"> <img src="/img/comparison-slider/cornwall-beach/original.jpg" alt="Original Image"> <span class="cd-image-label text-left" data-type="original"><b>Original Image</b><br>670.7 kB</span> </div> <div class="cd-image-label" style="text-align: center; left: 0; right: 0; margin-left: auto; margin-right: auto; width: 180px"> <b>Percentage Saving</b><br/> 85.3% </div> <span class="cd-handle"></span> </figure> </div> </div> <div class="clearfix"></div> </div> </div> <script> $(document).ready(function(){ $('.owl-carousel').owlCarousel({ items: 1, loop: true, nav: true, navText: ['<i class="fa fa-angle-left mr-5"></i>Prev', 'Next<i class="fa fa-angle-right ml-5"></i>'], navContainerClass: '', navClass: ['btn btn-primary btn-inverse pull-left m-10', 'btn btn-primary btn-inverse pull-right m-10'], dotClass: 'ics-dot', dotsClass: 'owl-dots m-10', autoplay: true, autoplayHoverPause: true, autoplayTimeout: 5000 }); }); </script> </div> </div></div> <div class="shadow-curve-bottom-15 shadow-curve-bottom-medium"></div> <div class="bg-white-1"> <div class="container"> <div class="text-center mt-35 mb-35 pl-10 pr-10"> <h2 class="h1">Get started now with <b>15MB</b> of free compression quota</h2> <p class="lead">Create your free Zara 4 account and start optimizing images</p> <div class="mt-25"> <a class="btn btn-primary btn-md" href="https://zara4.com/auth/register">Register Now</a> <a class="btn btn-primary btn-md btn-inverse" href="https://zara4.com/pricing">See Pricing and Plans</a> </div> </div> </div></div> <div class="shadow-curve-top-15 shadow-curve-top-medium mb-40"></div> <div> <div> <div class="container"> <div class="text-center"> <h2 class="h1 mt-0">Getting started with Zara 4</h2> <p class="lead">How you can start using Zara 4 to compress and optimize your images</p> </div> <div class="shadow-stage shadow-stage-lg"> <div class="panel mb-0"> <div class="panel-body mt-30 mb-20"> <div class="pl-lg-20 pr-lg-20"> <div class="row gutter-xxl"> <div class="col-xs-12 col-md-4 col-sm-8 col-sm-offset-2 col-md-offset-0"> <div class="text-center p-20"> <img class="height-90" src="/img/icons/window-layout.svg" /> <h4 class="text-uppercase mt-20"><b>Web Interface</b></h4> <p class="mb-15 height-md-100 block"> Simply drag and drop your images to start compressing. </p> <a class="btn btn-primary btn-inverse btn-sm mt-15" href="#top">Web Interface</a> </div> </div> <div class="col-xs-12 hidden-md hidden-lg"> <hr class="ml-m-20 mr-m-20"/> </div> <div class="col-xs-12 col-md-4 col-sm-8 col-sm-offset-2 col-md-offset-0"> <div class="text-center p-20"> <img class="height-90" src="/img/icons/plugins.png" /> <h4 class="text-uppercase mt-20"><b>Platform Plugins</b></h4> <p class="mb-15 height-md-100 block"> Using WordPress or Joomla? Install the Zara 4 plugin and start automatically compressing your images now. </p> <a class="btn btn-primary btn-inverse btn-sm mt-15" href="https://zara4.com/plugins">Plugins</a> </div> </div> <div class="col-xs-12 hidden-md hidden-lg"> <hr class="ml-m-20 mr-m-20"/> </div> <div class="col-xs-12 col-md-4 col-sm-8 col-sm-offset-2 col-md-offset-0"> <div class="text-center p-20"> <img class="height-90" src="/img/icons/flask.png" /> <h4 class="text-uppercase mt-20"><b>Developer API</b></h4> <p class="mb-15 height-md-100 block"> Integrate image compression into your applications using the Zara 4 image optimization API and SDKS. </p> <a class="btn btn-primary btn-inverse btn-sm mt-15" href="https://zara4.com/docs/getting-started/welcome">API Docs</a> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class="mt-50"> <div class="container"> <div class="text-center"> <h2 class="h1 mt-0">Accelerate Your Websites And Applications</h2> <p class="lead">Compressing your images makes your website load faster and cost less to run</p> </div> <div class="shadow-stage shadow-stage-lg"> <div class="panel mb-0"> <div class="panel-body pt-15 pb-15"> <div class="p-50 pl-xs-30 pr-xs-30 pl-md-50 pr-md-50 text-center-xs text-left-md"> <div class="row xxl-gutter"> <div class="col-md-6 col-xs-12 col-md-push-6"> <h3 class="mt-0 mb-xs-25 mb-md-20"><b>Speed Up Your Websites And Apps</b></h3> <p class="mb-20"> Images make up a large part of what your users download when visiting your website. Similarly uncompressed images can make your apps bulky and slow. If your photos aren't optimized they could be holding you back. </p> <p> Compressing your images with Zara 4 is the simple way to ensure your images are lightweight, fast loading and production ready. </p> </div> <div class="col-md-6 col-xs-12 col-md-pull-6 text-center"> <img class="w-xxs-100-percent w-md-230 w-xs-200 mt-xs-80 mt-md-60 mt-lg-50" src="/img/icons/dashboard.png"/> </div> </div> </div> <hr/> <div class="p-50 pl-xs-30 pr-xs-30 pl-md-50 pr-md-50 text-center-xs text-left-md"> <div class="row xxl-gutter"> <div class="col-md-6 col-xs-12"> <h3 class="mt-0 mb-xs-25 mb-md-20"><b>Cut Your Running Costs</b></h3> <p class="mb-xs-20 mb-md-10"> Optimizing your images with Zara 4 can significantly reduce your data transfer and file storage fees, saving you money by cutting your operating costs. </p> <p class="mb-xs-20 mb-md-10"> Optimized images use less file storage space, load faster and reduces the network usage of your servers. </p> </div> <div class="col-md-6 col-xs-12 text-center"> <div class="display-inline-block text-left mt-xs-60 mt-md-45 ml-xs-0 ml-md-0 w-xs-280 w-sm-310 w-xxs-200 w-md-100-percent"> <div class="media"> <div class="media-left pr-20 pr-xxs-15"> <img class="media-object height-xxs-25 height-xs-35" src="/img/icons/check.png"> </div> <div class="media-body"> <span class="text-feature">Save Storage Space</span> </div> </div> <div class="media"> <div class="media-left pr-20 pr-xxs-15"> <img class="media-object height-xxs-25 height-35" src="/img/icons/check.png"> </div> <div class="media-body"> <span class="text-feature">Faster Loading Content</span> </div> </div> <div class="media"> <div class="media-left pr-20 pr-xxs-15"> <img class="media-object height-xxs-25 height-35" src="/img/icons/check.png"> </div> <div class="media-body"> <span class="text-feature">Reduce Data Transfer</span> </div> </div> </div> </div> </div> </div> <hr/> <div class="p-50 pl-xs-30 pr-xs-30 pl-md-50 pr-md-50 text-center-xs text-left-md"> <div class="row xxl-gutter"> <div class="col-md-6 col-xs-12 col-md-push-6"> <h3 class="mt-0 mb-xs-25 mb-md-20"><b>Boost Your Search Ranking</b></h3> <p class="mb-20"> Google and other search engines now consider a website's loading speed an important factor when ranking websites. Faster loading websites are looked upon more favourably than slow loading websites. </p> <p> Optimizing your images with Zara 4 can boost your website's search ranking and Search Engine Optimization by speeding up your page loading time. </p> </div> <div class="col-md-6 col-xs-12 text-center col-md-pull-6"> <div class="mt-xs-60 mt-md-15"> <img class="w-md-340 w-xs-250 w-sm-280 w-rs-280 w-xxs-100-percent" src="/img/icons/boost-your-search-ranking.png" /> </div> </div> </div> </div> <hr/> <div class="p-50 pl-xs-30 pr-xs-30 pl-md-50 pr-md-50 text-center-xs text-left-md"> <div class="row xxl-gutter"> <div class="col-md-6"> <h3 class="mt-0 mb-xs-25 mb-md-20"><b>Progressive Loading</b></h3> <p class="mb-xs-20 mb-md-10"> Many images on the web load from top to bottom meaning you have to wait for the entire picture to download before you can see what it is. </p> <p class="mb-xs-20 mb-md-10"> Zara 4 encodes images differently, so instead your pictures load progressively in layers from blurry to sharp. The result is your pictures are visible in a fraction of the time and become increasingly detailed as the image loads. </p> <p> Displaying images faster makes your website snappier and more professional, improving the user experience of visitors to your website. </p> </div> <div class="col-md-6"> <div class="row"> <div class="col-xs-12 col-rs-10 col-sm-8 col-md-11 col-lg-10 col-rs-offset-1 col-sm-offset-2 col-md-offset-1"> <div class="panel mt-xs-60 mt-md-30"> <img class="img-fw" src="/img/animation.gif" alt="Animation demonstrating loading images from blurry to sharp, when optimized by Zara 4" /> <div class="ml-m-1 mr-m-1 mb-m-1"> <table class="table table-bordered mb-0"> <tr> <td class="text-center width-50-percent"><h4>Normal Image</h4></td> <td class="text-center width-50-percent"><h4>Zara 4 Image</h4></td> </tr> </table> </div> </div> <div class="text-center"><small class="text-muted">For demonstration purposes. Currently supported for JPG</small></div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div>  <div class="footer"> <div class="container"> <div class="text-center"> <ul class="list-inline"> <li><a href="https://zara4.com/about-us">About us</a></li> <li><a href="https://zara4.com/contact-us">Contact us</a></li> <li><a href="https://blog.zara4.com">Blog</a></li> <li><a href="https://zara4.com/pricing">Pricing</a></li> <li><a href="https://zara4.com/terms-of-use">Terms of use</a></li> <li><a href="https://zara4.com/privacy-policy">Privacy Policy</a></li> <li><a href="https://zara4.com/attributions">Attributions</a></li> </ul> </div> </div> <div class="container pt-5"> <div class="text-center copyright-notice"> © 2015 - 2024 <a href="/">Zara 4</a>, All Rights Reserved </div> </div> </div> </div>  <div class="modal fade" id="email-verification-required-modal" tabindex="-1" role="dialog" aria-labelledby="email-verification-required-modal-label"> <div class="modal-dialog modal-md" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="email-verification-required-modal-label">You must verify your email address</h4> </div> <div class="modal-body"> <p> You must verify your email address before you can compress images. </p> <form method="POST" action="https://zara4.com/verify-email/required" accept-charset="UTF-8"><input name="_token" type="hidden" value="Lfi3cWqisvCOWuR3JANEJToKdCUd5N65BpYutaSC"> <div class="text-center mt-20"> <button class="btn" type="submit"><i class="fa fa-refresh mr-5"></i> Resend verification email</button> </div> </form> </div> </div> </div> </div>  <div class="modal fade" id="optimisation-mode-modal" tabindex="-1" role="dialog" aria-labelledby="optimisation-mode-modal-label"> <div class="modal-dialog modal-md" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="optimisation-mode-modal-label">Optimisation Mode</h4> </div> <div class="modal-body"> <p> <b>Fastest Loading</b> - Maximum compression. You may occasionally find some distortion for some images. </p> <hr class="dashed"/> <p> <b>Compromise</b> - Some compression, but maintain the image standard. Medium level optimisation. </p> <hr class="dashed"/> <p> <b>Best Quality</b> - Maintaining quality is the goal. Compress as much as possible without altering the image. </p> </div> </div> </div> </div>  <div class="modal fade" id="format-info-modal" tabindex="-1" role="dialog" aria-labelledby="format-info-modal-label"> <div class="modal-dialog modal-md" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="format-info-modal-label">Image Format</h4> </div> <div class="modal-body"> <p> <b>Match</b> - The compressed image will be the same format as your original image. </p> <hr class="dashed"/> <div class="alert alert-warning"> <small>Changing the output format can result in file size inflation.</small> </div> <p> <b>JPEG</b> - The outputted image will be a JPEG. </p> <p> <b>PNG</b> - The outputted image will be a PNG. </p> </div> </div> </div> </div>  <div class="modal fade" id="resize-mode-modal" tabindex="-1" role="dialog" aria-labelledby="resize-mode-modal-label"> <div class="modal-dialog modal-md" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="resize-mode-modal-label">Resize Mode</h4> </div> <div class="modal-body"> <p> <b>None</b> - The image will not be resized. </p> <hr class="dashed"/> <p> <b>Web Bundle</b> - A selection of resized images and thumbnails will be created for use on the web. </p> <hr class="dashed"/> <p> <b>Stretch</b> - The entire image will be stretch to your dimensions. </p> <hr class="dashed"/> <p> <b>Crop</b> - The image will cropped to match your dimensions. </p> </div> </div> </div> </div>  <div class="modal fade" id="registration-required-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog modal-md" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">Registration Required</h4> </div> <div class="modal-body"> <p> You're optimising photos like a pro! You've just hit the processing limit for anonymous users. </p> <p class="mb-0"> To continue, simply register with us for free! </p> </div> <div class="modal-body shadow-curve-top-15 shadow-curve-top-weak border-top-1"> <div class="mt-5"> <form method="POST" action="https://zara4.com/auth/register" accept-charset="UTF-8"><input name="_token" type="hidden" value="Lfi3cWqisvCOWuR3JANEJToKdCUd5N65BpYutaSC"> <fieldset> <div class="form-group"> <input placeholder="Your Name" class="form-control input-lg" name="name" type="text" value=""> </div> <div class="form-group"> <input placeholder="Email" class="form-control input-lg" name="email" type="email" value=""> </div> <hr class="dashed"/> <div class="form-group"> <input type="password" class="form-control input-lg" name="password" placeholder="Password"> </div> <div class="form-group"> <input type="password" class="form-control input-lg" name="password_confirmation" placeholder="Password Confirmation"> </div> <hr class="dashed"/> <div class="text-center"> <div style="display: inline-block;" class="g-recaptcha" data-sitekey="6LfEqCMTAAAAABaYa3OqHyt9xrI_A0ASDNqEJ0uT"></div> </div> <hr class="dashed mt-10"/> <div class="text-center"> <button type="submit" class="btn btn-primary"><i class="fa fa-check"></i> Register now</button> <a class="btn btn-default" href="https://zara4.com/auth/login">Already registered?</a> </div> </fieldset> </form> </div> </div> </div> </div> </div> <div class="modal fade" id="upgrade-required-modal" tabindex="-1" role="dialog" aria-labelledby="upgrade-required-modal-label"> <div class="modal-dialog modal-md" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="upgrade-required-modal-label"><b>Upgrade</b> Required</h4> </div> <div class="modal-body"> <p> You've exceeded your account quota. To continue processing photos you need to upgrade your monthly plan or purchase a one-time quota. </p> </div> <div class="modal-footer"> <div class="text-center"> <a class="btn btn-primary" href="https://zara4.com/account/plan/monthly">Edit monthly plan</a> <a class="btn btn-default" href="https://zara4.com/account/plan/one-time">Add one-time package</a> </div> </div> </div> </div> </div>  <div class="modal fade" id="download-all-modal" tabindex="-1" role="dialog" aria-labelledby="download-all-modal-label"> <div class="modal-dialog modal-md" role="document"> <div class="modal-content"> <div class="modal-body"> <div class="media"> <div class="media-left"> <img class="media-object" src="/img/loading/ripple.gif" alt="..."> </div> <div class="media-body pl-10"> <h3 class="mt-5 mb-0">Preparing images for download...</h3> </div> </div> </div> </div> </div> </div> <script src="https://asset.zara4.com/js/dropzone.js"></script> <script src="https://asset.zara4.com/js/bootstrap-3.3.5.min.js"></script> <script src="/js/dependencies.min.js"></script> <script type="text/javascript" src="https://www.dropbox.com/static/api/2/dropins.js" id="dropboxjs" data-app-key="k5bgpqfw2ouv6q0"></script> <script type="text/javascript" src="https://apis.google.com/js/api.js?onload=onApiLoad"></script> <script type="text/javascript" src="/js/web-compress.min.js"></script> <script> $(function () { $('[data-toggle="tooltip"]').tooltip() }); // Pretty print code highlighting !function ($) { $(function(){ window.prettyPrint && prettyPrint() }) }(window.jQuery); </script> <script type="application/ld+json"> { "@context" : "http://schema.org", "@type" : "WebSite", "name" : "Zara 4", "url" : "https://zara4.com" } </script> <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "Organization", "url": "https://zara4.com", "logo": "https://zara4.com/img/icon-256x256.png", "sameAs" : [ "https://www.facebook.com/Zara-4-645511842258305", "https://plus.google.com/101336007646004602821", "https://github.com/zara-4" ] } </script> </body> </html>

CINXE.COM

Compress and Optimise your images with Zara 4 | Zara 4