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.
Related
I am trying different methods to turn an image into divs that represent each pixel.
One method has been using php imagecolorat to create divs with a background-color which works well.
However what if I had thousands of divs width:1px;height:1px; each with the same css background-image with incremented background position?
What performance hit would this have? Ie: does the browser draw the entire image many times or only the section that is visible as the background? Note the original image is several hundred kb.
Thanks
Only the section of the image should be drawn, however the drawing operation will be called as many times as the amount of pixels, so that will be a performance hit. Did you try writing any test code and measuring how it works?
Thousands of divs will hurt your performance no matter what, because the browser has to parse each div, add it to the DOM, then render it.
The actual performance will be different on different browsers. Only the part of the image being requested will be drawn, but the rendering function that draws the image will be called for EVERY div. It's more or less whether the specific browser's implementation can render one pixel of an image faster or parse a string and print the image. If the browser has the image in-memory, the difference might be moot. But if the browser has to open the image file every time, then the disk access will kill you.
That being said, I'm willing to bet there are better ways of doing what you are trying to do. You can get the pixel the mouse clicked/hovered/etc using JavaScript, and then add an absolute div at that specific point to create the "filter" you are talking about. Furthermore, if two pixels next to each other get tagged, you can just expand the former div, rather than creating a new one, which will help the performance by a lot
In other words, look into just loading the image with an img tag, and then using JavaScript to do what you are trying to do.
Since multiple requests can slow down the speed at which a site loads, I was thinking that in the case of a gallery, would one large image containing all the thumbnails be better than loading individual thumbnails?
The large image would then use PHP to "chop up" the thumbnails and place them in the relevant locations on the page.
My main concern is would this have a negative impact on SEO? Since Google would only see one large image file, instead of many smaller ones. Would a way around this be to set the src of all thumbnails to redirect to the script that handles the thumbnail generation, where the image file name refers to a particular set of coordinates for that image?
As a rule of the thumb; for buttons/icons/stufflikethat use image sprites (one large image combining all images, uses css to only show a part between specific coordinates), for 'real' content images, just use separate images.
This has several reasons; icons, buttons and so on are images that appear on sometimes every page of your site and often multiple times on the same page. So it is really useful to combine them, as ie. it is really inefficient to start a new http connection to download an icon of 1kb (or less), imagine what will happen if you use hundreds. Furthermore this type of images are not important at all for your seo rank, only for the look of your site (but google doesn't care if your site is ugly as hell or beautiful as a princess)
But on the other hand, 'content' images, such as thumbnails, photo's of your holiday or baseball tournament are often big enough to rule out the efficiency part. As you can see in the chrome developer tools or firebug the browser will start the download of all images simultaneously. So downloading one image is pretty much as fast as downloading a hundred. But if you combine a hundred images, the download will be slower, as you have to download a larger bit of data in one piece. In comparison; pushing 2 gallons of water trough one hose will take longer than pushing the same 2 gallons trough 10 hoses. (offcourse this metaphore has it's holes, but it illustrates my point).
But more importantly; google reads out the img tags and uses the filename (src), the title and (less importantly) the alt attributes to determine how your image should relate to your seo rank. Images do have a relevant effect on your seo rank! But google also knows if it is the same image showing, or a different one, so a sprite wouldn't help you here. A script, with parameters saying which part of the image has to be loaded wouldn't help you at all, I believe if you think it over you can figure out why ;)
So don't bother about merging the thumbnails and stuff like that. If you want to improve speed, move your attention to caching and speeding up transmission. Some really simple improvements can be implemented by using for example gzip compression (google .htaccess gzip for that), proper caching headers etc.
You got it right, it is always better to download one large image and get all the image from there, i guess you meant javascript with the chop out thing, because you have to do that on the client side. This in terms of performance is a very good idea and lot of sites do it. Another idea is to use smaller images and resize them in the client side.Just be careful with the resizing not affecting the resolution of the image.
Im not so sure about this being negative to SEO, and as far as i know google doesnt execute any javascript function, so that work around, i dont think it would work. But in all honesty im not so sure about this, in my last job we never considered images as a big impact in SEO.
In my website on listing pages I have to show small thumbnail of images which are used in detailed pages and they are larger in size. SO to display thumbnail in listing i am scaling them with height and width in <img> tag.
I know this is never good idea. because it makes page heavy and it takes time to load.
Is there any way that images get automatically cropped according to given height width ?
If you have PHP available, you can try phpThumb, which does all that for you and much more. It can crop, zoom-crop, transform, blur, contrast...etc etc, and it auto-creates the thumbnails and keeps them in cache so it doesn't have to re-crop...etc each time the image is loaded.
It's also VERY simple to install and use, which is a big plus.
You can't crop things client-side to make them lightweight because all the heavy lifting is already done (transferring the files). Not to mention it would be very intensive for your end users to be doing image manipulations. You will need to create thumbnails server side. You should post a question detailing what server side technology you are using (C#, php, etc). Ideally you would cache them or create them ahead of time so that you only do it once and save your server from unneeded work too.
Actually, don't post a followup question on what server side tech you are using. This has been asked a ton of times on SO. Search for how to do it. php thumbnail creation for example.
I am trying to create an image gallery. My scroll bar gets rough and slows down when i try to add some 20 different images. Any suggestions??
Make sure you add the width and height attributes. On my webpage when I added them, for some reason it loaded a little bit faster on Safari and Chrome but made no difference on the other browsers.
You can also try lazy loading your images. It really makes a difference.
Make sure you resize your images to the size they are going to be displayed on your webpage.
Your question is vague, is it the images or scroll bars that are slow?
If images:
Never resize your images with css width height properties. This will load the entire image and be very slow. Instead resize images before uploading them, or have a thumb generator resize them on upload.
If the image is small (less than 100 pixels height or width) you can reduce it's quality when generating the thumb, so the file-size is smaller but to no noticable affect.
Use the correct file format.
- gif for animation
- png for small inconsequential graphics like logos and icons
- jpg for higher quality graphics like images
Are you gzipping content before sending it on the server?
Use a CDN for your images like AWS S3 yes, but DO NOT USE flick/picassa as they will 'look up' your image before serving it, which will be much slower.
Using just a CDN (AWS S3) will be better than your current hosting as they've been optimised for quick look ups, reducing the wait time by 50-90% compared to most web hosts.
Use only one CDN, once the DNS look up has taken place for the domain your browser will cache it.
If your site uses cookies or sessions store the images on a different URL (this can be a subdomain of your site), so that the cookies and session data aren't sent with each image request (slowing it down).
If the graphics are re-used set a time out parameter on them (a couple of months in the future), so that the browser caches them locally.
EDIT: I would also agree that loading images on demand/visibility in webpage is a very good practice.
If scroll bars:
Are you using custom scroll bars and or a custom scroll event?
If so, you may want to put a threshold (I recommend 100ms) for how often your resize event can be fired. Or manually fire the resize event after loading the images, as if in your scenario you know when the images have been loaded.
Try lazy loading your images using jQuery. Here's a plugin: http://www.appelsiini.net/projects/lazyload
Here's an example of when I've used lazy loading: https://www.lunatickets.co.uk (scroll down the page and watch the images).
Also make sure the browser isn't resizing your images! Make sure you've optimised them for the web!
Make sure you add width/height attributes to your img tags - other
wise your browser/website layout will "jump around" as it loads them.
If your inserting images try resizing them to the appropriate
width/height before you load them. Your browser will run slower if it
is resizing the large images to display smaller.
Try not to load all images at once.
Slideshows like this: http://sandbox.scriptiny.com/slideshow/, they only load the showed image plus some of the next.
The gallery I last used loaded the current image and the next 10 images. I don't remember the name, but I think that is the way to do it.
Have you tried keeping your images on S3, Flickr or Picasso? Let their servers take the hit for the HTTP requests
I have read a few similar questions and answers, but none completely address my issue.
Here is My Scenario:
I have what is similar to a tinyMCE (a home-brew version though) kind of editor. It lets users enter some text, and an image or two, etc. I have code that takes the items in there and renders them into a smaller div (what is essentially a thumbnail) in real time.
Here is What I Want to Do
Ultimately, the user may want to use their 'page' somewhere else, so I would like to let them go to a screen, view thumbnails of each page, and pick one.
Here is the Problem
Obviously, I could just use the same thumbnail code to render each page thumbnail. However, it can be bandwidth intensive (each page could have several images, not to mention the calculation would have to be performed many times - we are talking perhaps 40 to 50 thumbnails on a preview page).
So, I wanted to try to take the thumbnail div, and somehow create a png or jpg when they save the page in the editor (so the code for the page, and also a thumbnail image), and push it up to my PHP script to save the image to the server.
My first thought was that maybe canvas could do that, but there is the issue of translating the text and images onto the canvas first, which may or may not be possible.
So there it is. I am interested in any and all options, including commercial libraries if available that will do this -- only thing is, would like it to be in javascript.
You may want to look at:
http://html2canvas.hertzen.com/
A similar question was already asked:
Screen Grab with PHP and/or Javascript?