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.
Related
I am new to web development and I have a question regarding the natural size of profile pictures vs their actual size.
I noticed that when I inspect element on the profile pictures on popular websites, the natural size of the avatar image is usually twice as large as the displayed size.
Some examples:
And when trying this out on my own, I noticed that images do really look better when you make sure the actual (natural) size of the image is twice as large as the displayed size.
As you can see the 64x64 picture looks a lot more crisp than the 32x32 picture. My question is if there is anything special about the two-factor. Can I make it a 128x128 picture and display it as a 32x32 to make it look even better?
Most images on the web are bitmap1 images, which are made of hundreds of thousands of pixels. For example, a 32x32 image would have 32*32 = 1024 pixels. To display the image, the browser would have to go through every single pixel in the image. So the more pixels in the image, the longer it takes to load it.
As for why the image looks better or clearer is because the number of pixels in the original image (natural size) is the same no matter how much you zoom in or out of the image.
So when you zoom in on an image, you get the following result:
(Image from http://scientificcuriosity.blogspot.com/2006/09/how-is-digital-photo-stored.html)
The "squares" you see are individual pixels.
But if you zoom out, you get the opposite effect:
(Image from https://www.researchgate.net/post/How_can_we_quantify_postural_stability_when_a_human_is_standing_without_perturbation_and_with_it)
As you can see, the image is much more clear when scaled down.
But, there is a major disadvantage to large images (in terms of width and height, or number of pixels), they take longer to load.
The more you scale down an image, the more crisp it will look, but also smaller.
Your best option is to use a medium-sized image and display it scaled at 50% to 100%.
[1] https://en.wikipedia.org/wiki/Bitmap
Image clarity works on the pixel, if you using the high-resolution image for a small display it's not a good idea because High-Resolution image size is big always. your website will be slow.
you can go with this For Example - Natural Size (64x64)px and you can show in (50x50)px not the big difference of Image Pixel.
it will also show your image clear.
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.
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.
I was noticing that a GIF was being displayed with padding in FireFox 5 and IE 8. When I viewed the image size via FireBug, I noticed that it was a few pixels larger than expected.
Expected height: 160px vs. actual height: 171px
When I opened the GIF in an image editor, the editor displayed the correct dimensions, however when I ran ImageMagick identify I received the following information:
newGif.gif GIF 200x160 200x171+0+5 PseudoClass 256c 30kb
If I modified the geometry to 200x160+0+0 the image displayed as I expected it to in FireFox. FireFox and IE 8 seemed to be referencing the Image's page geometry rather than dimensions! Is my analysis correct and if so is this true for all image types or just GIF's?
Updated, I have included an image for your viewing pleasure! This image displays as 200 x 171 for me in FF, but is actually 200 x 160 when you download and view in a graphics program.
Header of this GIF file does not correspond to it's body.
Image dimensions are stored in 6th to 9th bytes and from the screen shot you can see that dimensions in the header are 00C8 x 00AB which is 200x171 but it's actual size is 200x160
So this image is not valid. There are no standardized behavior for parsing invalid gifs and that's why there is this inconsistency.
Most probably firefox preallocates place for images before they are fully downloaded, when an image is fully downloaded it is put into the center of preallocated space. and because preallocated space is 200x171 but the actual image is 200x160 you will see a border.
EDIT: After going through GIF format reference it appears that GIF does allow this. So the image is valid. So here's what's actually going on here:
GIF format consists from several blocks. There is a header block and one or more(if the image is animated) image blocks (there could be other blocks as well, but they are not connected with the issue). Header block holds some information about the image, including it's width and height. However each image block has it's own width and height as well. So what happens with the image in question that it has the main image size as 200x171 but the single frame with the size 200x160. So most editing programs and libraries which doesn't support animated gifs will extract the first frame and display it with the size 200x160 the browsers and editors which do support animation should display it with the full size of 200x171.
PS Every image block has image top and image left position. It seems that by allowing frames to be smaller than canvas, and allowing to move frame's position on the canvas, GIF's developers tried to shave couple of bytes of the animated gif files. I wonder if any of the modern graphic editors take advantage of that... probably not... :)
GIF format byte order
I suspect that the GIF is an animated format, so it could contain several images located on different positions of the geometry frame. Therefore, the browser should reserve place for a whole thing.
If you save the picture, and right click->properties, it'll state that it is 200x160, also of note when you preview the picture in windows black bars are added to the image, which is strange. If you open it in ms paint (just for demonstration purposes) you'll notice that the image is padded with black bars, and when you look at the file->properties it says the image is now 200x171.
The most likely scenario is that the file header says it's 200x160 (which windows/browsers etc looks at to tell you the image size quickly), while the actual image block is 200x171. The black bars don't show up in browsers as they are likely transparent, but as ms paint and windows preview don't support transparency, the black bars show in them. Further the correct size is found in mspaint because the header data is thrown out, and the properties show you properties of their data structure now holding the image block to image editing, similarly if you load the image into mspaint, modify the image to remove the black bars, save, and then put that picture into your browser then the padding will disappear.
Most of the time, when loading the image of an image file, only horizontal resolution of the image is required, and the image block is just read for the horizontal resolution for every vertical row of the image, when you read the end of the image block, you're at the end of the image, so heeding the vertical resolution isn't mandatory to load the image from it. This is why the image appears normal, and doesn't crop off the bottom edge.
As for why this image isn't padded in other browsers. I can only assume that this padding images with boarders is a standard of sorts that they have come to expect in image files, and when confronted with an image block larger than the file header specifies, they crop it toward the centre of the image block to the best of their ability
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".