For this post I want to explore images. Images seem to be the one thing that can easily go awry. Problems from not seeing it cropped properly all the way to it not looking “clear” or “crisp” till you upload it to your website.
Why am I only seeing part of my image?
When you have a website mocked up and presented in a prototyping software, as an image or pdf you will notice that your designer gave you these perfectly cropped images. Then when you start adding content you will notice that some images are either cropped weird or you really will only see a small portion.
The first reason is that is because image ratio for your website matters. If a designer presents your images in a 3:4 ratio then it will be important to follow that formula so that every image on your website uploads and looks correct.
So what is image ratio? Image ration is the proportionate relationship of the width to the height. To make things easier, most websites have their images as rectangles that have the width bigger than the height. But you can’t just always upload any rectangle size, if your site is built to have the rectangles that are meant to be almost a square and you upload ones that are more like a banner then it may not look right and can cause height issues that you may not have anticipated.
The next reason will depend on how the developer had to code your website to make the image fit the designers mock-up vision. In most cases the code natively will be the top of an image, or the center of the image being displayed. If your website has images that need to crop for size from the top and you upload a portrait rectangular image you may be looking at sky or only the top of people’s heads. The other possibility is you’ll get the center and it may be great or disastrous..lol. By the illustration below you can see what i mean by long images and cropping.
For my example none of the outcomes are really bad, but if you were planning on having the image look exactly like the one presented in the 4:3 ratio you would have to cut the image using an edit tool on your phone or computer or using a photo editing software. If you plan on being the one maintaining the content for your website, it helps to have a way to edit your images before you upload them and understand that how you upload and cut them will effect their final look.
My images look blurry!
If you are finding that you have blurry images there are a couple things that cause that, it can be that the image is smaller than the space it needs to occupy on your website, it is not a high enough resolution for devices, or it was improperly sized.
So what do I mean when I say resolution? I mean how many pixels are in an image. I know you’re like what!? ok what is a pixel? A pixel is a small dot that is part of an image. How many pixels are in an image make up the resolution. Below I will show an illustration to show pixels. As you can see same size box but the right side has more little grey/white squares than the one on the left. That is because it has more pixels.
If you have an image that is a low resolution and you try to just stretch it to fit a bigger space it still has the same amount of pixels and your just stretching the pixel which is why it comes out blurry. Sometimes that can be minified with graphic tricks and filtering but if the image has been copied and downloaded a lot or is really small then there won’t be much that can be done.
The most common time we see blurry images is when an image has been over compressed. I know what you are thinking how does me saving an image off the web make it lose quality and get blurry? Well have you ever ran a copy of a copy through a copier. As you make copies it loses quality because your most likely grabbing a compressed image for web that then when you upload it becomes further compressed. Which degrades it over time. It’s why getting an original file is better than a copy. It lets you get the best quality and resolution safeguarding from blurry images.
here is a side-by-side, them smaller you may not notice much difference at first gland. But as the images get bigger you will see that the image on the left is not as brilliant as the image on the right. If I were to take a screenshot or save this image and then crop it or try to stretch it to be bigger it will look even further degraded.
As you can see with us making that already compressed image larger you can really see how it has degraded and not as brilliant as it once was. This is why sometimes we ask our clients for new or the original images because we know this will be the end result and you may not be happy with it.
Here is the image a final time, just cropped and the image compressed for web and as you can see it still looks brilliant.
My final thoughts
So as you can see by the examples above images can be finicky if you don’t have the original or you are not clear on how to upload an image. My suggestion to client’s when we run into these issues is; I first try to work with what they have and try to accommodate them. It may be me cutting/cropping or resample an image to try to get the best quality possible and outcome for them. If an image happens to be just be over-compressed and small then I prefer to ask them to find the original or go with something else. If they really want that image then I try to find ways to have them accept the best quality we can give them.
