Glossy, image optimization option for photographers

Glossy - optimization for photographers
Image source: Cameron Kirby

ShortPixel introduces a new image optimization option called Glossy. The new feature is a lossy optimization algorithm calibrated for the photographer’s needs. We still recommend Lossy for the most user cases, because it has the best balance between image optimization and picture quality.

Why we built Glossy?

We added the new optimization option because some professional photographers asked for it. For them,  image quality comes first,  before page speed .

Photographers are able to see details in images which most of us might miss. Many of these users always preferred lossless optimization to lossy.  But, web standards, mobile popularity and visitors expectations changed in the last years, and lossless optimized images became too big for the present market standards.

The images optimized with Glossy look identical to the human eye with the original images, but they comply with the present criteria regarding the web applications.

 

Lossy, Glossy or Lossless – which one is the best for me?

Lossy is the best option for the most users. The images processed with Lossy algorithms are the smallest optimized images you can get. So, if the speed of your site is paramount and you want the best balance between optimization and picture quality, we recommend you to continue to use Lossy optimization.

Glossy is the best choice if you still care about Google Insights but you believe that a slight loss of page speed is an acceptable compromise for a top notch image quality.

Lossless optimized images are pixel-by-pixel identical with the originals, but they offer a smaller size reduction compared to either Lossy or Glossy processed files. If you want your images remain untouched, then select this option.

 

Lossy, Glossy, Lossless – a comparison

The best way to choose the proper optimization for your images is to see how they look with your own eyes. Here is an example, but you could make your own tests using your own images.

Original image

Original image

Please compare the cropped images or click on them to open the full versions, and see how they suit your needs.

Original (cropped)

Original Image cropped.
Original image cropped. Full sized image has 2.32 MB.

Lossless (cropped)

Lossless image cropped
Lossless image cropped. Full sized image has 2.30 MB.

Glossy (cropped)

Glossy image cropped.
Glossy image cropped. Full sized image has 514,4 kB.

Lossy (cropped)

Lossy image cropped.
Lossy image cropped. Full sized image has 407,9 kB.

How to glossy-optimize your images?

Go to ShortPixel settings panel, General tab, and change the optimization method to Glossy:

How to choose Glossy image optimization.
How to choose image optimization type.

After you set your image optimization method, you could either process images one by one from the Media Library or you could go the ShortPixel Bulk page and re-optimize all your images.

 

Glossy integration, next steps.

We spent a lot of time tweaking the algorithms for Glossy, and we are confident that it will cover most of the photographers needs. Give it a try and install it from WordPress.org!

Next steps are to add the Glossy optimization to our online image compressor and to make the new feature known to the photography community.

We really need your help to grow! Let your friends know about ShortPixel WordPress plugin and the friendly team that built it 🙂

How to improve your Google Insights score

Why is everybody so obsessed with Google Insights score? Because it matters! The test results are an important SEO factor, and Google Insights is a valuable tool for measuring your website usability.

We will teach you how to optimize and use your images if you want to improve your Google Insights results.

 

Use properly sized images

Google Insights tool
When ShortPixel users ask us to help them with Google Insights scores we usually answer that “one problem noted by Google is related to using images that are too large for their placeholder”.

For example, if you have a 2,000px x 3,000px image which is scaled down to 600px x 700px then Google will tell you also that “Properly formatting and compressing images can save many bytes of data.”
Here is an example of how such an oversized image appears when you click mouse-right and check “View Image Info” option:

lage_image

Adjust the size of these images and then your Google Insights score should improve.

 

Use lossy optimization

There are very few situations when lossless optimization is needed. So, we strongly recommend you to use the lossy option if the speed of your website is important. If there is an image that you don’t like how it was optimized you can always optimize it again as lossless or restore it, if you have Image Backup option active.

image re-optimization

 

Check the cache issues

Your website sometimes serves old, non-optimized images if you use a cache plugin or if your host provider has a caching solution.

If you suspect that an image is not optimized, the easiest way to see if it is a cache issue is to add “?something” at the end of an image URL, then the caching is overridden and the actual optimized images is read: https://unoptimizedimageurl.jpg?something.

So, after you optimized your images be sure that you refresh your cache and if the issue persists please ask your hosting provider to do the same for your website/webserver.

 

Images from other sources

From time to time, you use images from other sources like the logos of various services or hot-linked images from other websites. Check if these images are optimized and if they are the reason your page is loading too slow.

 

Remember: Google Insights is just a tool

Google Insights doesn’t look at your website, and it cannot judge which is the proper image quality of your images. What it does is to automatically analyze your web pages and compare them with some good practices.

