I am trying to build a deals page which are pulled from amazon.in.I basically go to a deal and copy the image and upload to my server.
But due to different size of the images on amazon.in when I shrink it by 200*200 size for the deal thumbnail, some of the images are getting distorted.
In the below image you can see that the Amazon Basics cable is properly scaled, where as the iphone 7 image is distorted due to the nature of images at amazon.in.
What is the general recommendation for these problems? How do we solve this issue so that I get uniform images for my deals?
If the image does not have an aspect ratio of 1:1 (which is the ratio for your thumbnails) it will get distorted because there's more length in one dimension than the other and if try to match them, one of them will have to be squeezed. That's where the distortion comes from.
The only thing that will work is to give the images a new aspect ratio that matches your template
This can be done with CSS like #SaidbakR mentioned in the comments
Fix the width and place the image in a div with oveflow:none and fixed height to hide the extra height.
This will work beautifully but some images will just not work. They will just be cutoff in the wrong places.
The only other thing you can do is to manually edit the photos in Photoshop or something similar. This can work on all images, but manually editing each and every photo that doesn't fit is a pain in the neck.
nevertheless, here's what you end up with.
Before: Original Image in full dimensions
After: Image edited in a program like Photoshop to the desired size of 200x200 with no distortion
So? My Suggested fix is to adjust your approach/template or find another source for your images.
Related
I have WPBakery installed on my wordpress website, and I have tried to have two images in a single widget in a row divided into 5 columns, the two images being in a single column.
One of the images however is a sort of a custom stylized picture frame for the other image. I managed to partially solve the issue by applying a margin of "-140%" on the top margin. Unfortunately I can't get the image to stretch out to fit the frame, also when changing the viewport to be smaller (mobile sized for example), the frame scales proportionally as it should, while the image it self shrinks.
Can anyone help me out on making the image scale proportionally with the image, and also making sure it stretches to the size of the frame?
Note: The images might not be the same resolution as the frame, but i need the image to be stretched to those dimensions.
Here is how it looks on a 1080p monitor, notice how its not stretched to the frame
When it is shrunk to a mobile viewport
In my professional opinion of over 13 years of web development in a business setting, my answer to you is use ONE image. Have a .PSD project for these. Have your image frame as one layer, and use your normal images in another layer on top. When you want to create one of these images, open up the .PSD project, highlight the image to be replaced, and import the new. You may have to crop the new to be the dimensions of the last one and play with the centering x and y. Then, save your new image at full size. It will scale down because it is ONE image, not one image with a hacktastic image background.
I've got a couple questions about the use of images in a html document that I couldn't find an answer for.
Why is the standard 12x12 / 24x24 / 48x48 / 96x96 /... and not 8x8 /
16x16 / 32x32 / 64x64 / ... ?
Why is a 130x130px image resized to 50x50px by the browser (by
setting its width/height in the html doc) going to be more blurry
than a 100x100 image resized to 50x50 ? (is it just easier for the
browser to divide the size by 2 ?)
Is there a specific resolution for images that is worth using over another to be
more 4k friendly ? For instance using 384x384px images instead of
96x96 for 4K screen owners ?
1. Why are there icon size standards?
First of all there are no "standard" sizes for icons but it is always a good idea to create icons with a equal ratio = square images. That does not mean you are not allowed to break the rules, but it depens for which medium you are creating the icons. Android using a differend base size then iOS, because they need to support different resolutions. For desktop it is always good to start from a scale of 16px as a base. reference for icon sizes
2. Why get images blurry when resizes?
Image you are the browser and you need to repaint your 120x120px pixel image into an 50x50 canvas. The problem you face right now is that you need to decides on several point which color to choose especially on edges? What the browser does ist to mix up colors for edges where he knows there is not more enoug space to display it crisp. This is causing the "blurry" effect. No think about resizing the 120x120 to the half. Thats a lot more easier because you dont need to mix colors anymore. Or in more technical term:
Well rastered images when scaled in either direction are going to have some anomalies. When you make them bigger, it’s obvious – things get pixelated quickly. When you shrink them down, whatever is rendering it has to guess on what pixel goes where. https://css-tricks.com/forums/topic/scaling-down-images-with-css-makes-them-blurry/#post-188194
3. Are there a specific resolution for images
Thats basicly a very good question and opens the topic of "responsive" Images. As you know the pixen density on 4k Monitors / Smartphones is a lot higher then on regular screen. The fact that images cannot scale the informations by themself makes them pixelated when enlarged and blurry when shrinked. Best case would be to use SVG as often as you can, icons are best usecase for icons. Normally just putting the bigges image online would do the task, but performancewise it would be catastrophical. If you want to master this topic I can give you some good links to dive in:
https://css-tricks.com/optimizing-large-scale-displays/
https://css-tricks.com/responsive-images-css/
Hope thats answers, at least, a bit of your worries :)
On a webpage I am rendering a collection of images. Some images are portrait orientation, some are landscape, all are larger than the desired render size.
I want to display these images in a gallery of neat, uniformly sized, square thumbnails.
How can I do thus using only CSS?
I would like to avoid a javascript library if possible. I don't need to select a part of the image to display, just any central-ish square area.
I've seen this question asked elsewhere, but have not yet found an answer that seems to work with all orientations (e.g., portraits may get correctly cropped/resized, landscapes do not).
You could still use server side technology to resize the image via cURL; however, that is neither here nor there. One thing to understand, CSS is not really a programming language, as in, it cannot make decisions or do any real math, so we can't make dynamic decisions with just CSS.
That being said, you could create divs for your gallery, and use CSS to set the background image to the desired image. In CSS3 there is a property called background-size. You can set the size in pixels manually, but it will not maintain aspect ratio that way, so it will probably look awful. Setting the background-size: cover will scale the image so that it completely fills the background area while cutting off the excess. Setting background-size: contain will scale the image so that it maintains its original aspect ratio and fills the background without cutting off the image. Here is a little code that kind of explains how to use it. jsFiddle
EDIT: I forgot to mention that this solution will only work in IE9+ (should work fine in FF, Chrome and Safari)
I suggest having a div wrap the images. You can specify a width and height on this wrapper with a overflow:hidden.
See this:
http://real-sense.com/index.php?option=com_content&view=article&id=106
The set of vertical images on the right are being resized using CSS
.thumbnail-product-resize
{
width:144px;
height : auto;
}
Does anyone know how to do this in a cleaner way so I don't lose quality on the image?
I mean that if I had resized the image using photoshop, the text won't appear as blurry as it does here.
Tested in FF
Thanks
The quality of your images will depend on the original size of the image you use. If have a large image with good quality, say of size 400x500, and it is then resized in the HTML to 80x100, it will still be a 400x500 image. However you can only fit a certain number of pixels on a smaller image of 80x100, so this bigger image has to be sampled. This means that an average is taken of pixels and then made to represent a 80x100 size image.
If you want a more definite result you can change to original size of the image to 80x100. This will probably give you better results.
Once upon a time browser image resizing gave truly heinous results due to the unsophisticated nearest neighbor technique they used to scale images. Now they usually perform filtering when scaling and there isn't that much difference between in-browser resizing and resizing in Photoshop.
The real advantage to scaling an image before serving it to the client is that you aren't forcing the download of large images when they aren't necessary. Depending on the size of your images, this can significantly reduce your page load times.
One final thing to consider is that more and more people have devices with "retina" displays. For those users scaling the image before serving it will result in much less crisp images.
Here's an in-depth comparison of the image scaling methods used by various browsers: http://entropymine.com/resamplescope/notes/browsers/
Even if you had done this in photoshop those images you have would still appear pretty much the way do just now.
FYI you don't need to include height:auto in your CSS above.
Best bet would be to create a seperate set of thumbnails (using photoshop) which maybe just show a portion of the image.
Loading the thumbnails and resizing them with css the way you are doing is bad practice as you are still having the user download the large images first.
It is impossible to shrink an image without loosing quality unless it is an vector-image. That would mean that you'd have to use SVG. And considering the images displayed I don't think you wan't to do that.
Also you mentioned the cleaner way to do it, use photoshop or something similar.
I created a black and white collage consisting of a number of images - but saved the file as 1280*1024 - ideally encompassing that rez of a screen.
The issue is, would it be wiser to have the background scale, and stretch the images in the case of a larger screen or should I have it repeat so as not to lose resolution, and have smaller screens cropped from some of the background?
Thanks for any insight!
I personally don't think scaling an image up is ever an option. It's incredibly noticeable, and it doesn't look good. I would recommend using a background image that at least works on 1920 x 1080, and gracefully fade out the image on the edges or tiles well so if someone sees the page on an even larger screen, there aren't strong lines on the edges of the background.
If you are concerned about the bandwidth involved in large images, check out CSS3 Media Queries. All mobile browsers support this CSS3 module, and it will allow you to target certain resolutions and send them smaller images (both in dimensions and file size).
If your image does tile well, I would recommend going with the smallest pattern, and letting css do the repetition for you. There's no point in pushing more pixels down the pipe than necessary.
It's up to the user really but they obviously can't make that decision. I'd scale it but that's not as easy as tiling it. I've never successfully scaled a background image.
It will also depend on your preference.
Are you okay with having a stretched image as a background, in case the user has a larger screen? If yes, then by all means set the background image to stretch. Or, are you more keen on preserving the integrity of the image? In the latter case, it's much better to have the image tile.
If you're interested in creating a full page background image, try one of these techniques found on CSS Tricks: "Perfect Full Page Background Image".