Perfect slideshow, WRONG photo.

I deal with this on a daily basis. Most images are good to go but you will run to the issue of trying to crop that photo to fit on a particular slide show. The original raw image needs to be good. That’s pretty much it.  Is that difficult? in my experience…Fuck yeah.  So let’s move on. Here’s some common slideshow issues that I deal with.

Example 1. The Small Format


This slideshow is pretty standard, looks clean, and doesn’t take up a lot of space. The photos are generally good for most 4 x 6 inch or 4:3 ratio images.  Once in a while, you’ll get a vertical image but then you will have to crop it so you only see the center portion of it.   So that brings me to the next one, the one that changed everything.

Example 2. The Wide Format


So this wide format is probably the most popular one today because it stretches across any screen but they usually center, calculate, or focus on the middle of the image by width.  So what does that mean in html5/css editing and visual design?   Well lets put that same image of the person wearing the snow shoes into this barbershop.

Example 3. The wrong crop


So, now that the image is centered without any second thought of the visual placement, the slideshow will focus on the center of the image.  What do you do next? The image is stretched out according to the dimensions of the width of the slideshow but not the height. The height will automatically hide the top or bottom of the slideshow.   Here’s a simple guideline that can help you crop the original photo so that it fits correctly.

Example 4. Editing


So this image can help us focus on what needs to be cropped or edited.  The height can be set to specific size but we know that the width of the screen is stretched across the screen so it can 480 pixels to 3000 pixels.  The proportional view considers that the most monitors and screens are landscape so we need to center our eye on what counts. I would usually crop or cut out the bottom section. so as you notice, Text can be added on to the image but it’s generally recommended to use html code and have the text float in front of it so it scales properly depending on the screen size. Also it’s important for SEO as search engines don’t scan images for text, they scan text to find text on the google search engine, if that makes basic sense?   I would also recommend cause there’s less real estate on your mobile screen, so you should save space by removing the unimportant sub-headlines and just focus on the main headlines, like “I like Turtles” or “50% off Sale”- you can always add those wordy sub-headlines on your desktop.

wide-screen-1 wide-screen-2

I think we tend to focus on the center of the image. The eyes of a human, animal. or the product shot.  I usually put a blur on the top but you can also place it on the bottom, it depends on the photo.  As far as the crop,  you have to consider that a typical wide screen slideshow aspect ratio begins at 16: 9 and sometimes 21 : 9 or more.


Also we run into various issues with mobile, TV, and desktop. We need to find a good photo that might be universal all over so here’s an example bad and better, although these might not be the best, you would need to create a perfect combination that would utilize all three sizes. See Example of the two.


In Youtube and other social networking sites, they may force you to adjust the banner so you maybe have to create it so it works with different screen sizes

and force your to alter your original banner design. Some of the new web apps will give you an input to add a banner for mobile only, for desktop

or a different one for a TV/large size monitors.


There are Jquery and Javascript slide shows that zoom in and center the image accordingly but that usually means the center.  They can also shrink or expand an image but once again,

The Original raw image has to be good.

I think this is the biggest challenge for most people. I’m not a pro photographer so I can’t really discuss this in detail but it makes sense.  I remember getting lots of image from people and it’s too small or low quality, and they ask me to just blow it up. I’m not sure if their being lazy…or am I being punked? So here’s an example of a bad image below.

Example 5. The Low quality, low pixel image.

low quality/pixelated image

This is an example of how a small low quality image gets scaled to fit a larger screen and it looks like shit. No shit, it was an image that was too small to begin with. It actually looks alright when it’s about 100 pixels or at about 1 inch in print.  Why do some people have these low quality small images?

same image, just smaller in width/height

Hey man, My first digital camera was a 1999, HP C200 camera with an effective 1 megapixel and weighed about half a pound (actually 0.66 pound).

That’s right, I had a shitty camera but that was the technology back then. Yes I know, DLSR and film cameras are nicer but I was really into the new technology at that time.  Especially since I know personally that Japanese people love taking photos with their camera, it’s true.  At any rate, always keep the raw image in safe place, create a copy of the cropped image for a various slideshows but keep in mind that the images should be centered unless you’re one of those artist photographers, then get wild and creative.  If you have any suggestions, please add to the comments below.


Example 6.  Wide screen VS Full screen

In this example you will see one photo that is about 1000px wide by 800px high (a rectangle that is more square than wide).

You will notice that the fan in the bottom left hand side will disappear in Exhibit A,

The Exhibit A image is the full screen size. but the monitor size doesn’t fit perfect

so it shows some black spacing on the left and right.


In Exhibit B. We force the image to line up against the left and right monitor but we lose the bottom

and the top of the image because it needs to  stretch wider than the  monitor’s dimensions so

therefor it overflows any given monitor size that doesn’t fit.



Exhibit A.

Wide screen image. Shows everything.



Exhibit B.

Full Screen


So the next questions is, How can make it fit?

I want everything to be visible without adding a white space or empty space around the monitor.


So this is nice photo of Hard Gay. One of my favorite Japanese comedy personalities.  As you notice, some screens only show the red part of the box, that would be full screen.

While some full screens show the blue part, that would be a widescreen.

Why is that?

Here’s the answer in short and what should I do.



Every monitor size will vary and the height/width aspect will not be the same.

You will have to crop the image in Photoshop or another image editor to fit most wide screen monitors but keep in mind, that there will always be a white or blank space in any given

frame because of the aspect ratio. You can technically, stretch the image manually but now you have an image that looks like it’s been ripped apart or distorted. Don’t do that.

Square (or a rectangle width of 4:3 size)  images never work well on slideshows or top banners. You want to crop images so they  are contained.

In CSS3, you may want to use the cover property for background images but it will hide some of the image.

While using the  cover property can help, it will not give you ideal height that you want but generally good for widescreen images.

One thought on “Perfect slideshow, WRONG photo.

Comments are closed.