Understanding Color Profiles and How to Save images for the Web

Understanding Color Profiles and How to Save images for the Web

If you’re a designer, photographer, artist or just a photo enthusiast like me, you’re probably uploading your images all over the Internet. From Facebook to Flickr to blogs… everywhere!

On the Internet, your images are being viewed on a multitude of devices – iPhones, Samsung Galaxy series, iPads, Tabs, Notebooks, those crappy office monitors and even on the Mac retina displays. Now each device and browser has their own way of managing colors. So, inherently the same image will be rendered differently on different monitors.

While we cannot account for the hardware differences, the best that we can do is to ensure that at least the interpretation of colors in our image remains uniform across devices. For eg, a bright yellow should show as bright yellow on all devices and not as a pale, faded piece of sh*t.

Very often we come across situations where our image looks great in Ps or Lr while we’re editing them, but looks washed out upon uploading to the Internet. Sometimes, the images may look great on the laptop but may appear a bit faded on mobile screens and tablets. At first I didn’t notice these differences, or probably just ignored them subconsciously, but once you notice them, they can quickly get on your nerves.

For example, have a look at the images below. This is the same image (exactly the same file) which shows up differently on my desktop and my phone browser.

Desktop-vs-Phone

So, how to fix this?

Well, that brings us to the topic of the day – Color Modes, Color Spaces and management.

Color Modes:
The most popular color modes are RGB and CMYK in addition to Grayscale and others.  RGB stands for Red, Green and Blue; while CMYK stands for Cyan, Magenta, Yellow and Key. Without going too much into the technical aspects, here’s a rule of thumb that you should always remember.

For displaying on the Web, always use RGB and for anything that’s gonna be printed, use CMYK.

Simple! Isn’t it? If you’re using Ps, you can just go to image>>Mode and change the mode to RGB color if that’s not already selected.

Color Spaces and Color Profiles:
A Color Space is basically a predefined set of visible colors. You can think of the Color Space like a box of crayons.  In the images below, both the crayon sets (color spaces) have 16 crayons, but the first set has a much wider color range as compared to the second set.

Color-spaces

The commonly used color spaces are Adobe RGB (1998), sRGB and ProPhoto RGB. If you’re using Ps, go to Edit>>Convert Profile. In the dialog that opens, take a look at “Source Profile”. This will tell you the color space you are currently working on.

A Color Profile is usually tagged with the image which tells the software & hardware what color space the image is in. This helps the hardware & software to correctly interpret an image and display it.

For eg, an image created in Adobe RGB (1998) space will have an Adobe RGB (1998) color profile embedded in it. Browsers will read the profile information and translate the color information stored in the image to display the image correctly.

So far so Good.. What is the problem then?

The problem lies in the fact that not ALL browsers are color-managed, i.e , not all browsers understand color profiles. Almost all mobile browsers are incapable of understanding color profiles.  With color-managed browsers, we actually do not have a problem. They will simply read the color profile and display the images correctly. However, expecting an unmanaged browser (which cannot read color profiles) to interpret every image correctly is much like expecting a buffalo to learn GPS navigation.

So, while you’ve spent hours editing an image on your laptop and your masterpiece renders perfectly on your laptop browser, your phone viewers may still be seeing a distorted version of the image on their phones.

Below are images created in Adobe RGB and ProPhoto RGB color spaces. Have a look at how an unmanaged browser interprets these images.

mangoes

Chillies

 

We’re doomed!
Well, not exactly!! In all browsers which are not color-managed, the browser assumes that the image has been created in sRGB color space.  It will ignore any tagged color profile and try to interpret every image as an sRGB image.

Does this mean anything? (Fingers, Hands and Legs.. All crossed)

Of course, it does! It means that every image created in the sRGB space will be interpreted correctly by unmanaged browsers too. Yeyy !

So if you’re creating images to be displayed on the web, where majority of the browsers (mostly in mobile space) are unmanaged browsers, your safest bet is to always create images in sRGB color space.

In Ps, once you open a file for editing, you can go to Edit >> Assign Profile and then select sRGB IEC61966-2.1 from the Profile drop down menu. This will tag the image with sRGB profile and you can start editing your image.

If you’ve already edited images before which are not in sRGB, you can go to Edit >> Convert to Profile and then select sRGB IEC61966-2.1 in the destination space drop down menu. This will assign the sRGB profile to the image and change the image’s color value so as to keep the image appearance as consistent as possible in the newly assigned color space.