We made several tests, and we adjusted  our image optimization algorithms to have the best compression without compromising the image quality. Of, course you can process your media files again and again, and stretch them with few more bytes, but that won’t help much because if an image is optimized multiple times it will start to show visible artifacts. And that’s not something you’d want to happen, right?

 

Relax

We encourage you to use Google Insights and also to apply the advice from this article, but 100/100 points on Google Insights test is not your goal, having a good website, with good content and happy visitors is what matters.

And if you want to relax a little bit here are some scores from the big players:

Guardian.co.uk – 65/100
AdWords.Google.Com – 67/100
Airbnb.com – 75/100
Makeuseof.com – 54/100
Moz.com – 73/100

How to optimize images in WordPress themes and plugins with ShortPixel

You already know that website speed has a tremendous influence on your SEO strategy, but one less known fact is that you can optimize images in WordPress themes and plugins also with ShortPixel, not only the images and thumbnails from the Media Library.

Think for a moment, what images are displayed most often on your website? Usually not the images featured in your most popular articles, but the graphics included in your WordPress theme. They are shown on every page of your site. Reducing the size of these images can give your website a speed boost, and better results in Google Insights tests. Of course, the improvement depends on the theme you use. A heavy graphics theme would benefit more than a minimal one.

Optimizing images in your WordPress theme with ShortPixel is a simple process:

1. The first step is to navigate to the ShortPixel settings menu, and click on Advanced tab.

Image Optimization WP themes

2. Then click on the Select button, and choose the folder where your theme is installed. Or you can select the WordPress themes folder if you want to optimize the images from all your themes.

Select WordPress theme

After you located and selected the theme folder, click on Add folder.

Stop Optimizing WP theme

The theme folder is now accessible for ShortPixel image optimization process.

In case you mistakenly choose a wrong folder then you can click on Stop optimizing to  exclude the folder from optimization.Theme images optimization

3.  The optimization status for each image in the theme folder can be seen in the Other Media list, under the Media menu.

Other media Gallery

All we did was to make the theme folder accessible to ShortPixel from Settings > Advanced. You can optimize any of your WP theme and plugins’ images in the same way.

For this tutorial we used Portofolio Gallery by webdorado. It’s a beautiful theme with a lot of good reviews.

Importance of Image Optimization in Email

Hopefully most of you already optimize the images of your website for better performance. But do you a make the same effort to polish your images for best performance in emails?

You should! Since large images might cause some frustration and disappointment for your email subscribers especially when they open your email on their mobile while they are using slower mobile internet connections.

 

Email load time matters

The next illustration gives you an idea about how much time it might take for a 1 MB email to load on different connections.

time-to-load

Image source: Chamaileon.io

It should load seamlessly on modern 4G or 3G connections, but in case of remote locations with limited access to modern networks, the email load time might be simply unbearable for most.
People are always in a rush and are super impatient with websites, apps and email too. According to a recent blog post by Hobo-web.co.uk your website should load in maximum 4 seconds but 47% of consumers expect a web page to load in 2 seconds or less.

I think, emails should load even faster, since they are definitely less complex than a website. So what happens if your email loads for over 2 seconds on a slower 3G connection?

Your subscribers will simply close the message, and that’s it: a lost opportunity, a lost prospect and a lost conversion for you.

 

Does image size influence email deliverability?

In case of marketing emails the images you use in your email are not actually attached to your email message, they are only linked into the template from your web storage.

Email deliverability depends mostly on:

– Your IP and domain reputation
– Quality of your list (double opt-in vs single opt-in)
– HTML code quality
– Subject line and email copy

So generally speaking the size and weight of your images don’t influence the deliverability of your emails.

But the number of images do!

 

Too many images might cause you trouble

A while ago most SPAM emails used to contain just one large image, or many little images with very short text in order to fool SPAM filters that were looking for spammy words in the text of the email.

These days SPAM filters use more sophisticated methods to check the quality of an email message and the senders reputation is the most important scoring factor.

But text to image ratio is still among the SPAM factors and on top of that, if your message consists of purely images, those users who have images disabled by default won’t see a thing from the content of your email (only ALT texts).

When you create a new email template it’s always worth testing the SPAM score of your email. Thankfully there are couple of free services online that you can use.

mail-tester-comImage source: Mail-tester.com

These tools won’t give you guidance on image optimization but will give you an idea about the text to image ratio, which should be around 80% text compared to 20% image.

 

Heavy images = higher hosting costs

If you use a web based email service provider that takes care of image hosting for you, the hosting costs are not really a factor for you… rather for them, I admit.

But if you have your own self hosted email software and image server, you’ll need to cover the hosting costs as well.

