I have an ecommerce site in which i have to display some products i.e 40-50 products per page.Every product has an image which displays the image of the product.
The main thing is that in the database i have a meduim/high quality image of the product whose dimensions would be around 720px-1024 px , these can vary and every image has dimensions in between these two.
Now, i have two different ways of displaying these images for product, i could use a php script to generate thumbnails from these pics whose dimensions would be 290X290 or i could use the style tag and set the width and height as 290X290 and source as the real image.
Let me explain this by an example.
Original Image
I could do this to display the image
<img src="/imagethumbnail.php?product_id=34"/>
<img style="height:290px;width:290px" src="productimg.png"/>
finall image
one calls a php script and generate a thumbnail image of size 290X290 while the other one simply uses the style tag.
Both of them are working fine but i think when i use the style tags i see a trade off in image quality.While when i use the script to generate the image i see a trade off in image generation like they take sometime to show up on the page.
What would be the better method to do this and what would be the perfect solution towards it?
I think the standard method is to generate the thumbnails in advance. And you should probably set the width and height in the markup as attributes on the img element, rather than under the style attribute.
Related
I have a large database with images. Problem is, quite some images have the wrong thumbnail, so I need to confirm that they match.
I want to compare the thumbnail and full size image with each other, and come up with a percentage that they match.
The thumbnails & full images do not have exactly the same dimensions.
The full images are PNG's with transparent backgrounds, and the thumbnails have a grey/white grid as a background.
What is the best way to see if a thumbnail & full image match?
Example of how a full image & thumbnail look.
I found & tried: https://github.com/kennethrapp/phasher but this gets thrown off by the grid background in the thumbnails.
I had nearly the same problem and my solution was that I compare the timestamp of the full size image with the one of the thumb. If the thumb is older, then a new full size image was uploaded and my system creates a new thumb (and also clears the according cache).
What is the best way to fit an image for thumbnail example 200px x 200px ?
after researching here are the best options I found:
save 2 set of images for thumbnail and large slideshow purpose, for example if user uploads img001 , then save 2 copies of the same image one for thumbnail(resized 200px x 200px) and one for large slideshow purpose(actual dimension).
just use one image and use it responsive with 100% width and 200px height(for thumbnail) and let the large image be itself.
with solution 2 I found that the thumbnail image always look shrunk.
Please give some suggestions on dealing with thumbnail images, thanks in advance
Here is what i suggest.
Store only one original image at the time of saving.
Maintain a Cache folder for your images in such a way that the cached images are created whenever you need to display on whatever size you want.
eg : make a function something like
getCachedImage($post->image, '200x200-','200','200')
and inside that function you can have some logic to save a precise sized
image you want inside cache folder. Dont forget to check if the following size image is already been saved. You can use size as prefix ('200x200-$fileName') as i have mentioned on example. I use Image Intervention Package for my laravel project to save those picture in the size i want it to display.
Now you can call this function in your view wherever you need to display an image and you can call any size image you want.
You will always have shrunk image if you use your option number 2.
And Even in your option 1, if you saved one extra image as thumbnail you will never have exact needed size for you thumbnail, so at some place this thumbnail is also gonna shrink.
I'm resizing larger images contained in posts for my site teasers using ImageCache (Drupal 7), and for some reason the quality of the images goes down significantly when I size down (e.g. 670x400 pixel image is sized down to 220x185). Quality doesn't usually go down when sizing an image down (only when sizing up?)
Does anyone know how I can fix this?
Thanks.
In back-end, under Configuration/Media/Image toolkit you can set the JPEG quality.
URL is:
/admin/config/media/image-toolkit
You can set a specific image style (image cache) preset for the node teaser from content type Manage display page. e.g. ?q=admin/structure/types/manage/[CONTENT_TYPE]/display/teaser
Click the gear icon next to the image field, and choose the image style you want to apply to the content type's teaser display.
This may be hard to describe...but...
I created some simple PHP forums and I have the ability for users to post image links and I want the image to appear on the page. BUT...my forum posts are inside an iframe and if the width of the post is too wide it would cut off the side so I want images to only be so wide. Any concepts for getting the image to fit? I wonder if there's some auto resizing option in HTML or a way for PHP to get the file width/height remotely and generate the HTML for it?
you can use the max-width attribute in css eg:
iframe img{max-width: 500px;}/*or whatever your max wants to be*/
and in php you can use
<?php
list($width, $height) = getimagesize($yourfilename);
you might need to wrap getimagesize in a if because it will cause it to return false on failure
I am not sure if this is possible or not, but I am trying to create an effect where when you mouse over an image that is the creation of multiple images overlapped with each other (images would be set with some opacity), I display that section of the image clearer than the other.
Hard to explain, but here a few examples
This image:
is the creation of all those images overlapped (each image is on top of the previous)
When I mouse over the final image I want to be able to "highlight" the part of the image that corresponds to that section of the image in the image itself
Something I was thinking to do is to just show the main image with opaque set, when the user mouse over it, grab the coords, check against all of the images (that cannot be more than 25) see if those coordinates are matching with a non "transparent" pixel and display such image on top of the main to give an "highlighted" effect, but the final images are about 400x200 and create an array of all the pixels on the fly when displaying the page is not realistic for a server that have thousands of hits per hour/minutes. Save this array in a database is not realistic as well as the size of the image might change depending on the page and we currently have 1.3milions final images each one being on average circa 10 broken down images
A possible solution is to create custom SVG overlays for each sub-image. Upon an onmouseover event, you'd decrease the opacity of the SVG element, making the below image more visible.
Checkout this tool for creating SVGs.
$("img").css("opacity","0.8");
$("img").mouseover(function()
{
$(this).css("opacity","1.0");
});
$("img").mouseout(function()
{
$(this).css("opacity","0.8");
});
For the effect of segmenting the image, try using an image map:
http://www.javascriptkit.com/howto/imagemap.shtml
Opacity of image maps is supported:
http://www.thehelper.net/threads/can-i-use-opacity-on-imagemap.57999/
Edit:
To achieve the hovering effect, try loading them into a canvas using Fabric JS, here is a demo:
http://fabricjs.com/hovering/
Abandoned the project, the ony solution is SVG but it nos possible at this stage as some browsers/OS do not support fully them