I used a 3rdparty image merging watermarking script to watermark some images, though it did the job as it should the result was the kind of disastrous the folder/dir size went from 3GB to 9GB.
So I was thinking that regular watermarking would be a better option rather then image overlaying, but I can't seem to find anything about wm backgrounds only text, what I want is a white section overlay at the bottom of each image and text inside that section, basically like 9gag.com but on top of image rather then below.
example:
The problem is likely the output settings. Watermarking itself should not add to the process, however when generating a "new" image, there's a good chance the optimization/compression settings weren't the same as the original image (setting it as anything lower than the original image won't gain any quality since the information is already lost, so keep it the same or set it higher).
Related
I'm building a responsive site using Zurb Foundation.
I have a PHP script which will resize and caches an image using gdlib if you append a query string with new dimensions in the URL. For example to resize an image to 300px wide:
http://www.mydomain.com/images.php?imgfile=path/to/picture1.jpg&w=300
I am also using some HTACCESS rewrite rules to make this URL pretty and avoid having a query string. So this URL gives the same result as above:
http://www.mydomain.com/img/300w/path/to/picture1.jpg
The PHP file performs some simple arithmetic to constrain by width or height, checks if the resized version is already in cache, if so outputs it, if not, resizes the images, saves it using imagejpeg and outputs it with header("Content-type: image/jpeg");
I am also using Zurb Foundation and want to use the interchange javascript like so:
<img src="http://www.mydomain.com/img/300w/path/to/picture1.jpg"
data-interchange="[http://www.mydomain.com/img/300w/path/to/picture1.jpg, (default)],
[http://www.mydomain.com/path/to/picture1.jpg, (medium)]">
However, this does not seem to work. Only the 300px is shown for both breakpoints. After much testing it's clear that only what's in the src attribute is taking. The images passing through the resize script don't work. This is true even if it should be using the medium image which is the direct path the full size image.
I tried to debug the interchange javascript, but am not that skilled in Javascript.
Any help or advice would be appreciated. Someone must be trying to using dynamically resized images with PHP using interchange.js on a responsive site.
There is no need for debugging interchange, it works pretty well.
First, have you included the foudation.js file before interchange.js (dependancy) ?
Tip for debugging: try with default/medium/small and use different images (ex: different color rectangles) to quickly notice changes.
Also, in your example, there is only one path (see below) and you're having a "default" named-query. What is the point of loading the same image twice ? You might want your default size to be in src="", and your (typically) bigger sizes thereafter ?
What interchange does is letting the src"(ex: small.jpg)" loads as usual (hence it's displayed without js enabled) and THEN loads a bigger image depending on the named-query/media-query. So perhaps you could generate all your image size on upload (with no check for size existance needed). At least, it's the way I do it with wordpress.
<img src="http://www.mydomain.com/img/default-size/300w/path/to/picture1-small.jpg"
data-interchange="[http://www.mydomain.com/img/medium-size/800w/path/to/picture1-medium-sized.jpg, (medium)],
[http://www.mydomain.com/img/large-size/1200w/path/to/picture1-large-sized.jpg, (large)]">
As I can see on the Zurb Foundation Github repo Issues there may be a problem with url containing parameters and their regular expression
I have a PHP photo sharing application in which user-uploaded images are resized into various thumb formats using ImageMagick.
As a seemingly "smart" way to save on file size, I am stripping exif info from these thumbs as follow:
$imagick = new Imagick($image);
$imagick->stripImage();
$imagick->writeImage($image);
This works. It does remove the EXIF info, where a thumbs of 30KB saves 12KB and becomes 18KB. A significant saving when showing many of such thumbs on a single page.
The problem however is that it works a little too well. The resulting images seem to lose a lot of color information and look "flat" compared to their non-stripped versions.
Based on my research so far, my theory is that one or both of the following is true:
Imagick throws away essential color profile information as part of the stripping process
Imagick recompresses the image upon saving it, losing quality
Regardless of the cause of the problem, I'm looking for a way to remove EXIF information in such a way that it does not affect the image quality or color itself.
Is this even possible?
Update:
Based on Gerald Schneider's answer, I tried enforcing the quality setting to 100% prior to "stripping" the image:
$imagick = new Imagick($image);
$imagick->setCompression(imagick::COMPRESSION_JPEG);
$imagick->setCompressionQuality(100);
$imagick->stripImage();
$imagick->writeImage($image);
Unfortunately, the problem remains. Below is example output where despite setting the quality to 100%, images are still flattened.
Consider keeping the ICC profile (which causes richer colors) while removing all other EXIF data:
Extract the ICC profile
Strip EXIF data and image profile
Add the ICC profile back
In PHP + imagick:
$profiles = $img->getImageProfiles("icc", true);
$img->stripImage();
if(!empty($profiles))
$img->profileImage("icc", $profiles['icc']);
(Important note: using the ImageMagick 3.1.0 beta, the result I got from getImageProfiles() was slightly different from the documentation. I'd advise playing around with the parameters until you get an associative array with the actual profile(s).)
For command line ImageMagick:
convert image.jpg profile.icm
convert image.jpg -strip -profile profile.icm output.jpg
Images will get recompressed of course if you use ImageMagick, but at least colors stay intact.
Hope this helps.
Having made similar changes to MIME types in file headers that were incorrectly stored, I'd suggest you verify the length of the EXIF data via the standard tools, and then "Zero" the data manually using multibyte string functions.
EXIF can only be a maximum of 64KB in a JPEG file, however I'm not positive if it's exacly 64KB, so I would begin with this.
GIMP (another opensource image editor) also allows to remove EXIF, IPTC, XMP, thumbnail, ICC (color profile), etc meta data without loosing image/picture quality.
After opening the image in GIMP, Choose "Export" / "Export As" etc option, then select/unselect what meta data you want to remove/keep.
To keep original image quality you must select (tick mark) the option "Use quality settings from original image", which is shown under the "Quality" sliding-bar in top.
I usually like to keep ICC (save color profile meta data) option selected, to keep good color quality, with a colored photo.
Other options (Save EXIF, Save IPTC, Save XMP, Save thumbnail, etc) i usually unselect.
More info: here.
I am working on a site at the moment, that requires the admins of the site to be able to upload pretty much any size of image, I then need to find a way to get the image down to the size required for the front end of the end the site, all this needs to be done without know what size of image the user is uploading, but the image always needs to scale to 209x293 without looking awful.
Is this even possible?
You should argue with your client, to forget that rule(accept ANY image), and accept rather, only images in that proportion, or better, you can use a tool to crop the image, forcing the user to crop an image in your needed resolution.
Jcrop is a library in Jquery which can help you a lot if you want to create that cropping feature.
Don't know your precise requirements, but since you tagged it with CodeIgniter, you can check out the Image Manipulation Class which has everything you need to do the job.
Not knowing the size of images before uploading is, you know, quite a common problem...Just be careful of the MAX SIZE, which is set in your php.ini.
You might find useful also the page on file uploading right in php's manual.
I am writing an PHP script to upload image files to the server and I have a few questions?
Is there a way to decrease the size of images in terms of kilobytes?
When I am using those files what is the best practice to embed those images into page? I mean do I always have to download the whole page?
Lastly, When resizing the pages(like 250X250 pixels) what is the pratice in order not to face the resolution problems?
I hope my questions are not too general. Thanks in advance!
Take a look at this http://www.webmotionuk.co.uk/php-jquery-image-upload-and-crop/ - There are many other free tools out there to convert images after the upload. The resolution shouldn't be an issue that is usually a problem when you give a size to an image object in html that is huge and not proportioned.
Here is another php resizer I have used this code before to do what you are requesting.
Is there a way to decrease the size of
images in terms of kilobytes?
You'll need to create a new image, based on the one you received.
You should first take a look at the PHP GD functions.
For instance: http://ch2.php.net/manual/en/function.imagecreatefromjpeg.php
When I am using those files what is
the best practice to embed those
images into page? I mean do I always
have to download the whole page?
What do you mean by embedding?
If you are talking about decreasing the size of the image before is uploaded, you can't with PHP, unless you use something like HTML5/Flash to pre-process the file before being sent.
What you want to do, after a user uploads that image, verify that the file is a real image, then using some library (if you use a framework, it probably has a way to resize images) resize the image to whatever max width or max height or max width and height you are wanting.
This will decrease the size of an image.
For the 2nd question, if I understand it, you are talking about what about when a user uploads a 500x500 and you want it to be 400x250, then you must scale and crop, this way the image is never stretched but a few pixels from the top or the bottom will probably be removed.
So I just put up a website for my high school and realized a lot of images are stretched especially on this page
www.eriesd.org/central/central2/staff.php
What you be the best way to make the images not so stretched?
I was thinking of adding a div and adding background image with center center or 50% 50%. Also on the career and tech pages I noticed the info page doesn't load in IE but the other pages load fine has anyone else ever had this problem?
I'm basically getting the location in menu and option and calling an ajax request which loads 1 of the 3 layouts which connects to my database and gets information depending on the option and location.
Assuming that the pictures are uploaded using some kind of php CMS, the first thing I would do, is process the images correctly at the moment they are uploaded: Apart from the bigger image, you would need to generate a thumbnail that fits the size you need for that page.
I would also recommend adding a notice to people who are uploading a picture, that this specific picture needs to have a landscape format as that is what you are using on the page.
CSS solutions would be my last resort to iron out small issues.
Edit: Apart from that I would seriously reconsider publishing all e-mail addresses like that and add some pagination as the page now takes a long time to load (especially with all the images being a lot bigger than you need them to be...).
They are stretched because you specified both width and height attributes for the <img> tag. If the actual image is of different dimensions, one can see how the browser has no options but to distort the image to make it fit the specified height and width.
Just don't specify either height, or width, or both, and the images are going to be ok.
You should set the height only on the img and add the width:200px;text-align:center CSS to the anchor if you want the white area either side. Omitting the width will shrink the whitespace around the image.
<a class="image" style="width:200px;text-align:center">
<img src="http://www.eriesd.org/central/central2/images/staff/kranking.jpg" alt="missing photo" height="112">
</a>
I'll answer your first question concerning images. The real problem is that your images are not sized to fit the space you want them to fill. One of them that I inspected was a 6MP (2848x2144) image weighing in at 1.5MB. There were many more of this approximate size and dimensin. Any one of those images is larger than the entire page should be by quite a lot. The first step is getting images to the size you need them to be. Your page is nearly 19MB. Not only so most browsers do a lousy job of scaling images, you're sending a ton of extra data and making the page load very slowly for users without very fast connections. Imagine a user with a mobile browser waiting on this and chewing through their data plan! A user with DSL might need several minutes; dial-up could require hours.
If you're uploading them manually, resize them first. Figure out a size constraint and resize and crop first. If you're using a CMS, find settings, plugins, or customize it to make a smaller thumbnail version and use it.
To keep the layout looking nice and equal, the only thing you can do is either stretch them as it is now, or, even better, crop the images a bit and resize them. You can probably do it programmatically for most of the pictures, just assume that the top center is where their head will be. You have stretched picture issues all over the site though.
As for the Career & Tech pages, they're still actually being loaded (at least in the latest IE) if you look at the source, but they're not being shown for some reason, so, either you have some CSS or JavaScript issues with .post or .content. It even pops up for a second sometimes and then disappears.
If you specify only a width, the height will be set proportionally and thus prevent stretching of your images.