As a website owner, one of the most impor­tant tasks you will need to do will be to make sure your photos are well opti­mized and look great on all devices so your website loads FAST.

And YES, with all devices, we mean also high reso­lu­tion screens (high pixel density /high DPI/ displays, trade­marked as Retina displays on Apple’s devices).

Especially for our clients, hotels, and other busi­ness­es seeking to engage its customers through visu­al­ly rich expe­ri­ences, it is of an utmost impor­tance to opti­mize websites’ photographs.

(Note: this article is only about opti­miza­tion of photographs, not other website graph­ics, such as logos, icons etc.)

Image opti­miza­tion is a process of deliv­er­ing your high quality images in the right format, dimen­sions & reso­lu­tion while keeping the small­est possi­ble file size. 

As photos are big in file size, dimen­sions and reso­lu­tion, the goal of image opti­miza­tion is to turn ‘heavy’ large images into compressed light smaller files – and ideally, create several image size vari­a­tions for display on differ­ent devices’ screens (large desk­tops, tablets, small phones).

But there is a challenge.

As you compress photographs, their quality drops.

Because you want your photos looking great on your website, when saving photos for the web you must compro­mise between the image quality and the image file size.

In other words, you must make the image file size as small as possi­ble while still retain a good or accept­able quality.

For the web, you must make the image file size as small as possi­ble while still retain a good or accept­able image quality.

IDEALLY, image opti­miza­tion should be auto­mat­ed.

Especially if you have many photos on your website, image opti­miza­tion would be a headache without automa­tion process.

You can, of course, still opt to opti­mize your photos manu­al­ly, it is fine if your website doesn’t have many photos, or you do not want to use just another plugin, exten­sion or paid online image opti­miza­tion service.

In that case, we put togeth­er this guide to opti­mize your photos for the web in as few steps as possi­ble with 1 useful (and free) tool (obvi­ous­ly, not Photoshop).

But before we see the steps of this guide, let’s discuss why we need image opti­miza­tion and a bit about opti­miza­tion for high DPI screens.

Skip to the manual image opti­miza­tion guide

Why to optimize your images?

Image opti­miza­tion makes your website faster.

Unfortunately, visi­tors to your website do not want to wait to see your website’s content.

Best loading time for your website is under 2 – 3 seconds ONLY!

You see, that’s really not much time!

If a website is too slow, Google might limit the number of URLs it will crawl from your website.

In July 2018, Google announced that page speed is a ranking factor for mobile search­es.

2 seconds is the thresh­old for e‑commerce website accept­abil­i­ty. At Google, we aim for under a half second. – Maile Ohye, Google

Speeding your website’s load time will have the follow­ing posi­tive consequences:

• Higher Google ranking
• Better user expe­ri­ence (UX) for your visi­tors, which leads to decreased page aban­don­ment and higher conver­sions (there is a bigger prob­a­bil­i­ty that your website’s visi­tors will become your customers – which is the primary goal of having a website).

Optimizing images for high pixel density screens

Images for high DPI screens are opti­mized in the same way as other photos, however they shall have bigger dimen­sions (double dimen­sions or more).

Optimizing images for high DPI displays is an impor­tant step in image opti­miza­tion as the reso­lu­tion of displays grows increas­ing­ly higher.

To have your photos look great on high DPI displays it is helpful to know how your web CMS, theme or custom CMS serves images to those screens.

There are 2 main approach­es to serving images to high pixel density screens:

• a multi­ple image approach (adap­tive images)
• a single image approach (compres­sive image technique).

These 2 approach­es need to be taken into consid­er­a­tion when saving photos in JPEG format and choos­ing the right amount of image compres­sion level.

In the multi­ple image approach, 1 image is saved into multi­ple deriv­a­tive image assets of differ­ent dimen­sions that are made to load on differ­ent devices (desk­tops, tablets, phones).

This is becom­ing the best prac­tice for serving images to high DPI screens.

(For example, upon upload­ing your image to WordPress, the CMS auto­mat­i­cal­ly creates 3 size versions of that image. Your WordPress theme may be customized to create even more image size versions.)

The single image approach (compres­sive image tech­nique) uses 1 large single image that is saved (as the word ‘compres­sive’ implies) as a very low quality JPEG file and this image is used for all device screens, large and small.

If you use this approach, you want to apply a higher JPEG compres­sion to your photos to make your images as small as possible.