* If you want to see how your non sRGB image will be rendered in an unmanaged browser, follow the instructions for Ps below.

  1. Open an image which is not in sRGB
  2. Go to View >> Proof Setup and select Internet Standard sRGB
  3. Press CTRL + Y to toggle between managed and unmanaged versions of your image.

How to find out if my browser is color-managed?

Well here’s a simple test. Just look at the images below. The first image has been created in sRGB color space with sRGB color profile embedded in the image. All color-managed browsers will read the color profile and display the image correctly on the screen. All unmanaged browsers will ignore the color profile, but default to sRGB. Since the color space is sRGB, they too will display the image correctly. Hence we will use the image on the left as the reference image.

The second image has a non-standard color profile.  All color-managed browsers will be able to read the profile information and display the colors correctly. Unmanaged browsers will however default to sRGB and display the image as an sRGB image.

If both the images appear same to you, your browser is definitely color-managed. However, if the second image appears to have a bluish hue, it means your browser does not support color-management.


color-profile-test-srgb  color-profile-test-Funky-RGB
 

Got it ! What’s next ?

So, we’ve learnt about color modes and we also know what color space to work with. Next we’ll learn How to save an image.

LOL ! I can do that a zillion times with both my eyes closed and my head buried under my pillow.

I’m sure you can… But what we are going to discuss here is not just about saving an image. It’s about saving an image optimized for the web.

I’ve come across many blogs; some of them belong to my close friends, where there are images that are more than 1 MB in size.  I mean C’mon! Do you really think people have the time and inclination to see your images load like the curtains rising for some Shakespearean play?

Here are few simple things that you can do…

Resize the image to the proportion needed for the web. For eg, if you need a 1500 pixels wide image for your blog, there’s no point taking a 4000 pixels wide image for that. In Ps, go to Image >> Image Size, and enter the new dimensions (width, height) to reduce the size of the image.

Once you have resized the image as required, you need to save the file using the “Save for Web” option. In Ps CC 2015 you can go to File >> Export >> Save for Web (Legacy) option or File >> Save for Web in older versions of Ps. Once you’re there, select your file format. I prefer JPEG for my images. Also select the Compression Quality. I usually go for either “Low” or “Medium”. This helps to compress my images well without any visible loss in quality.

You will also see other check boxes like “Progressive”, “Optimized” and “Embed Color Profile”. I usually check the “Progressive” option while keeping the other two unchecked, but then it’s totally up to you. Progressive images are images that do not load from top to bottom, but will “fade in” in successive waves of lines until the entire image has been completely loaded. Users with faster connections are not likely to notice the difference at all.

Once you’re done, click on Save :-)

A word from the author:

Guys, Thank you so much for reading this post. I have tried my best to explain the concepts in the easiest way possible. I guess some of you are already aware of these concepts, but this post is meant for those who are still not aware of how they should be saving their images for the Web.

I hope this post turns out to be helpful for them. If you have any questions related to the post, please feel free to ask in comments below. Thank you so much  :-)

 

The Corner Cafe, Lamb Road, Guwahati

The Corner Cafe, Lamb Road, Guwahati

If you’re around Guwahati Club, you must try The Corner Café. It proudly boasts of having the most unique menu in town and at surprisingly affordable prices too.

Nestled in the heart of the city, The Corner Café lies on Lamb Road, just off the busy neighborhood of Guwahati Club. Having completed 2 years successfully, the team is now all geared up to revamp it’s entire menu and interiors and introduce new dishes that the city has not seen before.

While these new additions are nothing innovative or inventive by any means, they do provide a fresh feel to the overall menu and gives you some enticing options to choose from.

As we walked in, we couldn’t help but notice the smart and minimalistic interiors. The walls draped in tuscan red, the dark brown furniture, the sporty wall decals and the wooden flooring, all indicative of the modern young crowd that the café allures.

The Corner Cafe


This 30 cover eatery offers a great fare inspired by Italian, American and Continental cuisines in addition to the ever-so-popular ‘desi’ renditions of Chinese food. It also provides great breakfast and snacking options. The atmosphere here is laid back and casual, perfect for catching up with old friends or a casual date.

The Corner Cafe

picture courtesy : The Corner Cafe

We tried their Cheese Omelet (₹ 150), Italian Baked Egg (₹ 170), Loco Moco Rice Burger (₹ 200), BBQ Pulled Pork Fries (₹ 300), Grilled Cheese & Tomato Bread Soup Bowl (₹ 230), Mushrooms on Toast (₹ 140) along with some Deep Fried Deviled Eggs (₹ 170) and Pancakes (₹ 170).

The Corner Cafe