In case of a cloud provider (like AWS or Cloudinary) you’ll be charged based on the bandwidth your servers use. The larger images you have the more bandwidth your messages will consume.
This is one of the reasons why most email service providers have some kind of built-in limitations when it comes to image size and weight.

 

What about retina screens?

retinacomparison

Image source: Designmodo

Retina screens display double or more pixels in the same amount of space than a traditional display. It makes texts and images sharper and more enjoyable for the eye.

Most smartphones, even the cheaper ones use some kind of retina screens. Some might even add 4K, 8K or even higher resolution screens to their freshest mobile devices. So it’s a question we need to tackle.

The easiest approach for optimizing your images to retina screens is to double the size of your images. What does it mean?

If you want your logo to display in 200 px width on a desktop screen add a 400 px wide image, and size it down to 200 px. This approach will work on mobile screens too.

But yes, this way you’ll end up with significantly larger images buy default, so tools like Shortpixel have an increasingly important role in helping you to reduce file sizes.

Typical image sizing issues in email

– Print quality (300 dpi) emails
– Use of large, 2000 px+ wide images – It’s easy to make this mistake if you upload images right from your DSLR camera or even from modern smart phones with 10+ Megapixel cameras.
– Wrong file format – PNG is not always the best

How to optimize your images for email?

Export web version

Always export web version of your images with max 72 dpi – If you download a stock photo, makes sure you open it with an appropriate image editor and resave in desired quality.

Choose the right format for the right purpose.

– JPG for photographs,
– PNG-8 for simple images,
– PNG-24 for images and photographic elements combined.

Always resize images for email

If you obey the limitations of email design, the content of your email should stay under 650 px, most likely at 600 px.

Even if you take into account retina screens the content images in your email should not be wider than 1200 or 1300 px max.

If you want to add stylish full-width background images to your emails, you’re better use repeatable patterns.

If you really insist to use large full-width background images, please thoroughly test for ideal image quality and width, since there’s no “one size fits all” rule to apply here.

Use an image optimization tool

After you made sure that your images are sized properly and are saved in satisfactory quality you should use an image optimization solution like Shortpixel.com to further decrease the weight of your images with up to 90%!

With the rise of retina displays I believe that image optimization becomes an increasingly important issue not only for websites but for email templates as well.

roland-profil-300px

Author: Roland Pokornyik, CEO / Co-founder @ Chamaileon.io & EDMdesigner.com
Working on a standalone email builder for teams which brings easy to use – Canva like – design experience into email template production.

Twitter: https://twitter.com/RolFic
Linkedin: https://hu.linkedin.com/in/rolfic

Black Friday Deal: optimize x2 more images with ShortPixel Plugin

Black Friday Deal - ShortPixel PluginOn Black Friday, ShortPixel WordPress plugin brings you twice as many image optimization credits! From 24th to 28th of November 2016, for any purchase, you receive x2 image optimization credits  (See all plans).

Different ShortPixel plans for different image optimization needs

This Black Friday deal could cover all your image optimization needs. If you have only a few articles a month, then the FREE account with 200 credits is enough. For medium size websites with a lot of images to optimize, you can buy a $9.99 monthly plan which gives you 24.000 images/month.

ShortPixel Black Friday deal is also perfect for those who have a variable number of images added each month and cannot easily estimate their monthly image optimization needs. For them, we recommend the One-time Plans:

– $9.99 One-time plan would give you 20.000 optimized images.
– $19.99 One-time plan would give you 60.000 optimized images.
– $29.99 One-time plan would give you 100.000 optimized images.

Offer is valid for both monthly and one-time plans. For paid and for FREE plans.
Please also note that monthly plans can be canceled anytime and one-time credits never expire.

How to use optimized Retina images on your WordPress site for top user experience on Apple devices

use optimized retina images on your WordPress website
Retina Display Logo

In this article I will show you how to use optimized Retina images on your website, in order to offer an amazing user experience on Apple devices.

Retina is a special type of display present on Apple devices, having a higher pixel density than usual displays. This display allows images to have an extremely crisp look, as if they were printed, by using double resolution images, instead of the usual resolution images for the same screen space.

When an Apple product has a Retina Display, each user interface widget is doubled in width and height to compensate for the smaller pixels. Apple calls this mode HiDPI mode.

What does this mean for your (WordPress) website?

If you don’t provide images with double resolution on your website, your images will look on a Retina display the same as they look on a lesser pixel density screen. Nothing gained, nothing lost.

But if you provide these images, your website will look more shiny and crisp on these devices, thus being  more appealing to your visitors. This seems like the sensible alternative for a well maintained website, and for this you need to take a few simple steps.