See how low you can go with your compres­sion level in this article, Retina revo­lu­tion.

The compres­sive image tech­nique serves a highly compressed 2x (double dimen­sions) image to all devices.. – Google Developers website

Automated image optimization

Automated image opti­miza­tion can be achieved through:

• ready-made plugins/extensions inte­grat­ed within your website,
• custom made solu­tions imple­ment­ed by your web developer
• with the help of online image manip­u­la­tion services which deliver your photos to comput­ers all around the world through their global content deliv­ery network (CDN).

Image optimization plugins and extensions

Some plugins or exten­sions only compress your photos, others offer also crop­ping and resizing.

This means, you need to decide whether you choose fully auto­mat­ed process or semi-automated process.

To name a few:

• Imagify (WordPress plugin and online tool)
• ShortPixel (plugin & online tool)
• Ewww Image Optimizer
• reSmush​.it
• Kraken

Online image manipulation services (image CDNs)

• Cloudinary
• Fastly
• Akamai
• Gumlet
• Thumbor
• Uploadcare
• ImageKit
• Imgix

How to manually optimize your photos

If you want to opti­mize photos for your website your­self, you do not need to pay for a profes­sion­al soft­ware to prepare your photos for the web (such as Adobe Photoshop).

It can be easily done using an online tool that can crop, resize dimen­sions, down­sam­ple and compress your photos.

Here are 2 tools which can help you opti­mize your photos as easily as possible:

• Image Resize (free, simple & elegant)
• ILoveIMG (free & paid /very cheap plan/, nicely designed website)

Just so you under­stand, to find the ideal & really simple tool that could crop to ratio, resize, down­sam­ple to 72 dpi and compress images well enough and save JPEG wasn’t that easy.

Desktop apps on PC/Mac could do some of the above, but could­n’t compress well and they can not save photos as a progres­sive JPEG (only base­line, more on that later).

On the other hand, online tools could compress images (some better, some worse), but they could­n’t crop to ratio or were not user friendly.

(If you come across another useful tool that can do all the above, please share with us in the comment section.)

6 steps to easily optimize your photos for the web

1. Decide on your image aspect ratio.
2. Find out how much space (dimen­sions) will your images occupy on your website.
3. Multiply your dimen­sions by 2 for high pixel density screens.
4. Use Image Resize or ILoveIMG to crop, set dimen­sions, down­sam­ple reso­lu­tion & compress your photos.
5. Check that your images have the right names.
6. Upload to your website & assign ALT (alter­na­tive text) & TITLE to your images.

1. Decide on your photos’ image aspect ratio

Image aspect ratio is the propor­tion­al rela­tion­ship between the width and height of an image (width:height) expressed as a number, like 16:9 (a square image has an aspect ratio of 1:1, since the height and width are the same).

The most common image aspect ratios in web design are 16:9 (known as widescreen) and 4:3 (known as fullscreen).

In still photog­ra­phy, the most common aspect ratios are 4:3, 3:2, and recent­ly 16:9.

Your website’s images do not all need to have the same aspect ratio, you can mix several aspect ratios in your layout.

The image aspect ratio of your photos might be also chang­ing depend­ing on which device your website is viewed on as images adapt to the layout.

But it is a good idea to main­tain a consis­tent aspect ratio through­out a website design to ensure websites render well on a range of window sizes.

At least make sure that images that will be placed in the same photo gallery or next to each other on a page have the same aspect ratio.

2. Find out how much space (dimensions) will your images occupy on your website

Some photos need to be used as large headers, other photos will occupy a much smaller space.

You will be able to reduce your files’ sizes and save your server storage if you know the (at least approx­i­mate) space (width & height) each image occu­pies on your web page and you resize your images to that size, instead of upload­ing a full size photo straight from your camera.

Finding out what dimen­sions you need depends on your theme column layout changes as your layout is being resized on screens of various sizes.

For example, your desktop gallery might be designed as a 4 column layout, but on a tablet, the gallery will be only 1 column layout.

As you can imagine, in that case, your image will have smaller dimen­sions on a desktop but will be larger on tablets.

You will need to see your web page layout on a desktop comput­er as well as resized on a tablet and figure out the bigger image size.

Use the ‘Inspect Element’ of your browser (mouse right-click in your browser window).

