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. 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/css3 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.  As far as the details in terms of code of why your slideshow or layout is nice but your photo doesn’t get cropped correctly is because you, you have to code the background image property to fit for mobile. This is why using a template looks good with they developers show you a demo but your individual specialized photos don’t work because the face or product isn’t the same center or background ratio needed for the site.

Also we run into various issues larger screens and tiny mobile phones.  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.  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 give you an input to add a banner for mobile only, for desktop only and then a different option 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 professional 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. So here’s an example of a bad image below.

Example 5. The Low quality, low pixel image but enlarged cause they get a warning that says uploads “must be at least be 500px or more”.

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 horrible. It was an image that was too small to begin with. It actually looks less pixelated when it’s about 100 pixels or at about 1 inch in print.

same image, just smaller in width/height


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.

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.

Comments are closed.