A plugin like WP Retina 2x automatically creates the Retina enhanced images for your WordPress website, storing them alongside your usual images – you can identify them in the uploads folder by their specific @2x suffix – and takes care of displaying them when needed.

There are some downsides, though. Retina images are double the pixels for each size, meaning they can be four times bigger in size which means they take more space on your hosting and, most important take more time to be downloaded to your visitors’ devices thus harming users’ experience with your site.

In order to cope with this downside, optimizing your images is crucial. For this, you can use an image optimization plugin that also optimizes the Retina images, like our ShortPixel Image Optimization plugin.

ShortPixel Image Optimizer features, starting with version 4.1, automatic Retina images optimization. if you activate the option present in the Advanced tab of the ShortPixel Settings. This means that the ShortPixel Image Optimization plugin, while optimizing images, will detect any existing Retina specific (@2x) images and optimize them too. Big images like the Retina specific images will benefit most of ShortPixel’s powerful adaptive algorithms so optimization rates of 80% are quite frequent.

In conclusion, I strongly recommend to use optimized Retina images on your website as it’s good for user experince and quite straightforward too. It boils down to this: install  the two plugins – WP Retina 2x and ShortPixel Image Optimizer – and activate the Retina image optimization in the Advanced tab of the ShortPixel Settings. From then on, the two plugins will do the job automatically for you.

How WebP images can speed up your (WordPress) site

 

So you’ve been a brave admin of your website, minified and compacted the javascript and CSS, optimized all your images in order to make them as light as possible, took proper care to have properly sized images or thumbnails loaded everywhere. If you have a WordPress site, using some plugins like Autoptimize or ShortPixel Image Optimizer saved you a lot of hassle in doing that. Now that’s great but what can you do next?WebP Images Logo

Enter WebP – a modern image format created by Google, that provides superior lossless and lossy compression for images on the web.

According to Google, WebP lossless images are 26% smaller in size compared to PNGs. WebP lossy images are 25-34% smaller than comparable JPEG images at equivalent SSIM quality index. Lossless WebP supports transparency (also known as alpha channel) at a cost of just 22% additional bytes. For cases when lossy RGB compression is acceptable, lossy WebP also supports transparency, typically providing 3 times smaller file sizes compared to PNG – that’s a huge improvement.

Now, how can you leverage this new format to improve the performance of your website? Please note that you currently can’t just replace the JPGs, GIFs or PNGs with their WebP counterparts as not all the browsers support it yet. But if you have a WordPress website, you are lucky, there is a simple solution:

Starting with our new 4.1 version of the ShortPixel Image Optimization plugin, we’ve added the possibility to also create a WebP image alongside the existing images, free of charge, when optimizing your images with our service. Just enable the option in the Advanced tab of the ShortPixel settings, in your site’s admin and the WebP images will be created too when optimizing images.

SortPixel Advanced Settings tab contains the generate WebP images option

 

In order to be able to deliver the WebP images only for the browsers that support this format, you will also need a cache plugin that is WebP aware. We’ve tested the Cache Enabler plugin and it works out of the box with ShortPixel in delivering the WebP images. You just need to install and activate it, then go to  Settings -> Cache Enabler and check the “Create an additional cached version for WebP image support” option.

cache-enabler-webp

That’s all, you can now enjoy a faster site that smartly uses WebP images!

UPDATE: you can also check out this post for more speed up insights.

How ShortPixel credits work within your account

Immediately after setting up your free ShortPixel account, you are given 100 ShortPixel credits. Each credit allows the automatic processing of one image or thumbnail (or PDF) from your WordPress web site (or sites as you will learn below). Each and every month, regardless of whether you purchased a stack of credits from the “one-time payment” section (below the monthly and yearly plans in the ShortPixel.com Control Panel), you are given an extra 100 credits to use for free. In addition, you can get an extra 100 credits per month for every person that you refer.

In your account, even while on a free or paid monthly plan, you can still always buy one-time ShortPixel credits. Important to note is that your monthly credits will always be used first.

You connect your WordPress blog to your ShortPixel account via your personal API key. This key maintains a secure connection between your site and the ShortPixel servers to keep the credit information in synch and to process your images.

You may, at any time, switch from the Free Plan (of 100 images per month) to any of the larger plans, which now includes a yearly plan. Naturally, the larger the plan, the more savings that you achieve.

On the left side of the screen, when logged into your ShortPixel account, you will see the details of your chosen plan. There will also be an indication of when your credits reset (see the image below). It depends on the date you signed up as to what the renewal date will be. When on a monthly or yearly plan, any unused ShortPixel credits will *not* be carried over, an important distinction over the “one-time” credits discussed below.