When they say it’s a Cheese Omelet, they actually mean business. The Omelet is certainly not for the faint-hearted or the weight-watchers. Soft and fluffy omelet with cheese oozing out served with mashed potatoes, grilled tomatoes and toasted bread makes it a perfect dish to start your day with.

The Corner Cafe

picture courtesy : The Corner Cafe

We also loved their Italian Baked Egg and Loco Moco Rice Burger which were fresh additions to the menu. However, the BBQ Pulled Pork fries were clearly the show stealer of the afternoon. Being an ardent pork lover, I instantly fell in love with this one. Soft, succulent pulled pork, sautéed in BBQ sauce, covered with French fries and mozzarella and topped with a generous amount of mayonnaise; this monster will definitely make you come back for more.

The Corner Cafe


The Bread soup bowl was a round bread bowl filled with herbed tomato soup and grilled cheese. The soup was yummy and kept us craving for more. We also loved the meat sliders served alongside but felt that the bread bowls should have been a tad crispier and the croutons in the soup should have been done away with.

The Corner Cafe


The Mushrooms on Toast were a bit of a disaster. There was no or very minimal use of herbs and spreading tomato ketchup on the toasted bread was a bit too naïve for my liking. We would have loved to see a flavored sour cream instead and a bit more use of herbs.

Next came the Deep Fried Deviled Eggs and the Pancakes. The deviled eggs were crisp and delicious. The pancakes too were well prepared but had a very minimalistic choice of toppings and were a bit chewy. We would have loved to see more topping options for this one.

The Corner Cafe

picture courtesy : The Corner Cafe

They say, a man is guided by his tummy and honestly I would have gone on and on if only my tummy was not so stuffed. Servings at The Corner Café are quite generous and the staff are amicable and helpful, though a bit of pepping up is required.

The Corner Café offers discounts to students on weekdays (11:00 AM – 2:00 PM) which along with the affordable pricing makes it a favorite hangout for nearby college goers. All you have to do is carry a valid student ID proof and you’re eligible for a discount. Unlike most businesses that target students, we haven’t seen this café compromise on the quality or serving size.

The Corner Cafe


With the entrepreneur, Mr. Abhishek Baruwa at the helm of affairs and his meticulous involvement in everything, we’re pretty confident that this café will continue to outshine the cafeteria space in Guwahati, and in case you thought, we’re not the only ones who think so. The Corner Café, Guwahati, post it’s launch in 2014, has been awarded the ‘Best Cafeteria’ award by Guwahati Food Awards for two consecutive years (2015 & 2016) and is now getting padded up to pull off a hat-trick.

The Corner Cafe


The recent menu and interior revamp has been a success and we recommend this place for the unique fare it has to offer. So, if you’re looking to munch into something you haven’t tasted before or want to have something that isn’t on every other café’s menu, The Corner Café is the place for you.

The Corner Cafe

picture courtesy : The Corner Cafe

Mutton Tikia Masala

Mutton Tikia Masala


Why is Kolkata called the city of Joy ? Well, you may have your own reasons, but i’d like to think it’s because of the amazing food that the city hosts…Kolkata is a paradise for all food lovers. From Royal’s Chaap to the Biryani at Arsalan… Every dish has a distinct flavor and a Mughlai touch. An aroma that you will fall for the moment you walk into these food joints.

Rahmania is one such joint where they serve an awesome dish – Mutton Tikia masala. Its a dish made with minced meat formed into patties and shallow fried served with a spicy onion based gravy. Along with this other gravies like Chicken Tikia Masala, Chicken Chaap, Mutton Chaap etc. are also very popular.

I used to relish these delicacies when I was working in Kolkata. As I moved out and landed up in a different place I began craving for such gravies from time to time. Finally I managed to get the brilliant flavors at home and am really happy to share this with you all. Give it a try and I hope you will love it… And if by chance you get to visit Kolkata or you stay in Kolkata do give this delicacy a try… But a better suggestion… Try it at home… Its much healthier.

Prep Time:20 minutes
Cook time:30 minutes
Serves : 6, Level : Medium

INGREDIENTS

500 grams Minced Mutton

1 Cup Onion paste

6 Tbsp Ginger Garlic paste

1 Tsp Black Pepper powder

2 Tsp Red Chilli powder

1 Tsp Garam Masala powder

6 Tbsp Roasted Gramflour (Sattu)

2 Large Eggs

3 Green Chillies

2 Dry Red Chillies

1 Bay Leaf

2 Green Cardamom (ground)

1″ Cinnamon Stick

Vegetable Shortening (for shallow frying)

