I have several high-resolution images that I am using on my website. I am using PHP to echo the images. I specify a width of "30" for each of the images, which correctly sizes them.
The problem is that for SOME of the images, there is some sort of automatic conversion to data URI - which seems to cause the images to not only be resized to 30x30, but also to have a resolution of 30x30.
This seems to happen when I refresh - almost like it is caching the php after the first execution, then on refresh, it thinks the image file size is actually 30x30.
See images below - the first image is the first time I visit the website and screen captured on my iphone. Then I refresh, and the second screenshot is the result. Notice that the apple image remains crisp on both, while the rest appear blurry. All of the original files have approximately the same resolution.
Additionally, if I view the apple image (after refresh) in it's own window, it shows this:
.../logos/30xNx50de0713c94d847...
Whereas if I view the "dicks sporting goods" image in it's own window, it shows this:
data:image/jpeg;base64...
I am not specifying any kind of data URI conversion - would it be something on the server that does this automatically? And why for some images but not others?
Thank you for your time.
I determined this was a result of PageSpeed being enabled on my host. PageSpeed is a Google product that optimizes the loading of pages - and in this case, transforms images based on the width that is specified in the img tag.
By adding
?ModPagespeed=off
to the end of any page, it disables PageSpeed and shows the images at full resolution. I took this approach rather than disabling PageSpeed entirely, because I want some of my pages to take advantage of the optimization.
Related
I am working on website which is having huge amount of PDFs shown to its page. Those PDFs are listed on the page. The count may be 150 on every page.
We need to show the preview of first page of those PDFs to show the user whats inside every PDF.
What I am doing now?
While uploading those PDFs on clouds, I am creating previews of first page of those PDFs (1 small preview and 1 large preview) using a tool called PQScan.
Small preview will be shown on page by default, Large preview will be shown on mouse hover.
What is the problem?
For around 150 PDFs per page, The loading time of small and large preview(.gif/.jpeg/.png images) from cloud is taking a lot of time.
Image for refrerece on how I am showing -
Is there any better way to tackle this problem to resolve the issue faced? Also the size occupied by these images on cloud?
Some suggestions from my knowledge are:
Use Lazy loading technique to improve your page load time. Refer Google Documentation to know more about this.
Save random pages of the document as single images (such as cover page, some 2-3 random pages in between). Then instead of automatic slideshow or GIF, only show the cover page preview image. And on mouse hover, you can load and display other pages as slideshow or any animation effect you can implement.
Use Next Generation image formats as they are much smaller compared to older formats. Refer here for more detailed information.
I have an iframe that shows a picture generated by a software on the server. The image size is sent in pixels to the software by a parameter in the command line.
The iframe size is set relatively, using <iframe width="100%" >, no problem with that. But in small screens, if the iframe gets smaller than the picture it causes a bad effect, with undesired scroll bars to show the hidden parts of the image.
Is there a way to know the size of the iframe in the browser, or the screen itself, so I can send the correct size to generate a picture that will fill properly in the iframe?
(I guess this is used by responsive themes)
EDITION: I'm reasking this in another way here How to make it sure that an iframe content fits it?
The best approach would depend on the method in which the image is loaded into the iframe. The size of the iframe would have to be determined on the client end, so it would be out of reach for PHP.
I'd personally load the image with PHP on the server end and avoid iframes. If you are loading the image after the page is loaded, you might want to reset the iframe's size using javascript(or jQuery).
If you could provide more detail about how the image is loaded into the iframe, it would help figure out what exactly you're looking for.
Image this scenario:
There is a picture locally in my server, where a sketch is displayed, and there is a "blank hole" area on it.
Then, a user can upload another picture to my server.
What i'm trying to achieve is this:
After image upload is finished, the first image (the one with the "hole") is displayed, and behind it is displayed the user's photo, so that you can see it through the "blank hole" area of the first photo.
Then the user can move his picture (drag & drop style) so he can choose which area of it is visible through the "blank hole".
Then i would like to save the result - by merging the 2 photos or keeping the position of the user's picture in a db so i can display it again later.
(Something like this more or less)
What kind of technollogy should i look for? I'd guess javascript(for the drag & drop) or html5 or php(for merging the photo)?
Are there any libraries that i can use?
I hope my explanation isn't too messy, i didn't even know how to google for it.
I don't know if there are better solutions (and I suspect there are), but I suspect all of this can be done with not too much trouble. Here's a rundown of one way to approach the problem:
Use a JavaScript-powered "upload widget" such as uploadify to enable your user to upload "his" image to the server. The server will do some processing on the image (e.g. resize and crop to suitable dimensions) and save it using e.g. PHP's gd library. It will return a URL to the "prepared" image back to the browser -- all of this through AJAX.
The browser then has a URL to the user's image, so using more Javascript you can dynamically add an element that displays it inside the page and allow the user to move it around with e.g. jQuery draggable. Compositing the draggable image behind your static content (the image with the "hole") is a detail you will have to take care of using a combination of HTML, CSS and again Javascript.
When the user is done, use an AJAX call (e.g. again jQuery) to inform the server of the image's positioning (this will be available through the facilities of the Javascipt framework you have selected). The server can then "compose" the two images together (gd or something equivalent once more) and return to the browser a URL through which the final product can be accessed.
Of course there are lots of details to take care of here, but knowing exactly what the plan is should help you get started.
Have a look at the PHP GD extension. If it's installed, it's pretty easy to have an image (with a transparent center) to be merged on top of a second image that a user would upload.
Have a look at http://php.net/manual/en/function.imagecopymerge.php
Ok to get you started, yes use a JavaScript drag and drop module for the placing of the image. You can record the x /y cordinates relative to the container. Do the image merging with a PHP image library / Class. Something like this : http://www.phpclasses.org/package/3930-PHP-Generate-an-image-from-the-combination-of-2-images.html
I'm displaying pieces of an image in a large grid created from divs. I'm using the background-image and background-position to display portions of the image. The problem I'm running in to is that a user can simply open up firebug and see the entire image (which defeats the purpose of the game).
I've attempted to mask the path using a php script as the URL but if the user navigates to the php file, they can still see the image. It would appear that anything I do with the CSS is entirely client side so denying everything outside the localhost in my .htaccess won't work.
Any suggestions?
The over arching goal is to have an automated way to split and display pieces of the image into a grid.
If you deliver the whole image to the browser, the browser holds the image and has every right to show it to a user. I don't think you can prevent the browser from showing it. I'm afraid you will have to deliver the image in pieces, or perhaps write your whole game using <canvas> and play around with images as pixel data. :)
I am working with php. I have images kept in order. When i do query the images comes in order but when they load they does not load in order. The small images load first and then big images. For example I have 5 images. These images should be loaded in order(1,2,3,4,5). But here its not happening. Image 4 loads first, then 2, 1 and so on. So what can i do for this problem? Hope to get solution.
Thanks in advance.
If you are speaking about the order images are displayed by a web browser, you do not have much control over that, as long as you have several <img> tag on your page :
the browser will request the images from the server in the order it wants (most probably, the first <img> tag encountered will be the first image requested)
each image takes some time to download ; and each image is displayed when it's downloaded ; considering small images should be downloaded faster, small images should be displayed first... depending on the order they were requested -- see previous point.
In the end, if you want absolute control on the order the images are displayed, your initial HTML should probably not contain all the <img> tags: a solution would be to add those, in the right order, when the previous image is downloaded.
This can probably be done with some JavaScript code, to detect when an image is loaded (event "load") ; and when an image is loaded, just add a new <img> tag to the page, for the next one; and so on.
But I wouldn't go with such an idea: it won't work if JS is disabled, your images will not be seen by search engines.
You can control everything on your web server, but nothing on network or browser sides.
A possible solution is to build a single image containing your five images and display each relevant portion to its dedicated position.
Have you tried preloading them with a JavaScript library?
Not sure how you would implement this in PHP, but in the past I have usually had the a 'order' field for each image, then the images were added dynamically according to the 'order' field.
As you should have guessed, image is loaded according to their sizes. Ofcourse, the smaller ones will load before the bigger ones. And yeah, as eyze said, wat about you preload them with a javascript preloader and display them in the right order?