ShortPixel credits info

Note: All of your WordPress web sites can utilize the same API key, so therefore can benefit from the same pool of credits.

Non-expiring ShortPixel credits for a one-time fee

While the monthly image processing plans offer an essentially set-it-and-forget-it approach because they top up automatically, there is also the option of choosing to purchase a pool of credits for a one-time fee. These credits never expire. You will see your credits and stats for these purchases in the “One-Time Quota” section on the left side of the ShortPixel.com Control Panel, just below the “Monthly Quota” section (see the image below). The information provided includes: Bought, Used, and Remaining. You can top up on your credits at any time and the “Bought” number will increase as expected. And again, all of the web sites that utilize your ShortPixel API Key will take from this pool of credits.
ShortPixel credits info after package bought

To summarize, you can use ShortPixel for free at a rate of up to 100 images processed per month (or more when referring friends). Or, you can benefit from a monthly plan. Monthly plans do not carry over to future months. Your quota is simply reset. When purchasing one-time ShortPixel credits though, your credits never expire. And, as expected, the more ShortPixel credits you purchase (from either pricing mechanism), the cheaper it is per credit. Appropriately, monthly credits are used before one-time credits.

You can keep track of your plan and credit details either from the Statistics tab (first go to: Settings >> ShortPixel) within WordPress, or from the Control Panel when logged in at ShortPixel.com (Login here: https://shortpixel.com/login)

The all-new re-optimization functions in ShortPixel

In our latest and greatest plugin version – 3.3.0 – we worked hard to bring you some key features that offer more control to the way you optimize your images.

Let me do a quick pass through the most important ones:

• The Re-optimization buttons in the Media Library that appear next to each image let you change the type of image optimization from lossy to lossless and back for a specific image (the column now also displays what kind of optimization was used for each file). This button is only available if the image has a backup, because the re-optimization has to be done on the original image.

• If you have chosen not to optimize the thumbnails, you will also see a button that enables you to optimize the thumbnails for a specific image.

• The Bulk Optimization process is now able to handle these situations as well. If, after optimizing all your images, you change your settings (from lossless to lossy for example), then open the Bulk ShortPixel page and do a Restart Optimizing, all the lossless images will be re-optimized with the new setting.

• Also if you optimized your main images without thumbnails and then you decide that your thumbnails also could use some optimization, just go to the Bulk ShortPixel page, check the Include thumbnails box and Restart Optimizing – all the thumbnails will be optimized as well.

What are these new functions good for?

Let’s assume that you optimized your images losslessly trying to stay on the safe side, but then, for some images, especially big ones, you would like to try a more effective optimization. Or you optimized them lossy and you spot a particular image for which the quality is not that good – this hardly ever happens but still – in this case you can just re-optimize that one as lossless to make it shine again.

What happens with your credits when you re-optimize an image with a different setting (lossless/lossy)?

The re-optimization process will normally use up one credit per optimized image. There is a case, though, when you keep your credits, and I’ll explain it: when we are optimizing an image we do both lossy and lossless optimization in the same time and they are kept on our servers for four hours. This means that in this interval, if you re-optimize your image, the existing already optimized images will be downloaded by our plugin and no credits will be consumed.

I’ll conclude by inviting you to make use of these new functions and tell us what you think. Last but not least, Happy Optimizing! 🙂

How much smaller are images with EXIF data removed?

EXIF data is a collection of various pieces of information that is saved in the image  file by the device that created the image (camera, processing software, etc). Examples of types of information include: GPS position, date and time, author name, camera/phone model and shot settings,  ICC color profile, even some custom thumbnails, which are used by the cameras to display the image on the camera’s screen. All this info can ad up to a significant amount of kilobytes.

We at ShortPixel try to reduce the size of images by compressing them and removing all the extra data that doesn’t reflect visually in the optimized image, including the EXIF tag (but preserving the ICC profile) . While we’re quite good at this, sometimes the EXIF profile contains data that can be very helpful if you are, for example, a photographer.

For these specific needs, we added,in our latest version of ShortPixel image optimization pluginan option to keep EXIF profile data. While adding this new feature we were curious to see how much of a difference in terms of image size could make keeping the EXIF profile data.
So we’ve chosen a sample of 7,646 JPEG files from the files we optimize with ShortPixel and optimized them in both ways.

The resulting files have:

•791.144MB when we kept all the EXIF profile data

•723.552MB when we removed the data.

That means removing EXIF/ICC image data leads, on average, to files that are 8.5% smaller.

You might want to keep this in mind when making a decision whether to keep or remove EXIF and ICC profile data.