3 Tbsp Vegetable Shortening (Dalda) (for gravy)

7-8 Tbsp Mustard Oil (for gravy)

2 Tbsp Kewra Water

2 Tbsp Rose Water (Optional)

Salt to Taste

Chef’s Tip: (i) If you have Biryani Masala, you can add 1 Tbsp to the tikia to further enhance the taste.
(ii) If you do not have vegetable shortening, you can use clarified butter (Ghee) instead.

Thukpa


METHOD

For the Tikia

1. Boil the minced mutton with salt and 1 Cup water till soft. If your mutton mince is already very soft, you may skip this step. I used Al Kabeer’s minced mutton which was very soft and hence did not need any boiling.

2. Take the minced mutton in a large bowl and press it with your palm to drain off the excess water.

3. Add 3 Tbsp Onion paste, 4 Tbsp Ginger-Garlic paste, 1 Tsp Red Chilli powder, 1 Tsp Garam Masala powder, 4 Tbsp Roasted Gramflour, 3 Green Chillies, ground Cardamom Seeds and Salt. Mix well. Skip the Salt or add only a little if you’ve previously boiled the minced meat with Salt.

4. Add 1 large Egg and mix everyting well.

5. I usually leave this mixture for 30 mins – 1 hr in the refrigerator. This helps the mutton mince to soak the flavors well.

6. Take it out from the refrigerator and drain out any excess liquid. Now make round patties (tikias) with your hands.

7. Lightly beat 1 large Egg in a bowl. Heat Vegetable Shortening in a flat pan for shallow frying.

8. Now, coat the patties with the beaten egg and place them in the flat pan one by one. Do not place one on top of the other. I fried 6 patties in 3 batches (2 per batch) as my pan was small.

8. Shallow fry the patties in low flame, covering with a lid, till they are fully cooked and turn deep brown in color. Do not stir too much else the patties might break.


For the Gravy

1. Heat 3 Tbsp Vegetable Shortening in a pan. Then add 7-8 Tbsp Mustard Oil. Once the oil is hot, add 2 Dry Red Chilli, 1 Bay Leaf, 1″ Cinnamon Stick.

2. When it starts to crackle, add the remaining Onion Paste and 2 Tbsp Ginger Garlic Paste and cook till the raw smell is gone and the paste begins to leave oil from the sides.

3. Then add 2 Tbsp Roasted Gramflour (Sattu), 1 Tsp Black Pepper Powder, 1 Tsp Red Chilli Powder and Salt and mix well.

4. Add 2 Tbsp Kewra water, 2 Tbsp Rose Water (Optional) and stir. Add 1 cup water and mix well.

5. Cover and Cook on medium flame for about 10-15 minutes or till you have a nice semi-thick gravy.

6. Once done, place the patties in the gravy and garnish with coriander leaves, onion or mint leaves and serve.

Chef’s Tip: (i) If the mutton mince mixture is too moist, your patties might break while frying, so ensure you squeeze out excess water before making the patties.

(ii) While frying the patties, lift them intermittently with a flat spatula to prevent them from sticking to the base of the pan. When one side is done, turn them around gently to fry the other side.

Kala Jamun

Kala Jamun

It’s time to go Black ! The black Kala Jamun is the less popular kin of the Royal Gulab Jamun.. The process is also very similar but the Kala Jamuns are double fried to give it the sinful dark color.

Black looks Magnificent…so Majestic…so Glorious..Bold and Beautiful… Okay..okay, call it Evil if you like, but the fact is that Black carries a mysterious charisma that draws us all towards it. Isn’t it ?

It is believed that Gulab Jamun was derived from a Persian dish and was introduced in India by the Persians some centuries back. The word Gulab itself was derived from the Persian words gol (flower) and ab (water).

Today, after so many years and after so much customization and variations, it seems impossible to believe that this sweet that is so popular in India could have originated elsewhere…

Well, Indian or not… Persian or Russian…it does not take anything away from this scrumptious dessert… So, go Black this season and surprise your loved ones.


Prep Time:20 minutes
Cook time:15 minutes
Makes : 30, Level : Medium

INGREDIENTS

1 & 1/2 Cups Grated Khoya (Mawa)

1 Cup Chhena (Cottage Cheese)

5 Tbsp Maida (All Purpose Flour)

1 Tsp Powdered Sugar

Ghee for Deep Frying

1 Tsp Elaichi (Cardamom Powder)

1 Tsp Rose Water (Optional)

4 Cups Sugar

2 & 1/2 Cups Water


METHOD

1. In a bowl take chhena. Mash and smoothen the chhena with your palm.