There are also browser add-ons that will help you measure your image dimen­sions, i.e. Measure-it for Firefox, Ruler Measurement for Chrome etc.

Check what tools are avail­able for your browser and install one.

3. Multiply your dimensions by 2 for high pixel density screens

You figured out your image dimen­sions, and now, as you want your images to look great also on high pixel density screens, double the dimen­sions (width & height).

This means, if you need an image of 800×450 px (pixels), your final image will be 1600×900 px.

4. Use Image Resize or ILoveIMG to crop, set dimensions, downsample resolution & compress your photos

So now, when you know your final dimen­sions, open Image Resize or ILoveIMG in your browser and upload your high reso­lu­tion photo.

For best results, when compress­ing files, use your orig­i­nal, high quality photo, do not use images that were already compressed (saved as JPEG lower quality).

Your high reso­lu­tion photos should be in loss­less formats, such as TIFF, or the highest quality JPEG (JPEG is a loss­less format, each re-saving degrades your image quality).

Also beware – never increase the dimen­sions or reso­lu­tion of a photo, you can only decrease these values, other­wise you will get blurry, low quality photos!

Image Resize tool saved your photos as a progres­sive JPEG.

Progressive JPEG improves user expe­ri­ence because it loads images on a website in succes­sive (progres­sive) waves (first as a low quality blurry image until the fully crisp image appears, as opposed to normal/baseline JPEG which reveals an image from top to bottom, line by line, till the whole image shows).

Using progres­sive JPEG will further speed up your loading time, too, as they are a bit smaller in file size.

The ability for progres­sive JPEGs to offer low-resolution ‘previews’ of an image as it loads improves perceived perfor­mance – users can feel like the image is loading faster.. – Essential Image Optimization Guide by Addy Osmani

If you ever needed to check whether some of your images are progres­sive or not, use IMGonline.

5. Check that your images have the right names

Before upload­ing your opti­mized images to your website, make sure they have the right names.

Image names are an impor­tant part of a website’s onsite search engine opti­miza­tion (SEO) so your prop­er­ty can be easily found in search engines.

Describe well the contents of your image in several words.

Remember to sepa­rate the words with a dash (hyphen), not an underscore.

Leave out unim­por­tant words such as prepo­si­tions etc. (at, in, for, a, an, the, it, to – so called stop words).

Use all-lowercase, and sepa­rate words with hyphens. – Google Developers website

DO: radisson-hotel-superior-room.jpg

DON’Ts:

• radisson_hotel_superior_room.jpg (under­score is not a recog­nized word separator),
• DSC00677.jpg (search engines do not under­stand what is in the photo),
• radisson-hotel-DSC00677.jpg (not descrip­tive enough),
• RADISSON-HOTEL-SUPERIOR-ROOM.JPG,
• radissonhotelsuperiorroom.jpg (this is not a word),
• hotel-bathroom.jpg (too generic, let Google know it is the Radisson hotel),
• RadissonHotelSuperiorRoom.jpg (this is not a word).

6. Upload images & assign ALT (alternative text) & TITLE to your images

ALT (alter­na­tive text) is an HTML attribute and it is required for your images.

It is an alter­nate text for an image if the image for some reason cannot be displayed on your page.

It is an impor­tant part of acces­si­bil­i­ty opti­miza­tion of a website (so that visu­al­ly impaired people can under­stand your website when using screen readers).

It plays a role in your SEO as search engines look for keywords within your image file names.

Therefore create great descrip­tive alt text for your images.

On the other hand, the title attribute is shown as a tooltip when you hover over the image and it is not required.

Alt text (text that describes an image) improves acces­si­bil­i­ty for people who can’t see images on web pages, includ­ing users who use screen readers or have low-bandwidth connec­tions. – Google

Conclusion

Optimization of your hotel photos is very impor­tant both for good Google ranking and your website visitor reten­tion – your visi­tors do not like to wait while your website slowly loads.

Photos should be opti­mized for high pixel density screens and compressed as much as possi­ble while still looking good.

Unless you use a fully auto­mat­ed process for crop­ping, resiz­ing and opti­miz­ing your images, you should NEVER upload photos that are not well opti­mized to your website.

To check how your website’s images perform, use Google’s PageSpeed Insights. This tool analyzes your website’s speed.

We hope this photo opti­miza­tion guide will help keep your website fast and remain an enjoy­able expe­ri­ence for your website visitors.