2. Also smoothen the khoya and combine it with the chhena.

3. Now add the flour and powdered sugar to it and mix thoroughly till it is well combined.You should get a smooth dough.

4. Grease your hands with Ghee and make 30 equal sized balls from the dough. The balls should be smooth (There should be no cracks). If there are cracks in the ball add a little milk (Basic idea is to make a soft dough to make smooth balls). And if the ball formed is too soft add a little flour to it.

5. Take Ghee in a wok and put it on medium heat. Add a small ball from the dough to check. If the ball slowly floats up to the top, the Ghee is at the right temperature. If it floats up immediately the Ghee is too hot and you need to cool it down a bit.

6. Fry the balls on medium heat for 5-6 minutes till golden brown in color. Drain and keep aside for 5 mins.

7. Now reheat the ghee on medium heat and add the fried balls again and cook till dark brown/black in color (approx 3-4 mins). Do not overfry as the balls will become overcooked and hard.

8. In the meantime make a sugar syrup with 4 Cups Sugar, 2  1/2 Cups Water, Cardamom Powder and Rose Water. Turn off the gas as soon as all the sugar has dissolved. Discard the scum that floats on top of the syrup.

9. Add the fried balls to the sugar syrup and heat it on low flame for 10 mins. Turn off the gas and let it soak for half an hour.

10. Serve Hot. (It also tastes awesome with a scoop of vanilla ice-cream – Heavenly!)


*The above photo is inspired by the Gulab Jamun post of the multi-talented Simi Jois.. She’s an excellent photographer and my photo is nowhere close to her brilliance. You may check out her post by clicking on the link.

Chakhao Amubi (Black Rice Pudding)

Chakhao Amubi (Black Rice Pudding)


I have been staying in North East India for about two years now and finally managed to get my hands on the coveted Manipuri Black Rice. Thanks to a colleague of mine who brought this for me from Manipur.

Manipur or the land of jewels is so beautiful that it is called the ‘Switzerland of India’. With Nagaland, Mizoram and Assam on three sides, Manipur shares its eastern border with Burma. Surrounded by forests, wildlife sanctuaries and beautiful lakes, the state of Manipur is rich in culture and tradition and is a host to a wide variety or art and dance forms. I haven’t yet been fortunate enough to explore the beauty of Manipur, have been there only on short business trips, but this is something that’s definitely on the top of my to-do list.

Black Rice, also known as purple rice is one of the healthiest forms of rice available today – rich in Protein, Iron, Antioxidants, Vitamin E and Fibre. It is typically sold unmilled with the fiber-rich black husks still intact. The outer layer of bran contains one of the highest levels of anthocyanin antioxidants found in food (Wikipedia says antioxidants in black rice even exceeds that found in blueberries).

There’s also an interesting story associated with black rice which I would like to share. During the years when China was ruled by an emperor, black rice was believed to have magical powers and that it could extend lives, hence it was set aside only for the emperor and members of the royal family. The common people were not allowed to eat or even grow this rice for themselves and if anyone dared to do that, he would have to face life threatening consequences. Hence Black rice is also known as the ‘forbidden rice’.

Now, coming back to the dish, the flavours of this rice are awesome and you can see the beautiful color. Chak Hao Amubi is a special dish and is made mainly during festivals and auspicious occasions in Manipur. The recipe is pretty straightforward and is made the same way as you would make a white rice pudding (Kheer), the only difference being in the soaking time.

Chak Hao Kheer

Prep Time:10 minutes
Cook time:20 minutes
Serves : 8, Level : Easy

INGREDIENTS

1 Cup Black Rice

8 Cups Milk (preferably full cream)

1 Cup Sugar or as per taste

1/2 Tsp Cardamom Powder

Raisins as desired (Optional)

Chak Hao Kheer

METHOD

1. Wash the rice and soak it in water for about 3-4 hours.

2. Heat the milk in a big vessel till it comes to a boil.

3. Drain the rice and gently add it to the Milk.

4. Cook on medium-low, stirring occasionally, till the rice is cooked and the Kheer reaches a thick consistency.

5. Add the Sugar, Cardamom powder and Raisins. Keep stirring till the sugar is dissolved and desired consistency is reached.

6. The Kheer will thicken more once it cools so adjust the consistency accordingly. If you think it has become too thick, you may add a bit of Milk here.

7. Take it off the heat and garnish as desired. I have used Cashews, Raisins and Pistachios here, you may also use slivers of almonds or any other dry fruit you prefer.

8. You may serve it warm or absolutely chilled as per your choice.

Chak Hao Kheer